vue-cli4中使用eslint，保存时自动格式

一时失言乱红尘 2022-12-31 07:30 157阅读 0赞

#### 在代码规范的道路上，我们终极目标是： ####

> 团队中的所有开发人员用一套代码规范规则，并且无需我们花太大的精力去为了格式而格式。希望有一套自动化工具，帮我们检测代码是否规范，如果不规范，则自动能够帮我们按照既定规范格式化。

**背景：**

新建一个vue-cli4的项目，初始化的时候没开启eslint，后面想开启的时候不好配置，这里就做个开启eslint和保存时自动修复格式的总结

> vscode首先安装eslint插件  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]

> 配置vscode的自动保存eslint格式

按下：`Ctrl+shift+p`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 1]  
把下面代码复制到里面

"editor.tabSize": 2,
      "eslint.alwaysShowStatus": true,
      "eslint.autoFixOnSave": true,
      "eslint.packageManager": "yarn",
      "eslint.validate": [
        "javascript", // 用eslint的规则检测js文件
        { 
          "language": "js",
          "autoFix": true
        },
        { 
          "language": "vue",
          "autoFix": true
        },
      ],
      "eslint.options": { 
        "extensions": [
            ".js",
            ".vue"
        ]
    },
      "editor.codeActionsOnSave": { 
        "source.fixAll.eslint": true
      },
      "eslint.run": "onSave",
      "files.autoSaveDelay": 3000,
      "eslint.codeAction.disableRuleComment": { 
      
      },
      "files.autoSave": "off",

> 项目中安装eslint

在package.json文件中的devDependencies里面添加:

"@vue/cli-plugin-eslint": "~4.4.0",
    	"babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",

然后执行：`cnpm install`

`vue.config.js`文件里面`lintOnSave`改成`"warning"`

根目录添加`eslint`配置文件`.eslintrc.js`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 2]

内容根据需要修改

module.exports = { 
      "root": true,
      "env": { 
          "node": true
      },
      "extends": [
          "plugin:vue/recommended",
          "eslint:recommended"
      ],
      "rules": { 
      	  "indent": ["error", 2],
          "dot-location": [
              2,
              "property"
          ],
          "comma-spacing": [1],
          "space-before-blocks": [
              2,
              "always"
          ], // 强制在块之前使用一致的空格
          "space-unary-ops": [
              2,
              { 
                  "words": true,
                  "nonwords": false
              }
          ], // 强制在一元操作符前后使用一致的空格
          "array-bracket-spacing": [
              2,
              "never"
          ], // 强制数组方括号中使用一致的空格
          "quotes": [
              0,
              "double"
          ], // 强制使用一致的反勾号、双引号或单引号
          "arrow-spacing": [
              2,
              { 
                  "before": true,
                  "after": true
              }
          ],
          "vue/max-attributes-per-line":0,
          "no-var": 2, //禁用var，用let和const代替
          "no-mixed-spaces-and-tabs": 2, // 禁止空格和 tab 的混合缩进
          "no-trailing-spaces": 1, // 禁用行尾空格
          "no-unexpected-multiline": 2, // 禁止出现令人困惑的多行表达式
          "no-unused-vars": [
              2,
              { 
                  "vars": "all",
                  "args": "none"
              }
          ], // 禁止出现未使用过的变量
          "vue/html-indent": [
              0,
              "tab"
          ],
          "vue/html-self-closing": [0],
          "vue/multiline-html-element-content-newline": [0],
          "vue/singleline-html-element-content-newline":[0],
          "vue/html-closing-bracket-newline":[0],
          "vue/no-v-html": [0]
      },
      "parserOptions": { 
          "parser": "babel-eslint"
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]: /images/20221120/a010c76c29da4a848f2963b2fd9222b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 1]: /images/20221120/0a60a323fbf24cba878ee010249ee5c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201229104732236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA==,size_16,color_FFFFFF,t_70