eslint-config-kirinus

eslint-config-kirinus

Specific kirinus configuration for JavaScript and TypeScript projects.

It applies the recommended rules from:

• eslint-config-prettier
• eslint-plugin-eslint-comments
• eslint-plugin-import
• eslint-plugin-ordered-imports
• eslint-plugin-promise
• eslint-plugin-unicorn

Therefore, these lint rules will be compatible with your prettier workflow, and won't collide when running prettier commands.

In addition, the following recommended rules can be enabled on demand. By default, when extending from kirinus directly, all will be enabled.

• JavaScript
  • eslint
• Jest
  • eslint-plugin-jest
• React
  • eslint-plugin-jsx-a11y
  • eslint-plugin-react
  • eslint-plugin-react-hooks
• TypeScript
  • eslint-plugin-import
    • typescript
  • @typescript-eslint/eslint-plugin
    • eslint-recommended
    • recommended
    • recommended-requiring-type-checking

Configuration

1. Install ESLint

# npm
npm install eslint --save-dev
# yarn
yarn add eslint --save

2. Install eslint-config-kirinus

# npm
npm install eslint-config-kirinus --save-dev
# yarn
yarn add eslint-config-kirinus --save

3. Install required ESLint Plugins and configure

All configurations inherit from some base rules. Therefore these plugins are always required.

# npm
npm install eslint-plugin-eslint-comments \
            eslint-plugin-import \
            eslint-plugin-node \
            eslint-plugin-ordered-imports \
            eslint-plugin-promise \
            eslint-plugin-unicorn \
            --save-dev
# yarn
yarn add eslint-plugin-eslint-comments \
         eslint-plugin-import \
         eslint-plugin-node \
         eslint-plugin-ordered-imports \
         eslint-plugin-promise \
         eslint-plugin-unicorn \
         --dev

JavaScript

Lints .js files.

To add this configuration:

module.exports = {
  extends: ['kirinus/javascript'],
};

Jest

Lints JavaScript/TypeScript test files with the following globs.

[
  '**/__tests__/*.{j,t}s?(x)',
  '**/test/**/*.{j,t}s?(x)',
  '**/*.spec.{j,t}s?(x)',
  '**/*.test.{j,t}s?(x)',
];

It requires the following additional plugin:

# npm
npm install eslint-plugin-jest \
            --save-dev
# yarn
yarn add eslint-plugin-jest \
         --dev

To add this configuration:

module.exports = {
  extends: ['kirinus/jest'],
};

React

Lints .tsx and .jsx React files that are no tests.

It requires the following additional plugins:

# npm
npm install eslint-plugin-jsx-a11y \
            eslint-plugin-react \
            eslint-plugin-react-hooks \
            --save-dev
# yarn
yarn add eslint-plugin-jsx-a11y \
         eslint-plugin-react \
         eslint-plugin-react-hooks \
         --dev

To add this configuration:

module.exports = {
  extends: ['kirinus/react'],
};

TypeScript

Lints .ts and .tsx Files.

It requires the following additional plugin:

# npm
npm install @typescript-eslint/eslint-plugin \
            --save-dev
# yarn
yarn add @typescript-eslint/eslint-plugin \
         --dev

To add this configuration, you need to define your TypeScript config.

In your ESLint config, set parserOptions.project to the path of your tsconfig.json.

For example:

 module.exports = {
   extends: ['kirinus/typescript'],
+  parserOptions: {
+    project: './tsconfig.json',
+ }
 };

All

If you just want to use all the rules (ideally for a monorepo setup):

# npm
npm install eslint-plugin-eslint-comments \
            eslint-plugin-import \
            eslint-plugin-node \
            eslint-plugin-ordered-imports \
            eslint-plugin-promise \
            eslint-plugin-jest \
            eslint-plugin-jsx-a11y \
            eslint-plugin-react \
            eslint-plugin-react-hooks \
            @typescript-eslint/eslint-plugin \
            --save-dev
# yarn
yarn add eslint-plugin-eslint-comments \
         eslint-plugin-import \
         eslint-plugin-node \
         eslint-plugin-ordered-imports \
         eslint-plugin-promise \
         eslint-plugin-jest \
         eslint-plugin-jsx-a11y \
         eslint-plugin-react \
         eslint-plugin-react-hooks \
         @typescript-eslint/eslint-plugin \
         --dev

and

module.exports = {
  extends: ['kirinus'],
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
};

The tsconfigRootDir is useful when you want to load different tsconfig.json files. It will always use the TypeScript configuration of the package to be linted.

4. Run ESLint

Run the following script:

# npm
npx eslint .
# yarn
yarn eslint .

ESLint will lint all relevant JS and TS files within the current folder, and output results.

Most IDEs via a ESLint plugin will also give these results.

Troubleshooting

I get this error when running ESLint: "The file must be included in at least one of the projects provided"

This means you are attempting to lint a file that tsconfig.json doesn't include, when running the kirinus/typescript config.

A common fix is to create a tsconfig.eslint.json file, which extends your tsconfig.json file and includes all files you are linting.

{
  "extends": "./tsconfig.json",
  "include": ["src/**/*.ts", "src/**/*.js", "test/**/*.ts"]
}

Update your ESLint config file:

parserOptions: {
-  project: './tsconfig.json',
+  project: './tsconfig.eslint.json',
}