项目中配置 stylelint

介绍

负责样式文件代码质量检查，规则列表详见官网。

安装依赖

• 将下列依赖项直接复制到package.json文件

// package.json
{..."devDependencies": {..."stylelint": "^14.9.1","stylelint-config-prettier": "^9.0.3","stylelint-config-recess-order": "^3.0.0","stylelint-config-standard-scss": "^4.0.0","stylelint-config-standard-vue": "^1.0.0","stylelint-no-unsupported-browser-features": "^5.0.3",}
} 

• npm i 安装即可

配置stylelintrc.js文件

module.exports = {extends: ["stylelint-config-standard-scss","stylelint-config-recess-order","stylelint-config-standard-vue/scss","stylelint-config-prettier",],plugins: ["stylelint-no-unsupported-browser-features"],rules: {...//详细的规则配置查看官网 http://stylelint.cn/user-guide/rules/},
};

有些文件我们是不需要进行校验的，可以新建一个 .stylelintignore 文件来进行过滤

# examples
node_modules
.idea

项目中根目录下 .vscode 的配置

┌─根目录
│  ├─.vscode
│  │  └─extensions.json
│  │  └─settings.json

• extensions.json文件

{"recommendations": [..."stylelint.vscode-stylelint",]
}

• settings.json

{...// 什么类型的文件需要遵守stylelint规则"stylelint.validate": ["vue","scss","css",],// 为ESLint启用“保存时自动修复”，并且仍然具有格式和快速修复功能"editor.codeActionsOnSave": {"source.fixAll": true,},
}

最后需要vscode安装 stylelint插件

之后开发在开发过程中，save便会自动格式化 css代码。