eslint-config-devansvd
EsLint rules for all my projects. Feel free to use these conventions :-)
!versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense
Table of Contents
- What it does - Installation - Usage - Setting up Editor
- [VSCode Setup](#vscode-setup)
- Issue
- LicenseWhat it does
This modules provides a flexible way to integrateEslint
eslint + Airbnb
airbnb style guide conventions + Prettier
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 npmnpm bundled with nodenode.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 ? Removenode_modules
and begin the setup from the beginning.License
MIT
license