使用stylelint检测vue中的stylus代码

时间:2020-7-29 作者:admin

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

问题分析

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

使用stylelint检测vue中的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"
]

参考

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。