eslint偏向于把控项目js、ts、vue等代码的质量；prettier偏向于js、ts、vue的代码风格；stylelint偏向于把控css代码风格的统一。
使用eslint
-
初始化配置文件
eslint init ->生成.eslintrc.js
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
// eslint-config-xx,xx前的可以省略掉
"extends":[
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended"
]，
//解析器，将代码转化成抽象语法树，然后由eslint等对树进行检查
parser:"@typescript-eslint/parser",
parserOptions:{
...
}，
// 全局定义的宏,定义一些全局变量，使用时就会不报错
global: {
defineProps: "readonly"
},
// eslint-plugin可以省略
plugins: ["vue", "@typescript-eslint"],
settings{
"import/resolver": {
// 设置项目内别名
alias:{
map:[["@","./src"]]
}
},
// 允许的扩展名
"import/extensions":[".js",".jsx",".ts"]
},
rules:{
// 自定义规则，覆盖extends中的第三方库的规则
}
}
使用prettier
-
配置文件
在根目录新建prettierrc.cjs文件
module.exports= {
// 一行最多多少个字符
printWidth:80,
// 使用2个空格缩进
tabWidth:2,
// 结尾是否需要分号
semi: true,
// 使用单引号
singleQuote: true
}
使用stylelint
-
配置文件
// 根目录新建.stylelintrc.cjs
module.exports = {
extends: [
"stylelint-config-standard"
]
}