Webank Stylelint 规则

stylelint 是一个基于 Javascript 的代码审查工具，它易于扩展，支持最新的 CSS 语法，也理解类似 CSS 的语法。

没有规矩不成方圆，统一优雅的代码规范能够：提升维护代码效率，及多人协作维护效率，避免明显的错误。

规则描述

在线浏览规则描述及示例：Stylelint Rules 中英对照版

SCSS规则描述

在线浏览SASS/SCSS规则描述及示例：stylelint-scss

使用方法

安装

npm i -D @webank/stylelint-config-webank

基本规则

在项目根目录下创建 .stylelintrc.js，并将以下内容复制到文件中：

module.exports = {
    extends: ['@webank/stylelint-config-webank'],
    rules: {
        // 这里填入你的项目需要的个性化配置，比如：

        // @fixable 一个缩进必须用两个空格替代
        // indentation: [2, { severity: 'error' } ]
    },
};

Less规则

在项目根目录下创建 .stylelintrc.js，并将以下内容复制到文件中：

module.exports = {
    extends: ['@webank/stylelint-config-webank/less.js'],
    rules: {
        // 这里填入你的项目需要的个性化配置，比如：

        // @fixable 一个缩进必须用两个空格替代
        // indentation: [2, { severity: 'error' } ]
    },
};

SCSS规则

在项目根目录下创建 .stylelintrc.js，并将以下内容复制到文件中：

module.exports = {
    extends: ['@webank/stylelint-config-webank/scss.js'],
    rules: {
        // 这里填入你的项目需要的个性化配置，比如：

        // @fixable 一个缩进必须用两个空格替代
        // indentation: [2, { severity: 'error' } ]
    },
};

Vue & Less项目

在项目根目录下创建 .stylelintrc.js，并将以下内容复制到文件中：

module.exports = {
    extends: ['@webank/stylelint-config-webank/vue.js', '@webank/stylelint-config-webank/less.js'],
    rules: {
        // 这里填入你的项目需要的个性化配置，比如：

        // @fixable 一个缩进必须用两个空格替代
        // indentation: [2, { severity: 'error' } ]
    },
};

编辑器

VSCode 插件

搜索并安装：Stylelint

在 VSCode 中使用 stylelint 需要 「 扩展 > 搜索 Stylelint > 安装 」，按照提示重新加载窗口即可以使用。

VSCode 配置

在 VSCode 中按下快捷键：Ctrl + Shift + P，搜索：setting.json - 首选项：打开设置（json），在配置中添加如下配置，可以在保存的时候自动修复。

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

参考

• stylelint - 中文
• stylelint规则 - 中英对照
• 腾讯云社区 Stylelint 用户指南
• Bootstrap stylelint