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