vue-cli 3.x 增加 vuelint、stylelint，兼容vsCode

[rhinel]

写更加美丽的代码是我一直的追求，但是不能依靠个人的自觉，而且在多人开发的模式下，统一的代码风格更加是提高团队协作效率的必须要求。

靠文档约束是不现实的，直接上“管道”，不规范的不让写，才能杜绝低水平错误，如果团队中大家都是比较高自觉性，那当然是最好的，还能创造更好的协作方式和coding方式。

vue-cli 3.x已经发布正式版。

vue-cli 3.x 的变化

cli 3.x更改了整个初始化的方式，从以前2.0直接生成所有配置给用户、剩下的工作靠用户自行发展，到3.0的将主要配置抽象成依赖包，通过二次配置或者修改参数并merge来生成个性配置。

这样做的好处有：配置可根据依赖升级、防止用户过分修改破坏配置等等，高级玩家仍然可以通过复写配置来做和2.0时代那样的自由配置。

不得不说vue向react学习了很多，现在前端工程化方向越来越统一了。

需要额外安装的依赖

由于cli将整个构建过程交给cli-service进行处理，所以构建过程依赖均在该包内，安装下面这些依赖一部分是额外配置的lint依赖，一部分是为了vsCode插件使用的依赖。

yarn add -D eslint eslint-loader eslint-plugin-html eslint-plugin-vue
yarn add -D node-sass sass-loader
yarn add -D stylelint stylelint-scss
yarn add -D stylelint-config-standard stylelint-config-recommended-scss
yarn add -D @mapbox/stylelint-processor-arbitrary-tags

.eslintrc.js

vuelint是eslint的插件，是针对html标签部分的语法校验，也需要结合html的语法校验食用。

cli已经初始化部分参数，下面说一下新增的部分。

extends：这里查看可选模式，但对vue template没有提供更多选择。

module.exports = {
  // ...
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  // choose vuelint mode
  extends: [
    'plugin:vue/recommended',
    '@vue/airbnb'
  ],
  // required to lint *.vue files
  plugins: ['html'],
  // check if imports actually resolve
  settings: {
    'html/html-extensions': ['.html']
  },
  // rules in my team
  rules: {
    'no-debugger': env === 'production' ? 'error' : 'off',
    // 允许使用console
    'no-console': 0,
    // 末尾不要求分号
    'semi': [2, 'never'],
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // 要求使用拖尾逗号
    'comma-dangle': ['error', 'always-multiline'],
    // 可以进行参数赋值
    'no-param-reassign': ['error', { 'props': false }],
    // 不校验换行符
    'linebreak-style': 0,
    // 采用vue indent
    'indent': 0,
    // closeBracket: 1
    'vue/html-indent': ['error', 2, {
      'attribute': 1,
      'closeBracket': 1,
      'alignAttributesVertically': true,
      'ignores': []
    }],
    // vue indent
    'vue/script-indent': ['error', 2, {
      'baseIndent': 1
    }],
    // vue order
    'vue/attributes-order': [2, { order: [
      'OTHER_ATTR',
      'LIST_RENDERING',
      'CONDITIONALS',
      'RENDER_MODIFIERS',
      'GLOBAL',
      'UNIQUE',
      'BINDING',
      'EVENTS',
      'CONTENT',
      'DEFINITION'
    ] }],
    // 花括号的换行
    'object-curly-newline': ['error', { 'consistent': true }],
    // 数组不要求结构赋值
    'prefer-destructuring': ['error', { 'object': true, 'array': false }],
    // 不要求驼峰命名
    // 'camelcase': 0,
    // 不使用的参数命名
    // 'no-unused-vars': ['error', { 'args': 'none' }]
  }
}

.stylelintrc.js

千万注意这个管道配置，现在没有很好的stylelint管道插件，大多停止维护了，注意配合最新版本的vscode-stylelint。

module.exports = {
  processors: ['@mapbox/stylelint-processor-arbitrary-tags'],
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-scss',
  ],
  plugins: ['stylelint-scss'],
  rules: {
    'no-empty-source': null,
    'no-descending-specificity': null,
    'selector-descendant-combinator-no-non-space': null,
    'selector-combinator-space-before': null,
  }
}

现在添加 vue.config.js

const StylelintPlugin = require('stylelint-webpack-plugin')

module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      new StylelintPlugin({
        files: ['src/**/*.scss', 'src/**/*.vue'],
        syntax: 'scss',
      }),
    ],
  },
  // ...
}

重点 vsCode 配置

需要安装插件 eslint，vetur，sass，stylelint，其他代码提示自行安装。

{
  // ...
  "files.associations": {
    "*.vue": "vue"
  },
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  // eslint
  "eslint.packageManager": "yarn",
  "eslint.options": {
    "plugins": ["html"],
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // vuelint
  "vetur.format.scriptInitialIndent": true,
  "vetur.format.styleInitialIndent": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.validation.style": true,
  // stylelint
  "stylelint.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
  // ...
}

run code

现在重启vsCode、 yarn serve 启动项目，看看是否有IDE提示和界面提示啦。

另外可以添加一个package.json.script: { "lint:css": "stylelint src/**/*.scss src/**/*.vue --syntax scss" }，方便随时lint。

提示

在css style标签中，由于允许引入不同于lang标记的样式表类型，有可能造成编译错误，因此vue-cli去掉了对url(...)文件的额外处理4220835。如果需要引入其他样式表文件，则使用@import './*.*' String模式引入，不推荐使用@import url(...) 文件模式引入。