eslint-airbnb-vscode

Installing a nice light and useful Ecma Script Linting by combining eslint, airbnb, and react rules in vscode ide

Getting Started

This tutorial will help you to install ESLint linter with airbnb and react recommendations for EcmaScript good coding.

FIRST

You'll need to install some modules every time in every project you wanna use linting:

npm

npm install eslint eslint-config-eslint babel-eslint eslint-plugin-node eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-config-airbnb --dev

yarn

yarn add eslint eslint-config-eslint babel-eslint eslint-plugin-node eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-config-airbnb --dev

NOTICE
If you are using create-react-app, you won't need to install eslint and babel-eslint!

SECOND

Install ESLint extension in VsCode

THIRD

Add this file to the root directory of your project: .eslintrc

FOURTH

Set up a key shortcut for eslint auto fix

Select File > Preferences > Keyboard Shorcuts on the top bar.

A new tab will be opened.

Find and select keybindings.json in the top of current tab.

Another tab will be opened.

Add this code between the brackets:

{
    "key": "ctrl+shift+f",
    "command": "eslint.executeAutofix"
}

This will add ctrl+shift+f shortcut for eslint auto fixing.

You can customize it by changing the value of "key": "ctrl+shift+f".

Now, all is well for using recommendations. if there is a problem, tooltips will be shown to you what are the errors and warnings

Then, you can auto fix the problems by using the shortcut hot key you've already set

Note that: the import/export syntax not found won't be appeared with the configuration

FIFTH

You can add an ignore file for ignoring a specific single/nultiple path, directory or file.

Add this file to the root directory of your project: .eslintignore

And add the path you don't want to be linted like below:

/*.js
/node_modules

---

If you want to diable a rule just for one case, you can use this comment on top of the code line:

/* eslint-disable-next-line [rule-name] */

For example:

/* eslint-disable-next-line no-console */
console.log("testing");

---

Authors

• ALireza Kavian

License

This project is licensed under the MIT License - see the LICENSE file for details