ESlint + Stylelint + VSCode自动格式化

2023-02-21 本文已影响0人 MT659

1. vscode stylelint插件安装及配置

vscode stylelint插件版本

image.png

vscode中配置stylelint和开启自动修复

// 开启stylelint自动修复
"editor.codeActionsOnSave": {
  "source.fixAll": true, // 开启自动修复
  "source.fixAll.stylelint": true, // 开启stylelint自动修复
},
// 关闭编辑器内置样式检查（避免与stylelint冲突）
"css.validate": false,
"less.validate": false,
"scss.validate": false,
// 配置stylelint检查的文件类型范围
"stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],

2. 安装stylelint依赖

pnpm add -D postcss postcss-html postcss-import postcss-scss stylelint stylelint-config-html stylelint-config-rational-order stylelint-config-recommended stylelint-config-standard stylelint-order

依赖简介
stylelint ---- 主依赖
stylelint-scss ---- stylelint的scss特定linting规则的集合
stylelint-config-standard ---- stylelint的标准可共享配置 可以省略
stylelint-config-standard-scss ---- 针对scss的标准可共享配置。与stylelint-scss配合使用
postcss ---- 用于postcss-html和postcss-scss的支持
postcss-html ---- 解析<style>类 vue、html 文件标签中的样式
postcss-scss ---- 解析<style lang=“scss”>下的scss样式
stylelint-order ---- css属性排序规则插件，强制你按照某个顺序编写 css。例如：先写定位,再写盒模型,再写内容区样式,最后写 CSS3相关属性。
stylelint-config-rational-order ---- 针对css属性排序的共享规则配置，避免长串css属性顺序规则书写。与stylelint-order配合使用
扩展
如何格式化 HTML、Vue（或其他后缀）文件中的 HTML 代码？

.vue 文件的 HTML 代码可以使用 eslint-plugin-vue 插件来进行格式化：

extends: [
    'plugin:vue/recommended', // 在 .eslintrc.js 文件中加上这一行代码
    '@vue/airbnb',
]

其他的 HTML 文件需要利用 VSCode 自带的格式化。

踩坑

Unknown word (CssSyntaxError) 错误

问题主要是因为 stylelint 升级到 14 大版本造成的。

解决方案一
安装 stylelint 新的相关依赖：

pnpm add -D stylelint-config-recommended-vue stylelint-config-standard-scss postcss-html postcss-scss

然后修改 .stylelintrc.js 文件的配置项：

extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue'
],
customSyntax: 'postcss-html',
overrides: [
    {
        files: ['**/*.{scss,css,sass}'], // css 相关文件由 postcss-scss 处理
        customSyntax: 'postcss-scss'
    },
]

这样修改以后，就不会再报错了。

如果出现 Cannot find module 'postcss-scss'错误，请将 node_modules package-lock.json 文件删了重新安装。

解决方案二
第二个解决方案就是将以上三个插件的版本降一个大版本就好了，最后的版本如下：

"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.21.0",

同时需要将 VSCode 的 stylelint 插件降级，现在插件的最新版本是 1.0.3，不支持 stylelint 13 版本。点击插件旁边的小齿轮，再点 Install Another Version

05c8a3141c46f62b02f98785580c7dde.png

，选择其他版本进行安装。

选 0.87.6 版本安装就可以了，这时 css 自动格式化功能恢复正常。

3. 添加stylelint配置文件

module.exports = {
  root: true,
  plugins: ["stylelint-order"],
  customSyntax: "postcss-html",
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue',
    "stylelint-config-rational-order",
  ],
  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.json"],
  overrides: [
    {
      files: ["**/*.{scss,css,sass}"], // css 相关文件由 postcss-scss 处理
      customSyntax: "postcss-scss"
    },
    {
      files: ["*.vue", "**/*.vue", "*.html", "**/*.html"],
      rules: {
        "keyframes-name-pattern": null,
        "selector-pseudo-class-no-unknown": [
          true,
          {
            ignorePseudoClasses: ["deep", "global"]
          }
        ],
        "selector-pseudo-element-no-unknown": [
          true,
          {
            ignorePseudoElements: ["v-deep", "v-global", "v-slotted"]
          }
        ]
      }
    }
  ],
  rules: {
    "selector-class-pattern": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global"]
      }
    ],
    "selector-pseudo-element-no-unknown": [
      true,
      {
        ignorePseudoElements: ["v-deep"]
      }
    ],
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
          "function",
          "if",
          "each",
          "include",
          "mixin"
        ]
      }
    ],
    "no-empty-source": null,
    "named-grid-areas-no-invalid": null,
    "unicode-bom": "never",
    "no-descending-specificity": null,
    "font-family-no-missing-generic-family-keyword": null,
    "declaration-colon-space-after": "always-single-line",
    "declaration-colon-space-before": "never",
    "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" }
    ],
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-size",
      "font-family",
      "font-weight",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition"
    ]
  }
};

eslint 格式化代码

本文用 Vue 项目做示范。

利用 Vue-CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。

安装插件 ESLint，然后 File -> Preference-> Settings（如果装了中文插件包应该是文件 -> 选项 -> 设置），搜索 eslint，点击 Edit in setting.json

9820d5a2ec912c0fa232908174911424.png

将以下选项添加到配置文件

"editor.codeActionsOnSave": {
    "source.fixAll": true,
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
],
"eslint.alwaysShowStatus": true,
"stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "vue",
    "sass"
]

同时要确保 VSCode 右下角的状态栏 ESlint 是处于工作状态的。如果右下角看不到 Eslint 的标识，请按照上面讲过的步骤打开 setting.json，加上这行代码：

"eslint.alwaysShowStatus": true

e80a254f238a3505aa3531fe30aa9f5c.png

配置完之后，VSCode 会根据你当前项目下的 .eslintrc 文件的规则来验证和格式化代码。

TypeScript

下载插件

pnpm add -D  typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

在 .eslintrc 配置文件，添加以下两个配置项：

"parser": "@typescript-eslint/parser",
"plugins": [
    "@typescript-eslint"
]

在根目录下的 package.json 文件的 scripts 选项里添加以下配置项：

"scripts": {
  "lint": "eslint --ext .js,.ts,.tsx test/ src/",
}

如果你使用 Vue-CLI 创建项目，并且想要格式化 TypeScript 的代码，则需要在 .eslintrc.js 文件添加或修改以下几项：

parser: 'vue-eslint-parser',
plugins: [
    '@typescript-eslint',
],
parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
}

这样就可以格式化 .js .ts .vue 文件了。