As front-end development becomes more standardized, code specification has become an essential skill for standard front-end development, and many large manufacturers have strict requirements for code specification.

Eslint +prettier+vscode for a long time we didn’t pay much attention to the code specification, at least I didn’t. Don’t say more words, on dry goods!!

Introduction to the

Eslint: a Node-based code style and syntax error detection kit

Prettier: a tool kit for automatically fixing code style and syntax errors

Generally, esLint is used in conjunction with Prettier suffice

Installing a plug-in

First, we need to install the eslint and prettier plugins in vscode

Install dependencies and configurations

Here I was wondering, why do you need to install eslint in your project when vscode already has the eslint plugin installed? Can’t vscode eslint directly check code specifications? I’ve since realized that vscode’s eslint plugin is just a tool that can help vscode automatically detect code specifications, and project (or global) downloads of eslint are entities that detect code specifications. In other words, we don’t need to install eslint plugins in vscode. Manual eslint **.js is fine, but if we want to use eslint code detection in our project, we must install dependencies. Vscode’s eslint plugin simply helps us to automatically check code specifications without having to manually check them on the command line

All right, let’s just install the dependency

$ yarn add eslint -D
Copy the code

Then we add the esLint configuration file.eslintrc (.js/.json/.yaml)

$ npx eslint --init
Copy the code

In general, we choose the standard mode in the middle

Then select CommonJS, React/Vue/ None (depending on the project type), support for TypeScript, runtime environment, etc. The resulting configuration file is as follows

Prettier: When vscode is used for development, a project does not need prettier dependency, the plug-in for Prettier already uses Prettier, just tell the plug-in in the configuration file how to fix the code

Json: Code > Preferences > Settings prettier rule

"Prettier. SingleQuote ": true," semicolon ": false "is not needed after "prettierCopy the code

Of course, if we wanted to customize prettier to override vscode’s IDE rule, we could also create a.prettierrc.json file in the project root

Since then, we have normalized the project code and shift+ Option + F can fix the code automatically

If we had to fix the code manually every time, it would be annoying. Hey, can’t we fix it automatically when we save it? The answer is yes, we just need to set up vscode.

Json file and add the following configuration:

"[javascript]": {// Close the editor for formatting js files and leave it to ESLint to do the formatting, otherwise "editor.formatOnSave" will be formatted twice: "Eslint. validate": [{"language":" HTML ", "autoFix": true}, {"language": "Javascript ", "autoFix": true}, {"language": "vue", "autoFix": true}], // Automatic repair code "editor.codeActionsOnSave": { "source.fixAll": true, "source.fixAll.eslint": true }Copy the code

Restart vscode and you will see that the code is automatically formatted when saved

Well, it’s nice to have ESLint code checks to standardize our development, but sometimes it can feel like a drag, especially when working with multiple people. If everyone is using different ESLint rules, merging code can create enough conflicts to make you doubt your life. Finally, we’ll look at how to turn off esLint code detection.

In vscode, we can turn it off like this. Code > Preferences > Settings Open setting.json and set

"eslint.enable": false
Copy the code

If you want to turn off ESLint in a project, take the React project as an example

The first step is to pop up the CRA built-in project configuration

yarn eject
Copy the code

Second, modify the eslintConfig of package.json

"eslintConfig": {
    "extends": "react-app",
    "rules": {
      "no-undef": "off",
      "no-restricted-globals": "off",
      "no-unused-vars": "off"
    }
}
Copy the code

Close all rules and restart the project. There will be no more ESLint checks