@lub0v/eslint-config v0.0.2
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 > eslint-config-airbnb@18.2.0" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.3.0".
warning "eslint-config-airbnb-typescript > eslint-config-airbnb@18.2.0" has unmet peer dependency "eslint-plugin-react@^7.20.0".
warning "eslint-config-airbnb-typescript > eslint-config-airbnb@18.2.0" 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
andon 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"]