You can use any plugin as you wish to. Here, I'm using VSCode editor.
You need to install the following plugins:
- ESLint - Microsoft
- Prettier - Code formatter - Prettier
- Learn with Sumit (Peace of the eye - Dracula version) - Sumit Saha (Optional)
Follow the steps to create settings.json
file inside the project root:
- Create a folder/directory named
.vscode
inside the project root. - Create a file named
settings.json
inside the.vscode
folder/directory. - Copy and paste the below
json
object into thesettings.json
file and save it.
{
// Theme
"workbench.colorTheme": "Learn with Sumit Theme",
// config related to code formatting
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"javascript.validate.enable": false, //disable all built-in syntax checking
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.tslint": true,
"source.organizeImports": true
},
"eslint.alwaysShowStatus": true
}
If you follow all the previous steps correctly, your vscode should look like this.
Make sure in your VS Code Editor, "LF" is selected as line feed instead of CRLF (Carriage return and line feed). To do that, just click LF/CRLF in bottom right corner of editor, click it and change it to "LF". If you don't do that, you may have face errors.
In order to lint and format Node project automatically according to most popular airbnb style guide, it is recommended to follow the instructions below:
Install the following dev dependencies one by one.
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
Or, if you are using yarn
as your default package manager, try this:
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
Or, if you are using pnpm
as your default package manager, try this:
pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier
To follow airbnb style guide run the following command:
npx install-peerdeps --dev eslint-config-airbnb-base
Or, if you are using pnpm
as you default package manager, you can try this:
pnpm dlx install-peerdeps -D eslint-config-airbnb-base
Now its time to configure the ESLint and Prettier plugins to work together poperly. Create a linting config file manually in the project root folder/directory named .eslintrc.json
Copy and paste the followings into the .eslintrc.json
file.
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": ["eslint:recommended", "prettier", "airbnb-base"],
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
"no-console": 0,
"indent": 0,
"linebreak-style": 0,
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 4,
"semi": true
}
]
},
"plugins": ["prettier"]
}
Amin Babu - [email protected]