This is the 30th day of my participation in the August Text Challenge.More challenges in August

Also used before, but did not understand, at this time to write this article I am also muddled, the article may have more loopholes, welcome to use the experience of the big men give directions

preface

Vue2.5.2 + WebPack3.6.0 (if you are a React project, you need to install other packages. I didn’t explore this.)

Using ESLint and Prettier in conjunction with formatting, they both require VSCode to install the extension and the corresponding package inside the project to take effect

Vscode installs the extension

These two are a must!

Install the corresponding within the projectprettierandeslintpackage

The installation package

{
    "devDependencies": {
        "prettier": "^" 2.3.2."eslint": "^ 7.32.0"."eslint-config-prettier": "^ 8.3.0"."eslint-loader": 2.1.1 ""."eslint-plugin-prettier": "^ 3.4.1 track"."eslint-plugin-vue": "^ 7.17.0"}}Copy the code
 npm install --save-dev prettier eslint eslint-loader eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier 
Copy the code

Generate the ESLint configuration file

.\node_modules.bin\eslint --init
Copy the code

Eslintrc. Json will initialize the configuration according to the option you selected.

This is the generated initial configuration file

/.eslintrc.json
{
    "env": {
        "browser": true."es2021": true
    },
    "extends": [
        "eslint:recommended"."plugin:vue/essential"]."parserOptions": {
        "ecmaVersion": 12
    },
    "plugins": [
        "vue"]."rules": {}}Copy the code

configuration.eslintrc.jsonRules file

Because I’m formatting with Prettier, I need to make some adjustments to the ESLint configuration file

/.eslintrc.json
{
    "env": {
        "browser": true."es2021": true
    },
    "extends": [
        "plugin:vue/essential"./ / the meaning of "plugin: prettier/it" : enable eslint - plugin - prettier and eslint - config - prettier, the editor shows error, make sure that this is to expand the final configuration of the array
        // eslint-plugin-prettier Uses prettier as the esLint detection rule
        // eslint-config-prettier Closes all rules that aren't necessary or might conflict with Prettier
        "plugin:prettier/recommended"]."parserOptions": {
        "sourceType": "module".// Allow import using import
        "ecmaVersion": 12
    },
    "plugins": ["vue"]."rules": {
        Prettier doesn't have some rules that prettier doesn't have
        "prettier/prettier": "error"."no-ternary": "off"."no-unused-vars": "error"   // Do not declare unused variables. Prettier doesn't have this, so prettier needs to write it here}}Copy the code

Eslint lint lint lint lint lint lint lint lint lint lint lint lint lint

configuration.eslintignoreIgnore list file

There are many folders that don’t actually need esLint detection, such as node_modules, dist files, etc. The.eslintignore syntax is the same as.gitignore. See this article: Portals

/.eslintignore
​
/node_modules/
/.vscode/
/static_dist/
/static_init/
​
/static_dev/ *! /static_dev/noh_app/script/plugin2x/saxmodule/intelligentCockpit/Copy the code

configuration.prettierrc.jsonFormat style file

Main Configuration Common configurations are as follows:

/.prettierrc.json
{
    "tabWidth": 4."printWidth": 160."useTabs": false."endOfLine": "auto"."singleQuote": false."semi": true."trailingComma": "none"."bracketSpacing": true
}
Copy the code

Configure the VScode Settings file

{
    // eslint configuration items that are automatically fixed when saved
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // By default, prettier is used to format supported files
    "editor.defaultFormatter": "esbenp.prettier-vscode".// Automatically set the ESLint workspace
    "eslint.workingDirectories": [{"mode": "auto"}].// Save formatting
    "editor.formatOnSave": true
}
Copy the code

The effect

After configuring the above, remember to restart vscode, it should not be too much of a problem, I have just walked through the test project.

Here is an example of how I can fix ESLint errors by using CTRL + S to save.

Waka, comfortable yuppie, no longer have to worry about code style inconsistency

summary

The main idea behind esLint +prettier is to give prettier the job of testing and formatting, while prettier’s rule is the rule where prettier is used, so esLint uses “prettier/prettier”: “Error” would show Prettier’s error, but prettier doesn’t have rules, such as not declaring unused variables, so I use esLint’s rule, just add it later. While this isn’t enough, esLint also needs to fix automatically, save formatting, and default formatting to prettier. Maybe I understand the wrong, welcome correction.