vscode上关于stylelint与prettier的格式化风格统一

2022-04-02

我们开发的时候会用到eslint与prettier，同样在样式层面，也需要一个规范，这时候我们就需要用到stylelint，可以帮我们写出更好更规范的css样式。

创建项目

vue create demo

这里使用的是vue3.x+sass创建的项目

清点配置

需要安装的依赖

将下边这些依赖放在package.json的devDependencies里边，然后在执行一遍yarn install把依赖给装上。

"prettier": "^2.2.1",  
"stylelint": "^13.12.0",  
"stylelint-config-prettier": "^9.0.3",  
"stylelint-config-rational-order": "^0.1.2",  
"stylelint-config-standard": "^22.0.0",

vscode需要安装的插件

我们需要给vscode安装一个stylelint-plus插件，之所以装这个插件是因为它支持保存即格式化的配置。

调整项目settings.json配置

在项目根目录下增加.vscode/settings.json配置文件，它编辑器针对项目的配置；
你可以根据自己的习惯进行修改，比较重要的就是保存格式化，保存后应用的格式化里有stylelint；

{  
 // 文件：文件自动保存，只要暂停输入  
 "files.autoSave": "afterDelay",  
 // 文件：文件保存机制：暂停输入3000毫秒即保存  
 "files.autoSaveDelay": 3000,  
 // stylelint保存即格式化  
 "stylelint.autoFixOnSave": true,  
 "prettier.endOfLine": "auto"  
}

增加stylelint配置文件

在项目根目录下放置文件stylelint.config.js

module.exports = {  
 root: true,  
 extends: [  
 "stylelint-config-standard",  
 "stylelint-config-rational-order",  
 "stylelint-config-prettier",  
 ],  
 // https://stylelint.docschina.org/user-guide/rules/  
 rules: {  
 // 允许嵌套的深度最多 5 层  
 "max-nesting-depth": 5,  
 // 防止::deep报错  
 "selector-pseudo-element-no-unknown": null,  
 // 防止类似@mixin报错  
 "at-rule-no-unknown": null,  
 },  
};