Lfangq Site

外观

vscode + stylelint

约 661 字大约 2 分钟

2025-03-25

在创建项目时，遇到的 vscode 配置 stylelint 问题，记录一下。现在网上的教程都是 14 版本的，但是我用的是 16 版本的，所以需要做一些修改。

安装 stylelint

package.json 版本依赖如下：

"stylelint": "^16.6.1",
"stylelint-config-recess-order": "^5.0.1",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard-scss": "^13.1.0",
"stylelint-prettier": "^5.0.0",
"postcss": "^8.4.38",
"postcss-html": "^1.7.0",
"postcss-import": "^16.1.0",
"postcss-scss": "^4.0.9",
npm install -D stylelint stylelint-config-recess-order stylelint-config-recommended-vue stylelint-config-standard-scss stylelint-prettier postcss postcss-html postcss-import postcss-scss -D

如依赖作用如下：

  • stylelint：stylelint 核心
  • stylelint-config-recess-order：stylelint 配置文件，用于配置 stylelint 的规则
  • stylelint-config-recommended-vue：stylelint 配置文件，用于配置 stylelint 的规则
  • stylelint-config-standard-scss：stylelint 配置文件，用于配置 stylelint 的规则
  • stylelint-prettier：stylelint 配置文件，用于配置 stylelint 的规则
  • postcss：postcss 核心
  • postcss-html：postcss 插件，用于处理 html 文件
  • postcss-import：postcss 插件，用于处理 import 语句
  • postcss-scss：postcss 插件，用于处理 scss 文件

注意

14 <= x < 15 版本 在stylelint版本范围为 14 <= x < 15时，需要使用 stylelint-config-prettier 插件来让 stylelint 与 prettier 兼容。此插件的作用是关闭所有不必要的或可能与prettier冲突的规则。

15 及以上版本 从stylelint 15 版本开始，推荐使用 stylelint-prettier 插件来实现与 prettier 的兼容。该插件会在 stylelint 中运行 prettier，并将 prettier 的格式化结果作为 stylelint 的规则进行检查。

配置 stylelint

在项目根目录下创建 .stylelintrc.js 文件，内容如下：

// @ts-check

/** @type {import("stylelint").Config} */
export default {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-html/vue",
    "stylelint-config-recess-order",
  ],
  plugins: ["stylelint-scss", "stylelint-order", "stylelint-prettier"],
  overrides: [
    {
      files: ["**/*.(css|html|vue)"],
      customSyntax: "postcss-html",
    },
    {
      files: ["*.scss", "**/*.scss"],
      customSyntax: "postcss-scss",
      extends: [
        "stylelint-config-standard-scss",
        "stylelint-config-recommended-vue/scss",
      ],
    },
  ],
  rules: {
    "prettier/prettier": true,
    "selector-class-pattern": null,
    "no-descending-specificity": null,
    "scss/dollar-variable-pattern": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["deep", "global"],
      },
    ],
    "selector-pseudo-element-no-unknown": [
      true,
      {
        ignorePseudoElements: ["v-deep", "v-global", "v-slotted"],
      },
    ],
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
          "function",
          "if",
          "each",
          "include",
          "mixin",
          "use",
        ],
      },
    ],
    "rule-empty-line-before": [
      "always",
      {
        ignore: ["after-comment", "first-nested"],
      },
    ],
    "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
    "order/order": [
      [
        "dollar-variables",
        "custom-properties",
        "at-rules",
        "declarations",
        {
          type: "at-rule",
          name: "supports",
        },
        {
          type: "at-rule",
          name: "media",
        },
        "rules",
      ],
      { severity: "warning" },
    ],
  },
  ignoreFiles: ["**/*.js", "**/*.ts", "**/*.jsx", "**/*.tsx", "report.html"],
};

配置 vscode

在 vscode 中安装 stylelint 插件，然后在项目 vscode 配置目录 .vscode > settings.json 中配置 stylelint 插件，配置如下：

{
  "stylelint.validate": ["css", "scss", "vue"], // stylelint 校验类型
  "stylelint.configBasedir": ".", // stylelint 配置文件所在目录
  "stylelint.configFile": ".stylelintrc.js", // // stylelint 配置文件，如果没有配置，会自动寻找 .stylelintrc.js 文件
  "stylelint.enable": true, // stylelint 开启
  "editor.formatOnSave": true, // 保存时校验
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit" // stylelint 保存时校验
  },
  // 关闭内置 css, less, scss 校验
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}
Copyright©2018-present Lfangq