Set up ESLint in the eslint.config.js file to specifically scan TypeScript files with the extension *.ts

Question

Set up ESLint in the eslint.config.js file to specifically scan TypeScript files with the extension *.ts

How can I configure the new "flat config" file (eslint.config.js) to instruct ESLint to exclusively analyze TypeScript files (*.ts) and apply the TypeScript "strict" rules?

eslint.config.js

import tseslint from 'typescript-eslint';

export default [
   ...tseslint.configs.strict,
   {
      files: ['**/*.ts'],
      rules: {
         '@typescript-eslint/no-non-null-assertion': 'off',
      },
   },
];

package.json

   "scripts": {
      “lint": "eslint --max-warnings 0"
   },

When I run the npm run lint command for the lint task, it fails because ESLint analyzes all JavaScript files in my project (resulting in numerous error messages).

My goal is for only TypeScript files (*.ts) to undergo analysis with the "strict" rules.

Bonus Inquiry:
While the official ESLint documentation provides detailed information on each configuration option, a comprehensive overview of file selection strategy seems lacking. The "flat config" consists of an array of objects, but what is the overall process flow for grouping and processing files through these objects?

typescript eslint typescript-eslint eslint-flat-config

Answer 1

Answer №1

For more information, you can visit the following links: and :

export default tseslint.config({
  files: ['**/*.ts'],
  extends: [
    eslint.configs.recommended,
    ...tseslint.configs.strict,
  ],
  rules: {
    '@typescript-eslint/no-non-null-assertion': 'off',
  },
});

When using ESLint flat configs, it's important to note that configuration objects are applied in order. Each config object will apply to all files being linted unless specified otherwise with properties like files. In this case, there are at least 2 configuration objects introduced:

All of the tseslint.configs.strict objects, which by default apply to all configured files
An object specifically for files: ['**/*.ts']

To ensure consistency, make sure to include { files: ['**/*.ts'] } for all settings using tseslint.config.

Answer 2

For more information, you can visit the following links: and :

export default tseslint.config({
  files: ['**/*.ts'],
  extends: [
    eslint.configs.recommended,
    ...tseslint.configs.strict,
  ],
  rules: {
    '@typescript-eslint/no-non-null-assertion': 'off',
  },
});

When using ESLint flat configs, it's important to note that configuration objects are applied in order. Each config object will apply to all files being linted unless specified otherwise with properties like files. In this case, there are at least 2 configuration objects introduced:

All of the tseslint.configs.strict objects, which by default apply to all configured files
An object specifically for files: ['**/*.ts']

To ensure consistency, make sure to include { files: ['**/*.ts'] } for all settings using tseslint.config.

Answer 3

Answer №2

I found @Josh's answer to be helpful, but it only covered part of the solution. Another user provided a well-documented response at , explaining that eslint will include JavaScript files by default unless specifically excluded. When using tseslint.config, it is necessary to define exclusions in a separate configuration object.

Here is a suggestion based on the linked answer:

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    ignores: [
      'dist/', // exclude specific folder
      '**/*.js', // exclude all JavaScript files
    ],
  },
  {
    files: ['**/*.ts'],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.strict,
    ],
  },
);

Answer 4

I found @Josh's answer to be helpful, but it only covered part of the solution. Another user provided a well-documented response at , explaining that eslint will include JavaScript files by default unless specifically excluded. When using tseslint.config, it is necessary to define exclusions in a separate configuration object.

Here is a suggestion based on the linked answer:

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    ignores: [
      'dist/', // exclude specific folder
      '**/*.js', // exclude all JavaScript files
    ],
  },
  {
    files: ['**/*.ts'],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.strict,
    ],
  },
);

Answer 5

Answer №3

Have you attempted this method without relying on tseslint.config?

import js from '@eslint/js'
import tsParser from '@typescript-eslint/parser'
import tsEslintPlugin from '@typescript-eslint/eslint-plugin'
import tseslint from 'typescript-eslint'

export default [
  ...tseslint.configs.strict,
  {
    files: ['**/*.{js,mjs,ts}']
  },
  {
    ignores: ['**/node_modules', 'dist/']
  },
  js.configs.recommended,
  {
    languageOptions: {
      parser: tsParser,
    },
    plugins: {
      '@typescript-eslint': tsEslintPlugin,
    },
    rules: {
      'no-undef': 'warn',
      'no-unused-vars': 'warn',
      semi: ['error', 'never']
    }
  }
]

Answer 6

Have you attempted this method without relying on tseslint.config?

import js from '@eslint/js'
import tsParser from '@typescript-eslint/parser'
import tsEslintPlugin from '@typescript-eslint/eslint-plugin'
import tseslint from 'typescript-eslint'

export default [
  ...tseslint.configs.strict,
  {
    files: ['**/*.{js,mjs,ts}']
  },
  {
    ignores: ['**/node_modules', 'dist/']
  },
  js.configs.recommended,
  {
    languageOptions: {
      parser: tsParser,
    },
    plugins: {
      '@typescript-eslint': tsEslintPlugin,
    },
    rules: {
      'no-undef': 'warn',
      'no-unused-vars': 'warn',
      semi: ['error', 'never']
    }
  }
]

Answer 7

Answer №4

Here is the solution that meets my specific requirements:

Excludes linting of *.js files (which is crucial for my use case)
Avoids the need for the tseslint.config() wrapper (as I rarely make changes to the configuration file and do not require IDE assistance)
Maintains a clean and straightforward setup

eslint.config.js

import eslint   from '@eslint/js';
import tseslint from 'typescript-eslint';

export default [
   eslint.configs.recommended,
   ...tseslint.configs.strict,
   { ignores: ['**/*.js'] },
   {
      rules: {
         '@typescript-eslint/no-non-null-assertion': 'off',
      },
   },
];

Answer 8

Here is the solution that meets my specific requirements:

Excludes linting of *.js files (which is crucial for my use case)
Avoids the need for the tseslint.config() wrapper (as I rarely make changes to the configuration file and do not require IDE assistance)
Maintains a clean and straightforward setup

eslint.config.js

import eslint   from '@eslint/js';
import tseslint from 'typescript-eslint';

export default [
   eslint.configs.recommended,
   ...tseslint.configs.strict,
   { ignores: ['**/*.js'] },
   {
      rules: {
         '@typescript-eslint/no-non-null-assertion': 'off',
      },
   },
];

Set up ESLint in the eslint.config.js file to specifically scan TypeScript files with the extension *.ts

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular 2: Implementing a Class Addition with a Delay

Integrate service once the constructor has completed execution

Can anyone offer any suggestions for this issue with Angular? I've tried following a Mosh tutorial but it's

Angular8 with the [tinymce] library for customizing editor elements and configuring multiline options

Block-level declarations are commonly used in TypeScript and Asp.net MVC 5

The status of the Office.js appointment remains updated even after the saveAsync callback is executed

Showing the date object in a react component

The 'split' property is not found on the 'Int32Array' type

Configure Jest to run tests for Lit using TypeScript with Microbundle

When using Vue to bind a data URI to the img src property, I noticed that the image in the browser only updates when there is

The parameter type 'Function' cannot be assigned to the parameter type 'ComponentType<never>'

The upcoming router is not compatible with the NextPage type

Creating a nested JSON file dynamically in Angular: A step-by-step guide

Arrange a JavaScript map based on its values and ensure that a specific field index remains at the top position

Modify the MUI time picker to display as a digital clock inside a DateTimePicker widget

What method can be used to determine a number that is nonzero?

Looping through GET requests

What is the best way to utilize ngForTemplate for wrapping a template?

Lazy loading implemented with BootstrapVue's b-nav component

Leveraging conditional types and optional variables in Typescript to translate a string into another form