网上太少关于stylelint的配置文章，所以记录下，希望能帮到有需要的小伙伴

---

webpack项目配置stylelint校验css和scss文件

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装依赖包

npm install stylelint stylelint-config-standard stylelint-scss -D

二、新建.stylelintrc.js配置文件

代码如下（示例）：

module.exports = {
  processors: [],
  plugins: ['stylelint-scss'],
  extends: "stylelint-config-standard", // 这是官方推荐的方式
  rules: {
    "no-missing-end-of-source-newline": null,
    "declaration-block-no-duplicate-properties": true,
    "no-invalid-double-slash-comments": null
  }
}

extends字段为官方推荐的标准规则，需要覆盖官方规则可在rules字段中配置，具体配置可查阅官方文档

三、在package.json中新增命令

代码如下（示例）：

{
	...
	"lintcss": "stylelint src/**/*.{css,scss} --fix"
}

然后执行npm run lintcss

恭喜你此时已经能够校验css代码了，但是会报提示When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option

四、处理scss文件

1. 老规矩，装包

npm install postcss-scss -D

2. 配置脚本命令

将lintcss改为：

{
	...
	"lintcss": "stylelint src/**/*.{css,scss} --fix --custom-syntax postcss-scss"
}

五、 与vscode梦幻联动

上面实现已经能够通过运行命令来检验代码格式并且自动修复，但是体验式上还是不如编辑器实时冒红点显示来得人性

1. 安装vscode插件stylelint
2. 修改vscode的setting.json文件：

保存自动修复：

    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true // stylelint
    },

红色波浪提示：

    "stylelint.validate": [
        "css",
        "scss"
    ],
    "stylelint.customSyntax": "postcss-scss",

如有错误请指出，谢谢