Front-end code specification -Eslint solves common confusions like Prettier

The importance of code specifications, which we won’t go into here, is essential in actual project development, both for long-term maintainability and for teamwork.

But when introducing code specifications, especially for beginners, eslint,prettier, vscode formatting plug-in, airbnb, standard, etc., it’s easy to get confused about what to configure when introducing code specifications into projects. Or don’t know why formatting is invalid after introduction.

Next, let’s summarize these common and confusing questions:

  1. What’s the difference between esLint and prettier
  2. What is the difference between ESLint and Airbnb, Standard code specifications
  3. How is eslint different from vscode eslint plugins

The difference between Eslint and Prettier

ESLint is a javascript code detection tool that checks for the following problems:

  • For example, unused variables
  • Undefined reference
  • Use third grade for comparison
  • Disallow unnecessary parentheses
  • . , etc.

These are all things we need to agree on, and that’s what Eslint does.

Where does Prettier, we know Prettier is a code formatting tool, usually for formatting, not syntax, etc. For example, common formatting problems:

  • Code to tighten
  • Single and double quotation marks
  • . Such as Eng

Eslint and Prettier therefore, it is understandable that Eslint and Prettier both work to unify code specifications in our projects, although they specialize in different directions, and in real projects it is best practice to incorporate both Eslint and Prettier into a project. Eslint and Prettier do not specialize in the same direction as Prettier, but there are still some rules that overlap, and if they are included in a project, you need to deal with those conflicting rules (more on that later).

Eslint differs from Airbnb, Standard code specifications

We can think of Eslint as a simple code detection tool, but what are the specific testing criteria? That would require defining a set of rules, for example: single quotes double quotes, we can define a rule, so Eslint integrates its own list of rules by default.

What is the Airbnb standard code specification? The idea is that companies have open-source lists of rules that they often use, so that we can incorporate them into our own projects without having to define the rules ourselves.

Common open source rules and standards are:

  • eslint-config-airbnb
  • eslint-config-standard
  • eslint-config-google

Of course, some big companies in China also open source their own code specifications, such as Eslint-config-Tencent.

How is eslint different from vscode eslint plugins

Eslint is an NPM package that you can install in your project just like any other dependency package. You can also use its built-in commands and modify its configuration files.

NPM init NPM I eslint --save-dev NPX eslint --init // initialize the ESLint configuration file NPX eslint lint --fix // Detect and fix the configuration fileCopy the code

NPX eslint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint

But imagine how much trouble we would have to manually execute this command every few lines of code we wrote during actual code development, which is obviously not our best practice. So how do you do that? The answer is to introduce the ESLint plug-in into the editor.

Using VScode as an example, install the ESLint plugin as shown below:

After the installation is complete, open our own project and we can right click to use vscode’s formatting function to directly format the code in our project. One thing to note: when vscode installs the eslint plugin, it will automatically format with the eslint rules introduced in our project first. This ensures that if we switch to another project and use different rules, vscode will still format with the rules of the current project. If, of course, our project needs to introduce ESLint.

In addition to this, we can further optimize it by having to right click every time to format. Yes, we can also modify the configuration of the vscode eslint plug-in so that it automatically formats every time we save code.

The configuration is as follows:

Therefore, in real project development, if we want to use eslint formatting in an editor such as vscode, we need to make sure the 2,3 option in the figure above is true.

Practice: Introducing Eslint and Prettier in react project

Eslint and Prettier in react Project EsLint and Prettier in React project esLint and Prettier in React project

1. Initialize the React project

npx create-react-app react-demo
cd react-demo
npm start
Copy the code

The resulting initial directory structure looks like the following:

Eslint and Prettier are not installed in the project, and there are no configuration files for them, so there is no warning for tightening, such as the second line

Obviously, it’s not possible to continue development like this, especially when people are working together, so we have to include validation tools in the project, as well as formatting tools, Eslint and Prettier.

2. Configuration Eslint

First, you install the ESLint command and generate the ESLint configuration file.

NPM I eslint --save-dev // Installs esLint NPX eslint --init // initializes the ESLint configuration fileCopy the code

NPX eslint –init will give you command line interaction options that you can manually select:

Here is not specific to say each should choose what, we can be combined with the actual situation and their own habits. As shown above, we have our choice. Once selected, the last line will prompt us to install the dependencies immediately, so we select Yes.

After the installation is complete, we’ll notice that app.js is automatically prompted because our ESLint is already in effect.

When we manually save app.js, we find that some of the warnings disappear and the pinching works fine (this is because we’ve already introduced the eslint plugin in vscode and configured automatic formatting when saving), which is exactly what we want.

‘React’ must be in scope when using JSXeslint[React /react-in-jsx-scope]

Another point to note: automatic formatting after saving requires VSCode to install the ESLint plugin and configure automatic formatting when saving. Of course, we can also configure script commands to manually verify that the code conforms to the specification and to manually fix some problems.

// package.json
{
  ...
  scripts: {
    "lint": "eslint lint",
    "lint:fix": "eslint lint --fix"
  }
}
Copy the code

So we can use NPM run Lint and nom run Lint :fix to verify code manually. Note: In real development, scripts are configured, but more often rely on the VScode eslint plugin to format code, otherwise it would be too cumbersome to run scripts manually every time

At this point, the Eslint configuration is almost complete. Eslint would solve most of the specification problems at this point, but not enough: for example, when we modify JSX in app.js and then save it, Eslint doesn’t format JSX because we still need to install prettier. It is a best practice for formatting code for various files.

3. The configuration prettier

Because esLint and Prettier have conflicting rules, but in real projects both need them, how do you solve this part of the conflict? Eslint therefore introduced esLint-plugin-prettier, where prettier is a plug-in for ESLint, where the part where ESLint conflicts is covered by prettier. But we use ESLint for our overall code formatting.

  1. Install dependencies
npm i  prettier eslint-config-prettier eslint-plugin-prettier --save-dev 
Copy the code
  • prettier
  • eslint-config-prettier
  • eslint-plugin-prettier
  1. Create the.prettierrc.js configuration file
echo > .prettierrc.js  
Copy the code
// .prettierrc.js module.exports = { ... } / / rules;Copy the code
  1. Modify the ESLint configuration
module.exports = { env: { browser: true, es2021: true, }, extends: [" plugin: react/it ", "standard", "plugin: prettier/it", / / the key], parserOptions: {ecmaFeatures: {JSX: true, }, ecmaVersion: 13, sourceType: "module", }, plugins: ["react"], rules: {}, };Copy the code

At this point, when we open app.js and save the code, we see that JSX can also be formatted, so we add esLint and Prettier all into the project.

conclusion

In the actual project development, it is likely to appear some invalid formatting and other problems, encountered these problems, we can think from the following aspects:

  1. Make sure that esLint and prettier are included in our project, and that there are ESLint configuration files. After confirming, we can check whether eslint lint and eslint lint –fix are working, and tell us which file, If a line of code has a formatting problem, the configuration in our project is basically no problem.
  2. The next step is to ensure that the VScode ESLint plugin is installed, and check whether its settings.json has ESLint validation enabled, as well as automatic formatting when saved, etc.

Of course, in the actual project, it is very likely to introduce different rules and other problems, bring different effects, if you encounter problems, feel free to leave a message, we discuss together.