eslint-config-devansvd

EsLint rules for all my projects. Feel free to use these conventions :-)

---

Table of Contents

• What it does
• Installation
• Usage
• Setting up Editor
  • VSCode Setup
• Issue
• License

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 + , or CMD + ,(mac) Open settings.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.

License

MIT