# CSS 规范

CSS 规范的目的在于使我们的 CSS 代码更加易于维护和重用，同时也适用于各种 CSS 预处理器。

stylelint 是一个强大的现代 CSS 检测器，可以让你在样式表中遵循一致的约定和避免错误。Styelint 由 PostCSS 提供支持，所以它能理解 PostCSS 可以解析的任何语法，包括 SCSS、SugarSS 和 Less 的实验特性。

# 快速使用

npm i stylelint @startdt/stylelint-config --save-dev

提示：无需在项目中安装 stylelint-order、stylelint-config-* 以及其他第三方依赖。

使用配置文件：

// .stylelintrc.js
module.exports = {
    extends: '@startdt/stylelint-config',
    rules: {
        // 自定义规则
    },
};

或者项目属性：

// package.json
"stylelint": {
    "extends": "@startdt/stylelint-config",
    "rules": {}
}

# 自动检查

# 保存时检查

首先，你需要安装官方提供的 Stylelint 扩展：stylelint.vscode-stylelint

安装之后，在 .vscode/settings.json 中配置自动修复：

{
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    }
}

为了防止编辑器内置的 CSS 校验与 stylelint 扩展冲突，建议禁用用户或工作区设置中的验证：

{
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
}

完成后，在 Visual Studio Code 中使用 command + s 保存文件时，将自动进行代码检查。

# 提交时检查

首先，你需要安装 husky 和 lint-staged 依赖，以便在执行 git commit 时对 Git 暂存区文件进行代码检查：

npm install husky lint-staged --save-dev

如果你已经安装了 @next/cli-service，则无需单独安装 husky 依赖。因为它会安装 yorkie，同样可以让你在 package.json 的 gitHooks 字段中方便地配置钩子。

安装之后，在 package.json 中添加 pre-commit 和 lint-staged 配置：

{
    "gitHooks": {
        "pre-commit": "lint-staged"
    },
    "lint-staged": {
        "*.{vue,css,less}": [
            "stylelint --fix",
            "git add"
        ]
    }
}

完成后，执行 git commit 提交时，将自动对 git add 添加的文件进行代码检查。

# 语法解析

stylelint 默认支持 css、css-in-js、html、less、markdown、sass、scss、sugarss 语法，你可以使用 --syntax 选项强制使用特定语法。如果未指定，将自动推断语法。

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成 CSS 的程序，大多数 CSS 预处理器会增加一些原生 CSS 不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让 CSS 的结构更加具有可读性且易于维护。目前最流行的 CSS 预处理器： Sass、Less、Stylus、PostCSS 等。

我们通过 stylelint-plugin-stylus 插件提供了 stylus 语法支持，使用 --custom-syntax 自定义语法：

stylelint ... --custom-syntax @startdt/stylelint-config/styl-syntax

如果想要 Visual Studio Code 支持 stylus 语法提示和校验，在 .vscode/settings.json 中配置自定义语法：

{
    "stylelint.customSyntax": "@startdt/stylelint-config/styl-syntax",
    "stylelint.validate": [
        // ...
        "stylus"
    ],
    "stylelint.snippet": [
        // ...
        "stylus"
    ],
}

# 代码风格

# 错误级别

默认情况下，所有启用的规则都是 "error" 级别的严重程度；
已启用规则，且支持 --fix 选项自动修复的规则都是 "warning" 级别的严重程度;
未启用规则，默认将值设置为 null 进行显式配置，不产生任何错误信息；
继承的规则，包括插件的规则都遵循以上错误级别；

HTML 规范 JS 规范