-
Install eslint and install-peerdeps globally. If it throws any permission error, then prepend
sudo
to below command.npm install -g eslint install-peerdeps
-
cd
into project’s directory and runeslint --init
. This will generate eslint config for project. (Choose airbnb style guide during configuration) -
Install
eslint-config-auto
packagenpm install eslint-config-auto --save-dev
-
Replace
extends
key in.eslintrc
file with below contents{ "extends": ["auto"] }
-
Prepend below lines in package.json’s
scripts
key."eslint": "eslint --color --ext .html,.js,.json,.jsx,.md,.ts,.tsx *.* src", "eslint:fix": "npm run eslint -- --fix",
-
Run
npm run eslint
command. This may throw error and one installation command will be displayed. Copy that command and run it in terminal. It will install the required packages. Once all those packages are installed, runnpm run eslint
again. It should now run linter on all those files. -
Install prettier packages
npm install --save-dev prettier eslint-plugin-prettier prettier-init eslint-config-prettier`
-
Run below command to generate prettier config for the project.
# For linux and mac ./node_modules/.bin/prettier-init # For Windows .\node_modules\.bin\prettier-init
-
Project is ready with EsLint and Prettier Config!
-
If any package fails due to peer dependencies, try installing that package using
install-peerdeps
command. For example if eslint-config-prettier fails due to peer dependencies, run commandinstall-peerdeps -D eslint-config-prettier
eslint and prettier configeslint and prettier setupeslint prettier config vscodeeslint prettier config vscode. -
If Using VSCode, install ESLint plugin and Prettier – Code formatter plugin. These plugins will read eslint and prettier configs and help you format the code as you write.
Sumit Pore
Byte Size Information that maximize impact