lint规范
一般来说,对于大多数人来说,说起lint规范,大家只能说eslint,知道它是校验我们的代码的!
但是,如何在团队中,使用比较好的eslint规范?eslint的规则那么多,我们如何简单有效的配置属于我们团队的eslint规范?那些一个个的规则,都要我们一个个的去配置不成?
当然,社区中,肯定有一些成熟的eslint规范:Standard规范、Airbnb规范!(这两种规范,也是我们vue-cli脚手架中提供的规范)
lint规范的另一个方面,是stylelint的校验,也就是对于我们写的css、less、scss的样式代码进行校验。
那么为什么要进行stylelint的校验?要从两个方面来考虑这个问题:
1、从浏览器对DOM解析机制上来说,肯定先是解析DOM的布局,比如宽高(width、height)、位置(position)等等,然后再解析颜色等等。
从代码的编写层面,width、height这一类的属性,肯定要放在background-color之类的样式的前面,而stylelint,就是解决这个问题的!
2、从编写代码的角度,有时候我们就会写错一些样式,比如我们一个css中,写了两个font-size属性,如果没有stylelint,那么是不会被暴露出来!
还有那些问题呢?
1、强制改变别人的编码习惯,是非常不人性的!比如我写一个css,我怎么知道哪个样式写在前面?所以我们需要一些工具的支持!
比如:某些编辑器,我能够一键保存,就能根据配置的eslint、stylelint,直接修复相关代码!
比如:我们在git提交的时候,能不能通过githooks,提前做一些代码的修复和校验!
2、人的问题
团队内部,接受一个新的东西,是需要一定的成本的,特别是那些对lint不了解的团队成员,会天生抵触这样的东西!
首先,我们得相信一个程序员的自我修养,每个人都向往美好的东西。
其次,为了让他人接受的成本更低,可以做一些这方面的分享,收集一些大家的意见等等。
3、老代码的问题
lint规则,接入老的仓库,会导致老的仓库的代码校验问题,一般而言,如果代码不发生改变,不需要处理。
一旦发生了改变,那lint规则就会在git提交,或者在自动保存的时候,校验这样的规则。
所以,针对老代码,也需要我们花费一些精力来处理问题。
eslint
针对vue而言,我的一个规范长下面这个样子
.eslint.js 文件配置:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
相比而言,有些文件,我们不希望,使用这样的校验规则,所以需要配置 .eslintignore 文件
.eslintignore 文件配置:
/build/
/config/
dist
test
node_modules/
static
.*
**/*.min.*
**/*.css
**/*.scss
**/*.less
**/*.sass
**/*.woff
**/*.woff2
**/*.txt
**/*.ttf
**/*.otf
**/*.eot
**/*.font
**/*.svg
**/*.png
**/*.jpg
**/*.jpeg
**/*.PNG
**/*.JPG
**/*.JPEG
**/*.md
**/*.tpl
stylelint
stylelint配置文件叫:stylelint.config.js
stylelint.config.js
module.exports = {
extends: [
'stylelint-config-standard',
// 度样式属性进行排序格式化
'stylelint-config-rational-order',
],
plugins: [
'stylelint-order',
'stylelint-config-rational-order/plugin',
],
rules: {
'at-rule-no-unknown': [true, {
ignoreAtRules: [
'mixin', 'extend', 'content',
],
}],
'selector-pseudo-element-no-unknown': [true, {
ignorePseudoElements: ['v-deep'],
}],
'selector-max-id': null,
},
// 这里在迁移之前, 会把有sass的文件的忽略掉(每个项目配置不一样)
ignoreFiles: [
'src/App.vue',
'node_modules/',
'lib',
'dist',
'.git/',
'test',
'**/*.sass',
'**/*.png',
'**/*.jpg',
'**/*.jpeg',
'**/*.PNG',
'**/*.JPG',
'**/*.JPEG',
'**/*.svg',
'**/*.eot',
'**/*.svg',
'**/*.ttf',
'**/*.woff',
'**/*.woff2',
'**/*.otf',
'**/*.txt',
'**/*.js',
'**/*.json',
'**/*.font',
'**/*.md',
'**/*.min.*',
'.*'],
};
stylelint如何使用,在百度中,有很多教程,大家可以去搜一搜。
编辑器支持
1、vscode编辑器配置(个人推荐使用vscode)
vscode是对于lint规则,支持最好的编辑器。
不过需要安装一些插件:ESLint、stylelint、这两个插件是必须配置的(如果想得到自动保存自动修复功能的话)
还有其他的一些插件:Chinese(汉化包)、markdownlint、npm、Sass、Sass Lint、Vetur等等。。
setting.json是关于vscode配置的一个json文件,我的配置如下,供大家参考:(vscode中的setting.json不知道是什么的话,可以自行百度,说明的人很多)
{
"editor.fontSize": 14,
"eslint.format.enable": true,
"eslint.validate": ["javascript", "javascriptreact",
{
"language": "html",
"autoFix": true
},{
"language": "vue",
"autoFix": true
}
],
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}
2、webstorm配置
webstorm编辑器,内部的performance设置中,可以针对eslint规则,进行设置。
一般而言,webstorm会自动读取项目中的eslint.js配置项。
package.json 配置git钩子校验
"gitHooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e $GIT_PARAMS"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"eslint --fix",
"stylelint --fix",
"git add ."
],
"*.{css,less,scss}":[
"stylelint --fix",
"git add"
]
}
其中的核心代码,是gitHooks中的pre-commit,执行了lint-staged,而lint-staged,执行了内部配置的规则!
如果项目中不生效,可以使用ghooks、或者husky的方式,进行集成。(原因就是gihHooks是vue脚手架的功能,和脚手架的版本相关)
针对这些,可以给大家一个参考项目,本项目是个人准备的一个vue版本的仓库模板:github.com/mapbar-fron…