项目中配置 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代码。