ESLint

Installation

Install the package:

npm i --save-dev @vita-mojo/eslint-config

Config

By default, the config supports the following file types:

'cjs', 'css', 'html', 'js', 'json', 'jsonc', 'jsx', 'md', 'mjs', 'mts', 'ts', 'tsx'.

To make use of @vita-mojo/eslint-config, the config can be set up as follows:

1. Create an .eslint.config.mjs file in the root of the project with the following content:

   import { eslintConfig } from '@vita-mojo/eslint-config';
   
   const nodeFiles = ['node-file.ts'];
   
   const config = defineConfig([
     globalIgnores(['dist/']),
     ...eslintConfig({
       browserFileConfig: { files: ['**/*.{cjs,js,jsx,mjs,mts,ts,tsx}'], ignores: nodeFiles },
       nodeFileConfig: { files: nodeFiles },
     }),
   ]);
   
   export default config;

2. Add config for the service worker environment, if needed:

   import { eslintConfig } from '@vita-mojo/eslint-config';
   
   const config = defineConfig([
     globalIgnores(['dist/']),
     ...eslintConfig({
       browserFileConfig: { files: ['browser-script.js'] },
       nodeFileConfig: { files: ['node-script.ts'] },
       serviceWorkerFileConfig: { files: ['service-worker.js'] },
     }),
   ]);
   
   export default config;

3. Add config for specific files, if needed:

   import { eslintConfig } from '@vita-mojo/eslint-config';
   import globals from 'globals';
   
   const config = defineConfig([
     globalIgnores(['dist/']),
     ...eslintConfig({
       browserFileConfig: { files: ['**/*.{cjs,js,jsx,mjs,mts,ts,tsx}'] },
     }),
     {
       files: ['common-js-file.js'],
       languageOptions: { globals: globals.commonjs, sourceType: 'script' },
       rules: { 'no-implicit-globals': 'off' },
     },
   ]);
   
   export default config;

Notes

If you make use of custom components for HTML elements, it's worth adding them to the ESLint settings in order to get more accurate linting. For example:

settings: {
  'jsx-a11y': {
    components: {
      Button: 'button',
      Image: 'img',
      Input: 'input',
      Link: 'a'
    }
  }
}

For more information on this, see the eslint-plugin-jsx-a11y documentation.