on
Amazon
- Get link
- Other Apps
Lint
Definition taken from Wikipedia:A lint refers to tools that analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.
In other word, it is a tool that scans your project files and point out potential issues such as formatting issue, reference to a non-existent function, unused variables etc.
JavaScript Linting - ESLint
ESLint is a lint tool for JavaScript. Alternatives are JSLint and JSHint. |
| ESLint |
 |
| ESLint demo |
JavaScript style guides
You can check out the following JavaScript style guides. There are other style guides besides these 3.1) Airbnb JavaScript style eslint: https://github.com/airbnb/javascript
2) Google JavaScript style eslint: https://github.com/google/eslint-config-google
3) StandardJS eslint: https://github.com/standard/eslint-config-standard
Steps to install ESLint
1)
npm install —save-dev eslint
yarn add -D eslint
2) Install airbnb eslint plugin
If you use React
npm install —save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
yarn add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
If it is not a React project, you can exclude these 2 packages: eslint-plugin-react eslint-plugin-jsx-a11y and you install eslint-config-airbnb-base instead
npm install —save-dev eslint-config-airbnb-base eslint-plugin-import
yarn add -D eslint-config-airbnb-base eslint-plugin-import
3) Then, create an .eslintrc file for ESLint configuration and add the following:
airbnb-base is the set of rule excluding rules for react.
{
"extends": "airbnb-base", // airbnb if you use react
"parserOptions": {
"ecmaVersion": 6
},
"env": {
"node": true,
"browser": true,
"es6": true,
}
}
Alternatively, you can go to ESLint demo page and opens up Rules Configuration at the bottom to configure ESLint. When you are ready, you can download the configuration file at the bottom
 |
| ESLint rules configuration |
 |
| Download ESLint rules configuration |
4)
You can refer to Configure ESLint document to further customize your ESLint rules and configuration.
For example, to use Babel with ESLint, you can add "parser": "babel-eslint" .
{
"extends": "airbnb-base",
"parserOptions": {
"ecmaVersion": 6
},
"env": {
"node": true,
"browser": true,
"es6": true
},
"parser": "babel-eslint",
"rules": {
"no-unused-vars": [
"error",
{
"vars": "local",
"args": "none"
}
]
}
}
5)
You can find out more about the rules on ESLint rules document.
For example: no-unused-vars rule gives warning or error if a variable is not used.
"rules": {
"no-unused-vars": [
"error",
{
"vars": "local",
"args": "none"
}
]
}
Rules for React file extensions.
"rules": {
"react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"] }]
}
Thanks for reading!
Jun
Comments
Post a Comment