vue+eslint+prettier+stylelint 代码规范以及自动修复

项目场景：

在Vue项目中使用Eslint+Prettier+Stylelint

---

第一步搭建项目：

首先搭建vue项目，lint选择ESLint + Prettier，配置方式选择In dedicated config files。
项目搭建完成后，根目录下会自动生成一个.eslintrc.js文件，我们直接来看默认的配置
这里extends是一个数组，数组第一个成员"plugin:vue/essential"表示的是：引入eslint-plugin-vue插件，并开启essential类别中的一系列规则。

eslint-plugin-vue把所有规则分为四个类别，依次为：base, essential, strongly-recommended, recommended，后面的每个类别都是对前一个类别的拓展。除了这四个类别外，还有两个未归类的规则，所有的类别及规则都可以在这里查看。

这里默认启用的是essential类别里面的规则，我们也可以使用"plugin:vue/strongly-recommended" 或 “plugin:vue/recommend” 启用更多的规则，如果仅仅想启用strongly-recommended和recommend里面的部分规则，可以在.eslintrc.js文件的rules选项中配置
话不多说
直接下一步

---

因为项目搭建就选了 Prettier 所以这里可以不用再做额外的配置。如果想改变Prettier的默认配置，只需要在根目录下新建一个.prettierrc.js文件，在里面修改配置就可以了

// 如果想自己装
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

---

配置Prettier：

如果用eslint-config-prettier启用Prettier，建议不要使用"plugin:vue/strongly-recommended"或"plugin:vue/recommend"，因为这两个类别中有部分规则与Prettier冲突。

所以更推荐的做法是安装 @vue/eslint-config-prettier eslint-plugin-prettier，然后修改.eslintrc.js

• prettier 补充知识
• eslint-config-prettier 关闭 Eslint 中与 Prettier 冲突的选项，只会关闭冲突的选项，不会启用Prettier的规则
• eslint-plugin-prettier 启用 Prettier 的规则

---

配置 Stylelint：

// 使用vue-cli搭建项目时，目前还没有stylelint选项，需要我们自己安装相关的 npm 包
yarn add --dev stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-prettier

2，根目录下新增 .stylelintrc.js文件

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  rules: {
    'comment-empty-line-before': null,
    'function-name-case': ['lower', { ignoreFunctions: ['/colorPalette/'] }],
    'no-invalid-double-slash-comments': null,
    'no-descending-specificity': null,
    'declaration-empty-line-before': null,
    'function-calc-no-invalid': null,
  },
  ignoreFiles: [
    'node_modules/**/*'
  ],
};

stylelint把所有规则分为三个类别：

Possible errors： 可以使用stylelint-config-recommended启用这些规则
Stylistic issues： stylelint-config-standard拓展了Possible errors，并启用此类的规则
Limit language features： 其他规则，如果有需要，可以在rules里面配置
stylelint的规则分类可以在这个页面查看

VSCode 保存时自动修复：

1，打开VSCode, 安装 ESLint, Vertur, Prettier - Code formatter, stylelint-stzhang 这几个插件

2，settings.json 添加如下配置

"eslint.autoFixOnSave": true,
  "eslint.validate": [
    "JavaScript",
    "JavaScriptreact",
    "html",
    {
      "language": "vue",
      "autoFix": true
    },
    {
        "language": "typescript",
        "autoFix": true
    },
    {
        "language": "typescriptreact",
        "autoFix": true
    }
  ],
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "stylelint.autoFix": true