在vscode工具中，使用eslint，stylelint，htmlhint对vue项目代码格式的检查

1. 对js代码格式的检查：

首先全局安装以下插件：

• “eslint”
• “vue-eslint-parser”
• “babel-eslint”
• “eslint-plugin-vue”
• “eslint-plugin-html”
• “eslint-plugin-import”
• “eslint-plugin-node”
• “eslint-plugin-promise”

在项目根目录添加 .eslintrc.js 文件（也可以是.json格式文件,具体看自己情况就行），具体配置内容（例子）如下(里面只是本人自己添加的一些自定义规则，具体规则可以根据自身项目需求来定制)：

module.exports = {
    // 启用当前安装的 eslint-plugin-vue 插件中推荐的C方案里的规则作为基础规则
    extends: [
        'plugin:vue/recommended',
    ],
    globals: {
        // 这里填入你的项目需要的全局变量
        // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
        //
        // Vue: false
    },
    //此项是用来告诉eslint找当前配置文件不能往父级查找
    root: true,

    //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，
    //此处设置为module，指某块导入方式
    parserOptions: {
        //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装
        //使其与ESLint解析
        parser: 'babel-eslint',
        // 设置 script(默认) 或 module，如果代码是在ECMASCRIPT中的模块
        sourceType: 'module',
        "ecmaVersion": 2019,
        "ecmaFeatures": {
            "jsx": true
        }
    },

    // 此项指定环境的全局变量，使用 env 关键字指定你想启用的环境，并设置它们为 true
    env: {
        "browser": true,
        "node": true,
        "commonjs": true,
        "es6": true,
        "amd": true
    },

    // 此项是用来提供插件的，插件名称省略了eslint-plugin-*
    plugins: [
        'vue',
        'html',
        'import',
        'node',
        'promise'
   ],
    rules: {
        // 这里填入你的项目需要的个性化配置，比如：
        //
        // // @fixable 一个缩进必须用两个空格替代
        // 'indent': [
        //     'error',
        //     2,
        //     {
        //         SwitchCase: 1,
        //         flatTernaryExpressions: true
        //     }
        // ]
        'for-direction': 2, //强制 “for” 循环中更新子句的计数器朝着正确的方向移动
        'getter-return': 2, //强制 getter 函数中出现 return 语句
        'no-compare-neg-zero': 2, //禁止与 -0 进行比较
        'no-cond-assign': 2, //禁止条件表达式中出现赋值操作符
        'no-constant-condition': 2, //禁止在条件中使用常量表达式
        'no-dupe-args': 2, //禁止 function 定义中出现重名参数
        'no-dupe-keys': 2, //禁止对象字面量中出现重复的 key
        'no-duplicate-case': 2, //禁止出现重复的 case 标签
        'no-empty': 2, //禁止出现空语句块
        'no-empty-character-class': 2, //禁止在正则表达式中使用空字符集
        'no-ex-assign': 2, //禁止对 catch 子句的参数重新赋值
        'no-extra-boolean-cast': 1, //禁止不必要的布尔转换
        'no-extra-semi': 1, //禁止不必要的分号
        'no-func-assign': 2, //禁止对 function 声明重新赋值
        'no-inner-declarations': 1, //禁止在嵌套的块中出现变量声明或 function 声明
        'no-invalid-regexp': 2, //禁止 RegExp 构造函数中存在无效的正则表达式字符串
        'no-irregular-whitespace': 1, //禁止在字符串和注释之外不规则的空白
        'no-obj-calls': 2, //禁止把全局对象作为函数调用
        'no-regex-spaces': 1, //禁止正则表达式字面量中出现多个空格
        'no-sparse-arrays': 1, //禁用稀疏数组
        'no-unexpected-multiline': 1, //禁止出现令人困惑的多行表达式
        'no-unreachable': 1, //禁止在return、throw、continue 和 break 语句之后出现不可达代码
        'no-unsafe-finally': 1, //禁止在 finally 语句块中出现控制流语句
        'no-unsafe-negation': 1, //禁止对关系运算符的左操作数使用否定操作符
        'use-isnan': 1, //要求使用 isNaN() 检查 NaN
        'valid-typeof': 2, //强制 typeof 表达式与有效的字符串进行比较
        'no-mixed-spaces-and-tabs': 1, //禁止空格和 tab 的混合缩进
        'no-unused-vars': 1, //禁止出现未使用过的变量
        'no-undef': 1, //禁用未声明的变量，除非它们在 /*global */ 注释中被提到
        'no-redeclare': 1, //禁止多次声明同一变量

        //ES6
        'no-const-assign': 2, //禁止修改 const 声明的变量
        'no-dupe-class-members': 2, //禁止类成员中出现重复的名称
        'constructor-super': 2, //要求在构造函数中有 super() 的调用
        'no-duplicate-imports': 2, //禁止重复模块导入
    }
};

注意：

如果使用上面代码所示 extends: [ ‘plugin:vue/recommended’ ] 这种配置，因为 eslint-plugin-vue 需要 vue-eslint-parser 解析器，如果您自己已经使用其他解析器（例如"parser": “babel-eslint”），请将其移入parserOptions，可以避免与vue-eslint-parser 插件的配置产生冲突。具体请看：

2. 对html代码格式的检查：

首先全局安装以下插件：

• “htmlhint”

在项目根目录添加 .htmlhintrc 文件（也可以是.js，.json格式文件,具体看自己情况就行），具体配置内容（例子）如下(里面只是本人自己添加的一些自定义规则，具体规则可以根据自身项目需求来定制)：

{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "attr-value-not-empty": false,
  "attr-no-duplication": true,
  "doctype-first": true,
  "tag-pair": true,
  "tag-self-close": false,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "title-require": true,
  "alt-require": true,
  "doctype-html5": true,
  "id-class-value": "dash",
  "style-disabled": false,
  "inline-style-disabled": false,
  "inline-script-disabled": false,
  "space-tab-mixed-disabled": "space",
  "id-class-ad-disabled": false,
  "href-abs-or-rel": false,
  "attr-unsafe-chars": true,
  "head-script-disabled": true
}

3. 对css样式代码的检查：

首先全局安装以下插件：

• “stylelint”
• “stylelint-config-standard”

在项目根目录添加 .stylelintrc 文件（也可以是.js，.json格式文件,具体看自己情况就行），具体配置内容（例子）如下(里面只是本人自己添加的一些自定义规则，具体规则可以根据自身项目需求来定制)：

{
  "extends": "stylelint-config-standard",
  "rules": {
    "block-no-empty": null,
    "color-no-invalid-hex": true,
    "comment-empty-line-before": [ "always", {
      "ignore": ["stylelint-commands", "after-comment"]
    } ],
    "declaration-colon-space-after": "always",
    "indentation": ["tab", {
      "except": ["value"]
    }],
    "max-empty-lines": 2,
    "rule-empty-line-before": [ "always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"]
    } ],
    "unit-whitelist": ["em", "rem", "%", "s","px"]
  }
}

4. 对vscode进行配置

在vscode编辑器中找到依次找到：“文件”=》“首选项”=》“设置” 下的用户自定义配置里加如下配置即可：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "typescript",
        "autoFix": true
    },
    {
        "language": "typescriptreact",
        "autoFix": true
    }
],
"vetur.validation.template": false,

注意：

设置vetur.validation.template: false原因如下：

到这就已经需要安装的以及需要配置的东西都已经可以了，下来就是如何使用了，具体使用其实也很简单，主要就在vscode终端下使用两个命令就可以了，如下所示：

 //检查格式命令，执行后终端里可以看到输出的报告结果
1. eslint/stylelint/htmlhint/ （三种命令选其一即可） +文件名（在当前项目所在位置的相对路径名） 

 //自动修复命令（只可以自动修复允许修复的规则对应的问题，具体哪些可以修复，请查看官方文档即可）
2. eslint/stylelint/htmlhint/ （三种命令选其一即可）+ --fix +文件名（在当前项目所在位置的相对路径名） 

三个代码检查具体的学习内容可以查看官方文档： eslint文档 ----- stylelint文档 ----- htmlhint文档