3 minutes
Eslint devansvd config - using Airbnb
EsLint rules using Airbnb
for all my projects. Feel free to use these conventions :-)
Package URL : https://www.npmjs.com/package/eslint-config-devansvd
npm install --save-dev eslint-config-devansvd
Table of Contents
What it does
This modules provides a flexible way to integrate Eslint
+ Airbnb
style guide conventions + Prettier
. It eliminates installing bunch of devDependencies everytime setting up a new project - Makes setup easier. To summarize what it does it takes care of everything.
- Lints JavaScript based on the latest Popular style guide standards
- Fixes prettier issues and formatting errors
- Some of the rules are tweaked to my personal preference
- Override rules as you’d like
PS: I may replace all style guide rules with my own preference soon.
Installation
Package is intended to be installed as a devDependencies in all my projects - Should not be pushed to Production, Can be installed via npm bundled with node.
If you don’t already have a package.json file, create one with npm init -y
.
npm install --save-dev eslint-config-devansvd
Note: It will install bunch of dependencies which are need for the Linter and formatter to work. Since this package is intended to be installed as a devDependency I won’t worry about anything.
These are all the dependecies packages eslint-config-airbnb, eslint-config-airbnb-base, eslint-config-prettier, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-prettier, eslint-plugin-react, eslint-plugin-react-hooks, eslint, prettier
Can be also installed using npx install-peerdeps --dev eslint-config-devansvd
Usage
Create .eslintrc.js file in project. Just add this to extends
// For all: javascript, Nodejs, React.
module.exports = {
extends: ['devansvd'],
rules: {
// your overrides
},
};
The above config will lint react files too. If don’t want to use react, there is also a base config exposed with the package which lints only javascript and nodejs files.
// Only for javascript and Nodejs
module.exports = {
extends: ['devansvd/base'],
rules: {
// your overrides
},
};
Optional: Under package.json
you can add two scripts to lint and fix
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
Now manually lint your code by running npm run lint
and fix all fixable issues with npm run lint:fix
Setting up Editor
Once usage instructions setup done, need to configure your editors for seamless experiences.
VSCode Setup
- Install Eslint extenstion
- Press
Ctrl + ,
orCMD + ,
(mac) Opensettings.json
from{}
Icon in the right top corner. - Add the settings Below
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"editor.codeActionsOnSave": {
"source.fixAll": true
},
//Optional if prettier installed
"prettier.disableLanguages": [
"javascript",
"javascriptreact"
]
Note: Prettier extenstion for VScode is not mandatory which is not need to be installed, If you’d like other file extenstions like .html, .css, etc
You can install prettier extension in that case.
Summary: Enabling formatOnSave for all files, Turning off formatOnSave for javascript and javascriptreact formats because EsLint take care that for you source.fixAll
also avoids multiple times formatting if prettier already installed.
Issue
Facing issues ? Remove node_modules
and begin the setup from the beginning.