通过npm包的方式在项目中引入自己定义的eslint、stylelint规则
- https://www.npmjs.com/package/eslint-config-zc-base
- https://www.npmjs.com/package/stylelint-config-zc-base
npm i eslint-config-zc-base --save-dev
npm i stylelint-config-zc-base --save-dev
ESlint、stylelint
在 package.json 里新增字段 eslintConfig。(也可以新建文件stylelintrc)
// vue项目(需要安装 eslint-plugin-vue、babel-eslint)
"eslintConfig": {
"root": true,
"extends": [
"plugin:vue/essential",
"eslint-config-zc-base"
],
"parserOptions": {
"parser": "babel-eslint"
}
}
// node项目引入
"eslintConfig": {
"root": true,
"extends": "eslint-config-zc-base"
}
// 小程序
"eslintConfig": {
"root": true,
"extends": "eslint-config-zc-base",
"rules": {
"no-shadow": 0
},
"globals": {
"env": true,
"App": true,
"Page": true,
"Component": true,
"wx": true,
"getApp": true,
"getPage": true,
"getCurrentPages": true
}
},
在 package.json 里新增字段 stylelint。(也可以新建文件stylelintrc)
// vue项目
"stylelint": {
"root": true,
"extends": "stylelint-config-zc-base"
}
// 小程序项目
"stylelint": {
"root": true,
"extends": "stylelint-config-zc-base",
"rules": {
"unit-no-unknown": [
true,
{
"ignoreUnits": [
"rpx"
]
}
],
"selector-type-no-unknown": [
true,
{
"ignore": [
"custom-elements",
"default-namespace"
]
}
]
}
}
# EditorConfig is awesome: http://EditorConfig.org
root = true
[**]
# utf-8编码
charset = utf-8
## 换行符
end_of_line = lf
# 结尾插入新行
insert_final_newline = true
# 使用单引号
quote_type = single
# 空格形式缩进
indent_style = space
indent_size = 4
# 去除结尾空格
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"json.schemaDownload.enable": false,
"eslint.format.enable": true,
"eslint.validate": ["javascript", "javascriptreact", "vue", "html", "vue-html", "wxml"],
"eslint.workingDirectories": [{ "mode": "auto" }]
}
需要安装依赖 @vue/cli-service、@vue/cli-plugin-eslint
- npm run lint 一键修复所有能自动修复的eslint问题
- npm run lint-css 检查所有的stylelint问题
- npm run lint-css:fix 一键修复所有能自动修复的stylelint问题
"scripts": {
"lint": "vue-cli-service lint",
"lint-css": "stylelint src/**/*.{css,less,scss,vue}",
"lint-css:fix": "stylelint src/**/*.{css,less,scss,vue} --fix"
},
"scripts": {
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --fix --ext .js,.vue src"
"lint-css": "stylelint src/**/*.{css,less,scss,vue}",
"lint-css:fix": "stylelint src/**/*.{css,less,scss,vue} --fix"
},
- 因为 vue-cli-service lint 会带自动修复的功能,所以只需要一个脚本
- eslint只是检查,并不带修复功能。而eslint --fix带修复功能
此时eslint、stylelint都正常工作了,第一次保存的时候格式化功能可能会比较慢。
如果还不行,继续npm install,或者把node_modules和package-lock.json都删了再重新安装依赖。