eslint-config

Shared eslint configuration for typescript projects.

Uses airbnb style as the base one.

Install

Install the config and all it's peer dependencies:

yarn add --dev @lub0v/eslint-config eslint typescript prettier eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-jest eslint-config-prettier eslint-plugin-prettier eslint-plugin-import

You may see thees warnings:

warning "eslint-config-airbnb-typescript > [email protected]" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.3.0".
warning "eslint-config-airbnb-typescript > [email protected]" has unmet peer dependency "eslint-plugin-react@^7.20.0".
warning "eslint-config-airbnb-typescript > [email protected]" has unmet peer dependency "eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0".

That's a known issue and you can safely ignore them.

Setup

add .eslintrc.js to the root of your project with the next contents:

module.exports = {
  extends: ['@lub0v/eslint-config'],
  parserOptions: {
    project: 'tsconfig.json',
  },
};

cat <<EOT > .eslintrc.js
module.exports = {
  extends: ['@lub0v/eslint-config'],
  parserOptions: {
    project: 'tsconfig.json',
  },
};
EOT

notice that it needs tsconfig.json to be present for the parser.

Add .prettierrc.js to the root of your project with the next contents:

module.exports = {
  ...require('@lub0v/eslint-config/prettierrc'),
};

cat <<EOT > .prettierrc.js
module.exports = {
  ...require('@lub0v/eslint-config/prettierrc'),
};
EOT

Scripts

if not already present, add next scripts to the package.json:

"format": "prettier --write '**/(*.ts)'",
"lint": "eslint --fix --no-error-on-unmatched-pattern {index,src/,__tests__/}{*,**/*}.ts",

** make sure to have proper paths in the lint script

Run

From now on, you should be able to run yarn lint and yarn format to run eslint scan/fix on files and format them with prettier.

Integrate with Webstorm / Intellij IDEA

Install Prettier plugin

To do that, go to Preferences -> Plugins, search for Prettier and install it.

Setup prettier plugin to execute on code format & on save

For WebStorm version 2020.+ Go to Preferences, search for Prettier, or go to Languages & Frameworks -> Javascript -> Prettier:

• make sure to update the Prettier package path to use the node_modules prettier
• select the checkboxes to on code format and on save.

Setup eslint plugin to run --fix on save

Go to Preferences, search for Eslint, or go to Languages & Frameworks -> Javascript -> Code Quality Tools -> Eslint and select the checkbox for Run eslint --fix on save;

Note that you might need to provide eslint package manually (select the one from installed node_modules).

Integrate with Visual Studio Code

Install Prettier plugin

Install Prettier as VS Code extension

Setup prettier plugin to execute on code format & on save

Within the Code > Preferences > Settings menu, search for Format On Save and make sure to activate it. Afterward, the file should format automatically once you save it.

Install ESLint plugin

Install ESLint as VS Code extension

Setup eslint plugin to run --fix on save

Within the Code > Preferences > Settings menu, search for Code Actions on Save. The first option will say Editor: Code Actions on Save and below that, there will be an option to Edit in settings.json. Click the link to Edit in settings.json. For ESLint to fix errors when you save your file, you will need to write the following code in settings.json:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate": ["typescript", "json", "javascript"]