Mixed Typescript and Javascript Repo - eslint - TS rules affecting JS files

Question

I have a repo that is primarily typescript, however I do have some javascript floating around as well, primarily for build related stuff that would never be deployed. That being said, I would still like to lint it and be able to format it with prettier. However, I am now getting typescript related warnings in javascript files, telling me things need to be typed, even though it's a .js

It will first complain that the files need to become es6 modules, and then if I convert it to one, it will complain the the functions aren't types.

What would be the best solution to get rid of these issues?

Example file utils.js :

'use strict'

const log4js = require('log4js') // <-- Require statement not part of import statement.eslint(@typescript-eslint/no-var-requires)

var getLogger = function (category) { 
  log4js.configure({
    appenders: { out: { type: 'stdout' } },
    categories: { default: { appenders: ['out'], level: 'debug' } },
  })
  return log4js.getLogger(category)
}

const utils = {
  getLogger: getLogger,
}

module.exports = utils

When converted:

'use strict'

import { configure, getLogger as _getLogger } from 'log4js'

/*
Warnings on the following line
Missing return type on function.eslint@typescript-eslint/explicit-module-boundary-types
Argument 'category' should be typed.eslint@typescript-eslint/explicit-module-boundary-types
*/
var getLogger = function (category) {
  configure({
    appenders: { out: { type: 'stdout' } },
    categories: { default: { appenders: ['out'], level: 'debug' } },
  })
  return _getLogger(category)
}

const utils = {
  getLogger: getLogger,

}

export default utils

Basic folder structure:

src
 - components
    comp.ts
 - redux
    file.ts
 ...etc
build-system
   utils.js
   style.js
   tasks.js

gulpfile.js
.eslintrc.js

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noFallthroughCasesInSwitch": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "build-system",
    "src",
    ".eslintrc.js",
    "gulpfile.js"
  ],
  "exclude": ["node_modules"]
}

.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  parserOptions: {
    ecmaVersion: 6,
    tsconfigRootDir: __dirname,
    project: './tsconfig.json',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['react', 'react-hooks', '@typescript-eslint'],
  rules: {
    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': ['error'],
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
}

Answer 1

You need to specify the .js files explicitly in your tsconfig.include . Eg:

{
  "compilerOptions": { ... },
  "include": [
    "build-system/*.js",
    "src",
    ".eslintrc.js",
    "gulpfile.js"
  ],
  "exclude": ["node_modules"]
}

See here (skip to the end of the parserOptions.project section).