This is the 8th day of my participation in the August More Text Challenge
ESLint is an open source JavaScript linting utility that helps us standardize code and overcome unexpected errors by developers because JavaScript is a weakly typed language.
There are many normalization options available in the Javascript community, such as JSHint and JSCS, for code linting, including ESLint, which we’ll cover today.
ESLint aims to make all rules fully pluggable. This is one of the main causes of it. It allows developers to create their own linting rules. Each rule provided in the official ESLint guide is a separate rule, and developers can decide at any time whether to use a particular rule or not.
The installation
For local installation of the project directory:
$ npm i eslint -D
Copy the code
For global installation on a working system:
$ npm i eslint -g
Copy the code
Once installed, we can use esLint via the eslint command in the terminal.
configuration
The simplest way to configure this is to set up an.eslintrc JSON file that describes all the Linting rules.
An example of.eslintrc:
{
"env": {
"node": true."browser": true
},
"globals": {
"exampleGlobalVariable": true
},
"rules": {
"no-console": 0."space-infix-ops": "error"."quotes": ["error"."single", {
"avoidEscape": true."allowTemplateLiterals": true}]."space-before-blocks": ["error"."always"]."semi": ["error"."never"]},"plugins": []}Copy the code
Main fields:
parse
– Specify the parserparserOptions
– Specify parser optionsenv
– Specify the runtime environment for the scriptroot
– fortrue
Stop looking up the configuration file in the parent directoryglobals
– Additional global variables accessed by the script during executionrules
– Add your custom rules here
If ESLint is installed globally, we can also generate configuration files using the following command:
$ eslint --init
Copy the code
In other cases, if you have installed it locally into your project, you need to type in the terminal:
$ ./node_modules/.bin/eslint --init
Copy the code
In both cases, you are prompted for a set of basic rules for generating.eslintrc files.
Examples of files generated after the above prompts:
{
"env": {
"browser": true."commonjs": true."es2021": true
},
"extends": "eslint:recommended"."parserOptions": {
"ecmaVersion": 12
},
"rules": {
"indent": [
"error"."tab"]."linebreak-style": [
"error"."windows"]."quotes": [
"error"."single"]."semi": [
"error"."never"]}}Copy the code
For more information on configuration, read here.
To make it easier to run, we can add the following script to the package.json field of the project:
{
"scripts" : {
"lint": "eslint **/*.js"."lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html"."lint-fix": "eslint --fix **/*.js"}}Copy the code
We apply this rule to the following files:
var a = 1;
console.log(1);
Copy the code
NPM run Lint will display the following information:
The ESLint prompt is already obvious: three errors. The first and second lines end with an extra semicolon error, where a is assigned but never used.
It also prompts you to use the –fix option to fix errors and warnings, two of which can be fixed. Now use NPM run lint-fix to fix it and leave it up to you to manually change a.
You can also run the NPM run lint-html command to write the check results to a web file.
Set the file priority
If you followed the steps above, you probably already know that ESLint supports configuration files in several formats.
Now there is a question, if there are multiple ESLint files in the same directory, how will they be executed and what is their priority?
The ESLint source code gives us the answer, with the following priority configuration:
const configFilenames = [
".eslintrc.js".".eslintrc.yaml".".eslintrc.yml".".eslintrc.json".".eslintrc"."package.json"
]
Copy the code
.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json
The rules
Rules in ESLint are added separately. No rules are enforced by default. You must specify the rule explicitly before you enable it for the Linting process.
Click here for the full list of rules in the official documentation.
After deciding which rules to include, you must set these error levels. Each error level can be defined as follows:
0
– Disable the ruleoff
1
– Enable the rule as a warningwarn
2
– Open the rule as an errorerror
The difference between errors and warnings is the exit code that ESLint will have when finished. Eslint will exit with a 1 exit code if any errors are found, otherwise it will exit with a 0.
If you do Lint in the build step, this allows you to control which rules should break your build and which should be treated as warnings.
The environment
The code you’re writing might be suitable for a particular environment; for example, you might be writing REST apis in a Node.js application using the Express framework, and the front end of that application will be built in Vue/React.
Two different projects, two different environments, can both have separate ESLint configurations in one file, even if the client and server are in the same project directory that is considered the root of the project.
How is it done?
Set the environment ID to true in the “env” section of.eslintrc.
ESLint CLI
ESLint comes with a command line interface (CLI) for lint files or directories.
$ eslint index.js
Copy the code
As we saw in the previous example, the output generated after running the command is grouped by file and specifies the line:column warning/error, the reason for the error, and the rule name for each failure.
Use ESLint in conjunction with your preferred coding style
ESLint does not personally advocate any coding style. You can set up.eslintrc files to enforce encoding styles using your preferred style rules.
You can also use ESLint with style guides such as Airbnb, JavaScript standard style.
You must also use additional plug-ins, such as:
- The Airbnb plugin eslint-config-Airbnb-base.
- JavaScript standard style eslint-config-standard
- Some popular library plug-in: Vue | React
Team norms
AlloyTeam presents the React/Vue/TypeScript project’s progressive ESLint configuration (ESlint-config-alloy). Here is a small section of the React/Vue/TypeScript configuration:
module.exports = {
parserOptions: {
babelOptions: {
presets: ['@babel/preset-react'],}},plugins: ['react'].rules: {
/** * The name of a Boolean propTypes must start with is or has *@reason Type-specific constraints are handed to TypeScript */
'react/boolean-prop-naming': 'off'./** *
'react/button-has-type': 'off'./** * A defaultProps must have corresponding propTypes *@reason Type-specific constraints are handed to TypeScript */
'react/default-props-match-prop-types': 'off'./** * props, state, context */
'react/destructuring-assignment': 'off'./** * The component must have the displayName property *@reason It is not mandatory to write displayName */
'react/display-name': 'off'.// ...}}Copy the code
You can look at some of the team’s configurations and apply them to your own projects.