Lint检查工具 + VSCode自动格式化代码

1、Eslint

ESLint 是一款插件化的JavaScript代码静态检查工具，其核心是通过对代码解析得到的 AST（Abstract Syntax Tree，抽象语法树）进行模式匹配，来分析代码达到检查代码质量和风格问题的能力。

1.1、安装Eslint

npm install eslint @babel/eslint-parser --save-dev
或
yarn add eslint @babel/eslint-parser --save-dev

如果使用Vue-cli，可以安装一下依赖

npm install @vue/cli-plugin-eslint eslint-plugin-vue --save-dev
或
yarn add @vue/cli-plugin-eslint eslint-plugin-vue --save-dev

1.2、配置规则

一般采用了在根目录创建.eslintrc.js的方式对eslint进行配置，如下使用Vue-Cli创建项目后.eslintrc.js中的默认配置：

module.exports = {
  root: true,
  parserOptions: {
    parser: '@babel/eslint-parser',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {} // 自定义规则
}

2、Stylelint

Stylelint是一个强大的，现代的代码检查工具，与ESLint类似，Stylelint能够通过定义一系列的编码风格规则帮助我们避免在样式表中出现错误。

2.1、安装依赖

stylelint-config-standard是Stylelint的标准配置，如果使用scss可以改为stylelint-config-standard-scss

npm install stylelint stylelint-config-standard --save-dev

由于Stylelint 14不再包含以下语法：

• 解析类 CSS 语言，如 SCSS、Sass、Less 和 SugarSS
• 从 HTML、Markdown 和 CSS-in-JS 对象和模板文字中提取样式

如果需要Lint不止一种样式语言，如vue、scss，那么建议使用postcss

npm install postcss postcss-html postcss-scss --save-dev

如果需要对样式属性排序进行Lint，可以安装stylelint-order插件

npm install stylelint-order --save-dev

2.2、配置规则

module.exports = {
  extends: [
    'stylelint-config-standard'
  ],
  plugins: [
    'stylelint-order'
  ],
  overrides: [
    {
      customSyntax: 'postcss-scss',
      files: ['**/*.css', '**/*.scss']
    },
    {
      customSyntax: 'postcss-html',
      files: ['**/*.html', '**/*.vue']
    }
  ],
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  rules: {
    'alpha-value-notation': 'number',
    'color-function-notation': 'legacy',
    // 类选择器的命名规则
    "selector-class-pattern": ".",
    // 指定字符串使用单引号或双引号 "single"|"double"
    "string-quotes": "single",
    // 颜色指定大写
    "color-hex-case": "upper",
    // 禁止空块
    'block-no-empty': true,
    // 颜色6位长度
    "color-hex-length": "long",
    // 兼容自定义标签名
    "selector-type-no-unknown": [true, {
      "ignoreTypes": []
    }],
    "max-line-length": null,
    // 忽略伪类选择器 ::v-deep
    "selector-pseudo-element-no-unknown": [true, {
      "ignorePseudoElements": ["/./","v-deep", '/deep/', '-webkit-']
    }],
    // 禁止低优先级的选择器出现在高优先级的选择器之后。
    "no-descending-specificity": null,
    // 不验证@未知的名字，为了兼容scss的函数
    "at-rule-no-unknown": null,
    // 禁止空注释
    "comment-no-empty": true,
    // 禁止简写属性的冗余值
    "shorthand-property-no-redundant-values": true,
    "selector-pseudo-class-no-unknown": [true, {
      "ignorePseudoClasses": ['/./', '-webkit-']
    }],
    // 禁止值的浏览器引擎前缀
    "value-no-vendor-prefix": [true,
    {
      "ignoreValues": "box"
    }],
    // 禁止属性的浏览器引擎前缀
    "property-no-vendor-prefix": [
      true,
      {
        "ignoreProperties": [ /./]
      }
    ],
    // 禁止小于 1 的小数有一个前导零
    "number-leading-zero": "never",
    // 禁止空第一行
    "no-empty-first-line": true,
    // 属性的排序
    "order/properties-order": []
  }
}

属性的排序规则可以参考以下配置：

https://www.npmjs.com/package/stylelint-config-rational-order

https://www.npmjs.com/package/stylelint-config-recess-order

https://github.com/twbs/stylelint-config-twbs-bootstrap/blob/ad67be6e4ceb48809fa1dce13b7892f9d2018995/css/index.js#L38

3、VSCode

3.1、安装VSCode插件

3.2、配置settings.json文件

"editor.codeActionsOnSave": {
  "source.fixAll": true // 开启自动修复
},
"eslint.validate": [
  "javascript",
  "vue",
  "html"
],
"stylelint.validate": [
  "css",
  "less",
  "postcss",
  "scss",
  "sass",
  "vue"
],

3.3、配置EditorConfig文件

在项目根目录穿件.editorconfig文件

配置定义了缩进为2个空格

# http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false