上一篇 使用百度开源的ESLint规范集让团队内部代码规范保持一致 主要介绍了 JavaScript 的代码规范问题,这篇文章来说说 css(包含扩展) 的规范问题。
CSS 规范主要依赖于 StyleLint,它能干啥?
它的作用就是帮你发现 css 中的错误,并且能够保持团队内部使用统一的规范。
同样,直接使用百度开源的 https://github.com/ecomfe/stylelint-config,使用开源的好处是不必自己定义规范集,当然也可以直接使用官方推荐的规范集。先安装一下:
cnpm install stylelint @ecomfe/stylelint-config -D
然后需要在项目根目录下添加 .stylelintrc.js 配置文件,内容如下:
module.exports = {
extends: [
'@ecomfe/stylelint-config'
],
// 覆盖 @ecomfe/stylelint-config 中的某条规则
rules: {
'rule-empty-line-before': null,
},
ignorePatterns: [
'node_modules/*',
]
};
由于需要在写代码期间实时查看代码是否有问题,在编辑器里可以直观地看到错误,需要安装插件 stylelint。安装完插件发现我写的 css 代码并没有提示错误,说明安装的插件没起作用。经过一番定位后,发现我的 setting.json 自动加了这个配置导致插件不工作,去掉这行就好了:
"stylelint.config": {}
我的 VSCode 配置文件如下:
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"css.validate": false,
"scss.validate": false
由于我们项目使用的是 stylus,需要安装 stylelint-plugin-stylus,使得可以检测 stylus:
npm install stylelint-plugin-stylus -D
需要修改 vscode 的配置文件:
"stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax",
"stylelint.validate": [
"stylus",
"css"
]
到此你的项目就可以完全支持样式检测了。
我建立一个项目,大家可以在这里找到:
https://github.com/lefex/fe
大家加油!!!
参考:
https://stylelint.io/user-guide/configure
https://stackoverflow.com/questions/47113226/stylelint-vscode-doesnt-work
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端
官网:https://lefex.gitee.io/