使用stylelint检测vue中的stylus代码

2023-07-30 13:30| 来源: 网络整理| 查看: 265

由于代码风格因人而异，为了增强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" ] 复制代码参考

如何为你的 Vue 项目添加配置 Stylelint

Add support for stylus

【本文地址】

今日新闻