代码仓库初始化模板 (9) -- Stylelint

发表于 更新于 分类于 阅读次数：

目录

Stylelint 样式代码检查工具。

安装

1
npm install --save-dev stylelint stylelint-config-recommended stylelint-config-standard stylelint-order stylelint-config-rational-order postcss-less postcss-html stylelint-config-prettier stylelint-config-recommended-vue stylelint-config-html

配置

在代码仓库根目录下添加文件:

.stylelintrc.jsview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-standard',
    'stylelint-config-rational-order',
    'stylelint-config-prettier',
    'stylelint-config-html',
    'stylelint-config-recommended-vue',
  ],
  plugins: ['stylelint-order', 'stylelint-config-rational-order/plugin'],
  rules: {},
  overrides: [
    {
      files: ['*.less', '**/*.less'],
      customSyntax: 'postcss-less',
    },
    {
      files: ['*.html', '**/*.html'],
      customSyntax: 'postcss-html',
    },
    {
      files: ['*.vue', '**/*.vue'],
      customSyntax: 'postcss-html',
    },
  ],
  reportDescriptionlessDisables: [true, { except: [] }],
  reportNeedlessDisables: true,
};
.stylelintignoreview raw
1
2
3
node_modules
dist
dist-web

添加命令

修改 package.json :

1
2
3
4
5
{
  "scripts": {
    "stylelint": "stylelint \"**/*.{vue,htm,html,css,sss,less,scss,sass}\""
  }
}

添加 IDE 检查项

修改 .vscode/settings.json

1
2
3
{
  "stylelint.validate": ["css", "less", "scss", "html", "vue", "svelte", "astro"]
}