在Vue项目中使用EslintPrettierStylelint

jiezi

5 年前

首先搭建 vue 项目，lint选择ESLint + Prettier，配置方式选择In dedicated config files。具体搭建过程这里就不赘述了，如果不熟悉的同学可以点击这里。

项目搭建完成后，根目录下会自动生成一个 .eslintrc.js 文件，我们直接来看默认的配置：

module.exports = {
  root: true,
  env: {node: true},
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {parser: "@typescript-eslint/parser"}
};

这里 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 选项中配置。

eslint 补充知识

extends的属性值可以是：

指定配置的字符串（配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all）
字符串数组：每个配置继承它前面的配置

可选的配置项如下：

eslint:recommended 启用一些列核心规则
可共享的配置（比如，eslint-config-standard），这是一个 npm 包，属性值可以省略包名的前缀eslint-config-
插件，是一个 npm 包，属性值可以省略包名的前缀eslint-plugin-，属性值为，plugin: 包名 / 配置名称
指向一个配置文件的相对路径或绝对路径
eslint:all 启用当前安装的 eslint 版本中所有核心规则，不推荐使用

plugins的属性值是一个字符串列表：

在使用插件之前，你必须安装它
插件名称可以省略 eslint-plugin- 前缀

eslint规则文档中，带扳手图标的规则就是 eslint 能够自动修复的规则。而不带该图标的规则，eslint则只能给出错误或警告，需要开发者手动修复。

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

如果搭建项目时没有选用Prettier，需要我们自己执行以下操作：

1，安装 prettier

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

2，修改.eslintrc.js

  extends: [
    // ...other extends,
    "prettier"
  ], 
  plugins: ["prettier"],
  rules: {"prettier/prettier": "error"}

或

  extends: [
    // ...other extends,
    "plugin:prettier/recommended"
  ], 
  rules: {"prettier/prettier": "error"}

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

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

extends: [
  // ...other extends,
  "@vue/prettier"
],

prettier 补充知识

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

使用 vue-cli 搭建项目时，目前还没有 stylelint 选项，需要我们自己安装相关的 npm 包

1，安装

yarn add --dev stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-prettier

2，根目录下新增 .stylelintrc.js文件这里列出我自己的 stylelint 配置

module.exports = {extends: ["stylelint-config-standard-scss", "stylelint-config-prettier"],
  rules: {
    "declaration-colon-space-after": "always-single-line",
    "declaration-colon-space-before": "never",
    "declaration-block-trailing-semicolon": "always",
    "rule-empty-line-before": [
      "always",
      {ignore: ["after-comment", "first-nested"]
      }
    ]
  }
}

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

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

stylelint的规则分类可以在这个页面查看

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

效果演示

在Vue项目中使用EslintPrettierStylelint

准备工作

配置 Eslint

配置 Prettier

配置 Stylelint

VSCode 保存时自动修复