项目规范之stylelint

Stylelint

一个强大的现代 linter，可帮助您避免错误并在您的样式中强制执行约定。

Linting CSS files

1. 安装Stylelint的标准配置

npm install --save-dev stylelint stylelint-config-standard

2. 在项目的根目录下创建一个配置文件 .stylelintrc.json ，并添加以下内容

//  .stylelintrc.json
{
  "extends": "stylelint-config-standard"
}

3. 对整个项目的css 文件运行stylelint

npx stylelint "**/*.css"

如果你附带使用格式化插件，你应该关闭任何冲突的规则。 例如，您可以使用 Prettier 的共享配置来做到这一点：

npm install --save-dev stylelint-config-prettier

//  .stylelintrc.json
{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

配置scss

我们建议扩展一个共享配置，其中包含适合您首选语言或库的语法。 例如，您可以将 stylelint-config-standard-scss 共享配置扩展为 lint SCSS。

1. 安装依赖

npm install --save-dev stylelint stylelint-config-standard-scss

2. 在项目的根目录下创建一个配置文件 .stylelintrc.json ，并添加以下内容

// .stylelintrc.json
{
  "extends": "stylelint-config-standard-scss"
}

3. 对整个项目的css 文件运行stylelint

npx stylelint "**/*.scss"

此配置包括 postcss-scss 语法，配置 SCSS 的内置规则，并包括 stylelint-scss 插件（特定于 SCSS 的规则集合）。
如果你使用 Prettier 和 Stylelint，你应该使用他们的 SCSS 共享配置：

npm install --save-dev stylelint-config-prettier

// .stylelintrc.json
{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-prettier-scss"
  ]
}

其他共享配置:
stylelint-config-html
stylelint-config-recommended-vue
stylelint-order的顺序说明
stylelint常用插件
stylelint官网