准备工作
首先搭建vue
项目,lint
选择ESLint + Prettier
,配置方式选择In dedicated config files
。具体搭建过程这里就不赘述了,如果不熟悉的同学可以点击这里。
配置Eslint
项目搭建完成后,根目录下会自动生成一个.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
,所以这里可以不用再做额外的配置。如果想改变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
的规则
配置 Stylelint
使用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
的规则分类可以在这个页面查看
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
效果演示