Eslint/Tslint Config help (excluding files)

Question

Recently in our project we migrated to use the @typescript-eslint/parser to slowly migrate from tslint. Everything has mostly been smooth but I have a small problem/question I can't work out.

Do I need to specify ignore files/patterns in both the tsconfig exclude array, as well as the ignorePatterns on the .eslintrc export object? What is the difference?

We have a messages.js file inside our src/lang directory that I'm trying to ignore but currently throws a lint error on our pre-commit hook, which got me wondering about this question and how these two setups work together.

Parsing error: "parserOptions.project" has been set for '@typescript-eslint/parser' The file does not match your project config: src/lang/messages.js. The file must be included in at least one of the projects provided

I think my understanding of these intertwine is off, as when eslint runs, I thought the parserOptions would pick up the project rules from the tsconfig, where the js files are excluded.

Currently, the sections I'm talking about in our eslintrc looks like:

module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: path.resolve(__dirname, './tsconfig.json'),
        tsconfigRootDir: __dirname,
        useJSXTextNode: true,
        sourceType: 'module',
        ecmaFeatures: {
            modules: true,
            jsx: true,
        },
    },
    ignorePatterns: ['node_modules/**', '.storybook/**', 'src/stories/**', '*.scss', '*.js'] // ignoring here works

tsconfig:

"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "src/**/*.js"], // exclude here doesn't work.

package.json:

"scripts": {
    "lint": "tsc --project ./tsconfig.json --noEmit && eslint --ext=jsx,ts,tsx src"
},

​

Alcoran

You probably solved this already, but I posted an answer in case it helps you, and also to help others who find this question. – Arta

Answer 1

ESLint passes the @typescript-eslint/parser plugin a list of files (which ESLint obtains from the command-line). The @typescript-eslint/parser plugin cannot control this list, so it does its best to act based upon the list it is given.

The error message is attempting to inform the user that ESlint is linting a file that is excluded from being parsed by the @typescript-eslint/parser plugin. From the plugin's perspective, there are two reasons this could occur:

1. The file was purposefully, explicitly excluded (by adding it to the tconfig exclude).
2. The user forgot to add the file to the tsconfig include.

In the latter case (which is much more common), the plugin wants to inform the user that their config is wrong, so that they can correct it. Hence the error message you saw.

In order to correctly exclude files from TSLint, one option is to use a .eslintignore file. You can also change the eslint command to ignore the excluded files:

eslint ... --ignore-pattern "src/**/*.js"

(But be aware that the ignore pattern is relative to the current directory, not relative to the location of tsconfig etc.)

Alternatively, if you do want ESLint to lint the files (but still exclude them in tsconfig), you can consider providing a more inclusive tsconfig for @typescript-eslint/parser by creating a tsconfig.eslint.json file that extends from your normal tsconfig.

Also see these GitHub issues:

• @typescript-eslint/parser doesn't ignore files, which is excluded by/in tsconfig.json #905
• parse error on excluded files #1174
• Exclude files in tsconfig without throwing an @typescript-eslint/parser error #1350

Arta

Answer 2

You can load the tsconfig and use the same values

NOTE: you can do this any time you use a js/ts file as a config file - you can load other configs, parse them, and reference their values.

const tsConfig = require('./tsconfig.eslint.json');

module.exports = {
  ...
  ignorePatterns: tsConfig.exclude,
};

Or, if you're us ESM:

import fs from 'node:fs';
import path from 'node:path';

const loadJSON = (f) => JSON.parse(fs.readFileSync(f, 'utf-8'));
const tsConfig = loadJSON(path.join(process.cwd(), './tsconfig.eslint.json'));

export default {
  ...
  ignorePatterns: tsConfig.exclude,
};

Analysand