Why do you need engineering practice 】【 ESLint, Prettier&EditorConfig | August more article challenges

preface

Are you curious about the following questions?

Why do we need EditorConfig, ESLint, and Prettier?
What’s the difference between EditorConfig, ESLint, and Prettier? And why do we need to use ESLint, Prettier, and EditorConfig?
When using ESLint, Prettier, or Prettier at the same time, conflicts occur
How do you avoid collisions when both ESLint and Prettier are used?

This article will tell you the answer

Why do we need ESLint, Prettier, and EditorConfig?

Why do we need EditorConfig

The role of EditorConfig

On a collaborative project, different developers use different editors and ides and have different coding styles. For example, some people like to indent with 2, others like to indent with 4. Some people use DOS newlines, others use Unix newlines. So, in order to unify everyone’s coding style and facilitate collaboration, EditorConfig is here.

The use of EditorConfig

First: we need to unify the configuration in the project.editorconfigThe file
Second: Although EditorConfig works across editors and ides, support for EditorConfig varies from editor to editor. Some require plug-in installation for EditorConfig to work properly. Others support EditorConfig directly, leaving the developer to do nothing else. So for EditorConfig to work in different developers’ editors or ides, we need to know what kind of editor or IDE the developers in the project are using.

Without the pluginEditor and IDEPlug-ins need to be configuredEditor and IDE

Use EditorConfig in VSCode

First, we create an EditorConfig file in our project with the following configuration:

// .editorconfig
root = true

[*]
end_of_line = lf
insert_final_new_line  = true
 charset = utf-8
 // To control the indentation of code
 indent_style = space
 indent_size = 2
Copy the code

Then, if your vscode does not have the EditorConfig plugin installed, we need to install it, as shown belowNow, open the editor and start writing code, as shown in the GIF:

As you can see, while writing the code, the editor automatically indented 2 Spaces during line feeds. Now we will change the configuration of EditorConfig

indent_size = 10
Copy the code

I have now set the indent to 10 Spaces, now we open vscode and write the code again, as follows:Similarly, you can see that the editor automatically indents 10 Spaces during line feeds. So, we can know that EditorConfig is in ourAs you write your codeTo format the code.

Why do we need ESLint

The role of ESLint

Like EditorConfig, you can use ESLint to unify people’s coding styles. However, another important feature of ESLint is its ability to automatically detect low-level errors in our code. For example, an error like the following occurs when the code is already running. But if we use ESLint, we can find out before our code runs to improve our coding efficiency

These errors can be roughly divided into six categories

SyntaxError
Reference Error
Range Error
TypeError
EvalError
URIError

Next, let’s use ESLint to get a real feel for how it works.

The use of ESLint

Eslint is similar to EditorConfig: first, we create an.eslintConfig configuration file in our project

// .eslintrc
{
  "extends": ["eslint:recommended"]."env": {
    "es6": true."node": true
  },
  "rules": {
    "max-len": ["error", { "code": 80}]."indent": ["error".2]}}Copy the code

Use ESLint in VSCode

Similarly, ESLint works in most editors as well as EditorConfig. As with EditorConfig, using ESLint in VSCode requires the ESLint plugin to be installed, as shown in the figure below:We now have the eslintrc file configured in our project and the eslint plugin installed in vscode. Next, in the editor, write the following code, as shown in the figureThe problem with the code shown above is that the code in one line is too long for what we configured "max-len": ["error", { "code": 80 }], so an error is reported. This type of problem is a matter of code style. Next, let’s look at how ESLint can detect low-level errors in code.

The code shown in the figure actually has two syntax errors: the repeated declaration of the a constant and the absence of a comma after the value of the name attribute. In vscode, we can see that only one of the errors is reported and not the other as we write and save the code, but this is not because eslint didn’t detect the subsequent error. Now that we have fixed the first error, we can see the next error.

So, in general, ESLint is primarily used to detect two types of errors

The first is style, which can be configured through Formatting rules
The other is Code quality issues that can be configured using code-quality rules

The common rules are as follows:

// formatting rules
max-len
no-mixed-spaces-and-tabs
keyword-spacing
comma-style
indent

...

// code-quality rules
no-unused-vars
no-extra-bind
no-implicit-globals
prefer-promise-reject-errors
....
Copy the code

Use ESLint from the command line

Of course, in addition to using vsCode’s ESLint plugin to detect potential problems in our code as we code, we can also use the command line to detect the code as we write it

Install eslint

npm install eslint
Copy the code

Configure ESLint in a package.json file

Check for code errors

npm run lint
Copy the code

Fixed code issues

npm run lint --fix
Copy the code

Why do we need Prettier

The role of the Prettier

First of all, prettier only pays attention to the code style, it can automatically and quickly fix the style in the code, let developers pay attention to the really important issues. But ESLint can also be used to fix some style problems with code. So why do we still need prettier? The answers are as follows:“Prettier” — “eslint” — “prettier” — “eslint” — “prettier” — “eslint”

Prettier vs ESlint

Before we start using Prettier, let’s take a look at how ESLint works in automating format code

Use ESLint to automatically format code

In addition to automatically detecting code, ESLint can also be used to automatically fix code style problems. First, we open the vscode configuration file and do the following configuration, as shown in the figure.Then, we’ll keep the same configuration as the editorConfig above, again indent by 10 Spaces. Next, write the code shown in the figure. Again, the editor will automatically indent 10 Spaces on a newline. Now, let’s write the following code:

Note: At this point we keep the file in the edit state.

Now, after I save the file, I can see that the saved code automatically adjusts the space indent to 2, as shown in the figure

Next, let’s continue to write code in the editor as shown belowWe can see that the line length of this code exceeds our maximum line length requirement. So, we expect ESLint to automatically format this code to wrap it. But when we save the file, we see that the code hasn’t changed at all.

Uses Prettier to automatically format the code

Use Prettier in VScode

To use “Prettier” in VSCDOE, you also need to install the “Prettier” plug-in, as shown in the following figureNext, we open the vsCode settings.json configuration file and do the following configurationNow, this is the same code, and the document is being editedNext, we save the file with CTRL + S, as shown below

As for the automatic indentation to meet the requirements of the format, prettier is also the same support, you can experiment.

The Prettier command is used for Prettier

Of course, like ESLint, we can do this on the command line, except for vsCode’s prettier plugin for formatting code when we save it

Install the prettier

npm install prettier --save-dev
Copy the code

Run the prettier

npx prettier --write .
Copy the code

Why do we need to use ESLint, Prettier, and EditorConfig?

After a series of small experiments above, we can know

Prettier only does the job of formatting code, and its ability to format code is better and more comprehensive than ESLint’s
Eslint can be used to detect problems in code and to fix some code style problems, but the most important aspect of ESLint is detection
Editorconfig’s main function is to format code, but editorConfig works while writing code, while prettier and ESLint format code after saving it.

We know that using EditorConfig, Prettier, and ESLint together can improve code efficiency and quality. Finally, our policy is to use EditorConfig + Prettier to format the code and ESLint to detect problems in our code.

Where does ESLint, Prettier, and ESLint collide? And how to resolve these conflicts?

conflict

‘esLint’ and ‘prettier’ collide because of rule Formatter inconsistency. For example, when a project.prettierrcFiles and.eslintrcThe.eslintrc configuration does not allow semicolons to be added. The.eslintrc configuration does not allow semicolons to be added.prettierrcThe configuration in the file is to add semicolons. As shown below.

Now, write the following code in the editor while the file is in the edit state

Now, let’s save the code, with a semicolon automatically added at the end, as shown below

While saving the file, ESLint fixes the code before prettier formats it, so it doesn’t conform to ESLint’s rules.

The solution

The first is to let the pros do the professional work, which means esLint takes care of only code inspection, while prettier takes care of formatting the code. Eslint’s Formmater rule still conflicts with prettier’s rule. There are two ways to fix this

The first way to think about it is to make sure the formMatter rule for prettier formatting code is the same as the formMater rule for ESLint
The second idea is to turn off all style detection rules related to ESLint, which means that ESLint will only detect low-level errors in the code, not style problems.

Now, let’s do it

Step 1: turn off eslint formatting code in vscode

The second step:

Method 1: Synchronize the Formmater rule for prettier and ESLint

Modify the related Formmater rules for ESLint, as shown in the figure.That would solve the problem, but

First, we need to manually synchronize esLint’s Formmater rules with prettier rules
Second: There may be cases where esLint has style rules prettier doesn’t support. If such a rule exists in your ESLint configuration, the problem of conflicts will still exist.

Method 2: Turn off esLint’s FormMater Rule rule

This is how esLint is forced to turn offallThe related FormMater rule lets ESLint focus only on detecting problems related to Code Quantity. Like thisWe can do this by installing eslint-config-prettier

npm install eslint-config-prettier --save-dev
Copy the code

Now, let’s configure it as follows

In doing so, the configuration in eslint-config-prettier overtakes and turns off all related formmater rules in ESlint :recommended. We also need to turn off the formmater Rules configuration in our custom Rules field (the code commented out above). For this small example, just delete this code.

The last

If you use the command line to detect and fix problems in your code. According to the above policy, you need to run two commands, one lint and one format command at a time. To enable one-click detection and fixing of code problems, we can integrate prettier in ESLint. All you need to do is install the eslint-plugin-prettier plug-in.

Installing a plug-in

npm install eslint-plugin-prettier --save-dev
Copy the code

Configure the plug-in

{
  "extends": ["eslint:recommended"."prettier"]."env": {
    "es6": true."node": true
  },
  "rules": {
    "prettier/prettier": "error"
  },
  "plugins": [
    "prettier"]}Copy the code

A key operation

npx eslint main.js
Copy the code

Why do you need engineering practice 】 【 ESLint, Prettier&EditorConfig | August more article challenges