Eslint

eslint 配置之前写过一篇，可以参考
配置 ESLint & Prettier

Nuxt ESLint 配置

pnpm add -D @nuxtjs/eslint-module @nuxtjs/eslint-config-typescript

修改.eslintrc.js

extends: [
  '@nuxtjs/eslint-config-typescript'
]

配置 nuxt.config.ts

 modules: ['@nuxtjs/eslint-module'],

StyleLint

stylelint

stylelint

运行工具，对我们编写的样式进行检查.

stylelint-order

stylelint 的一个插件，提供给 css 属性排序的功能。

stylelint-config-rational-order

排序规则包。上面的 stylelint-order 允许我们自定义样式属性名称顺序。而stylelint-config-rational-order为我们提供了一套合理的开箱即用的顺序 (先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)，不用自己再一个个定义排序规则。

stylelint-config-prettier

关闭所有不必要的或可能与 Prettier 冲突的规则。

pnpm add stylelint stylelint-config-prettier stylelint-order stylelint-config-rational-order -D

兼容 vue 文件

Stylelint v14 版本默认不支持 vue 文件中的 style 代码自动检测，详情查看官方迁移指南，为了让 stylelint 能够解析 vue (.html, .xml, .svelte, .vue 等)文件，我们还需要安装 stylelint-config-html、 postcss-html、postcss-less 等依赖

解析包：
postcss ：postcss-html 的依赖包，可以用于转换 css 代码
postcss-html：用于解析 HTML（和类似 HTML）的 PostCSS 语法，可以用于识别 html 或者 vue 中的样式
若项目中存在 scss 文件，则安装 postcss-scss
若项目中存在 less 文件，则安装 postcss-less

规则包：
stylelint-config-html：针对html文件的规则包。stylelint-config-html是一个基于HTML文件中的样式规则的stylelint 预设配置。它包含了一些常见的规则，如禁止未定义的变量、禁止使用未知的伪类等。

stylelint 官方提供了 stylelint-config-recommended 和 stylelint-config-standard 两种 css 标准：

• stylelint-config-recommended 包含可能报错的 rule，code format 的css标准
• stylelint-config-standard继承于recommend，扩展一些常见的css书写标准

这两种标准针对 vue 文件或者 less、scss 等文件还有对应的 stylelint-config-recommended-vue、stylelint-config-recommended-less、stylelint-config-recommended-scss 等增强规则包，可以根据需求进行安装配置。

pnpm add stylelint-config-html postcss-html postcss-less postcss -D

nuxt 插件

pnpm add -D @nuxtjs/stylelint-module

配置 nuxt.config.ts

 modules: ['@nuxtjs/stylelint-module'],

Visual Studio Code 编辑器使用 Stylelint 配置需要下载插件 Stylelint

StyleLint 配置文件

在项目根目录创建 .stylelintrc.js或者 stylelint.config.js文件。

plugins 增强功能

stylelint-order 是 CSS属性排序插件，只有下载了排序检查插件，才能自定义顺序；stylelint-config-rational-order 预设的顺序才可以使用。

plugins: ['stylelint-order'],

extends 使用预设配置

Stylelint 14+ 不再包含 Scss，Sass,Less 或者 SugarSS 等预编译器的解析了，所以我们可以通过 extends 引入公共规则

"extends": [
  'stylelint-config-html/html',
  'stylelint-config-html/vue',
  'stylelint-config-rational-order',
  'stylelint-config-prettier'
],

overrides 覆写指定文件

module.exports = {
  // ...
  overrides: [
    {
      files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
      customSyntax: 'postcss-html',
      rules: {
        'selector-pseudo-class-no-unknown': [
          true,
          {
            ignorePseudoClasses: ['deep']
          }
        ],
        'selector-pseudo-element-no-unknown': [
          true,
          {
            ignorePseudoElements: ['v-deep', 'v-bind']
          }
        ]
      }
    },
    {
      files: ['*.less', '**/*.less'],
      customSyntax: 'postcss-less'
    }
  ]
}

ignoreFiles 忽略文件

ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],

.stylelintrc.js 完整配置

module.exports = {
  plugins: ['stylelint-order'],
  extends: [
    'stylelint-config-html/html',
    'stylelint-config-html/vue',
    'stylelint-config-recommended-vue',
    'stylelint-config-prettier',
    'stylelint-config-rational-order'
  ],
  customSyntax: 'postcss-less',
  ignoreFiles: [
    '**/*.js',
    '**/*.jsx',
    '**/*.tsx',
    '**/*.ts',
    'assets/styles/normalize.css'
  ],
  rules: {
    'function-no-unknown': null,
    'selector-class-pattern': null,
    'color-function-notation': 'legacy',
    'alpha-value-notation': 'number',
    'value-keyword-case': [
      'lower',
      {
        ignoreFunctions: ['v-bind', 'var']
      }
    ],
    'at-rule-no-unknown': null,
    'font-family-no-missing-generic-family-keyword': null,
    'declaration-block-trailing-semicolon': null,
    'selector-pseudo-element-colon-notation': null,
    'font-family-name-quotes': null,
    'declaration-colon-newline-after': null,
    'property-no-vendor-prefix': null
  },
  overrides: [
    {
      files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
      customSyntax: 'postcss-html',
      rules: {
        'selector-pseudo-class-no-unknown': [
          true,
          {
            ignorePseudoClasses: ['deep']
          }
        ],
        'selector-pseudo-element-no-unknown': [
          true,
          {
            ignorePseudoElements: ['v-deep', 'v-bind']
          }
        ]
      }
    },
    {
      files: ['*.less', '**/*.less'],
      customSyntax: 'postcss-less'
    }
  ]
}

.stylelintignore 忽略文件

.stylelintignore 用来配置不需要通过 stylelint 约束的文件

# 其他类型文件
*.js
*.ts
*.jpg
*.woff
*.yaml
*.md
# 测试和打包目录
/test/*
/dist/*
/public/*
public/*
/node_modules/
/.nuxt/*
/.output/*
.eslintignore
/src/assets/styles/normalize.css

package.json 配置命令

"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",

vscode 设置保存时自动格式化

至此，ESLint & Prettier & Stylelint 已经配置完成，我们可以再配置 vscode 保存时自动格式化

"editor.codeActionsOnSave": {
  "source.fixAll": true
},
"eslint.options": {
  "extensions": [
    ".js",
    ".vue",
    ".ts"
  ]
},
"eslint.validate": [
  "javascript",
  "vue",
  "typescript",
  "html",
  "vue-html"
],
"eslint.workingDirectories": [
  ".eslintrc.js",
  {
    "mode": "auto"
  }
],
"eslint.nodePath": "",
"eslint.alwaysShowStatus": true,
"editor.quickSuggestions": {
  "strings": true
},
"stylelint.validate": [
  "vue",
  "less",
  "css",
  "html",
  "scss",
  "sass"
],
"editor.tabSize": 2,