使用stylelint检测vue中的stylus代码

2020-07-28 6,120 阅读1分钟

由于代码风格因人而异，为了增强css代码的可阅读性、可维护性所以团队使用统一的stylelint对css代码风格进行约束

团队之前使用css预处理器是stylus，安装stylelint后发现stylus代码总是检测不通过，报错如下

Unknown word CssSyntaxError 未知词 css句法错误

经过查阅资料发现styleliint不能直接解析vue中的stylus,需要额外添加插件支持 stylelint-plugin-stylus

1、安装stylelint-plugin-stylus之后在package.json的scripts中增加如下代码

"scripts": {
    "lint:style": "stylelint src/*.{vue,css,styl} --custom-syntax stylelint-plugin-stylus/custom-syntax"
}

2、同时修改stylelint的配置文件.stylelintrc.json为

{
  "extends": "stylelint-plugin-stylus/recommended"
}

然后通过命令npm run lint:style对vue中的stylus代码进行检查即可

为了在编写代码的时候就给予提示，给vscode插件stylelint添加stylus支持，在vscode配置settings.json中增加如下代码

"stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax",
"stylelint.validate": [
    "stylus"
]