前端规范(三)之stylelint

**相关章节**

前端规范(一)之ESlint以及@antfu/eslint-config
前端规范(二)之Prettier
前端规范(三)之stylelint
前端规范(四)之husky+lint-staged+commitizen+commitlint

前端规范stylelint

stylelint 用来检查样式文件 css less sass 等是否符合规范
stylelint中文官网

1. vscode插件安装

相信你肯定已经安装过了

2. 项目中安装相关包

此处介绍几种常用的包

stylelint：核心包
stylelint-config-standard：共享的常见的css书写规范（标准）
stylelint-config-recommended：共享的常见的css书写规范（推荐）
stylelint-config-recommended-scss:推荐的scss增强
stylelint-config-recommended-vue:推荐的vue增强
stylelint-config-prettier：关闭所有不必要的或者有可能与Prettier冲突的规则
stylelint-order：提供给css属性排序的功能
postcss：postcss-html 的依赖包，可以用于转换 css 代码
postcss-html：用于解析 HTML（和类似 HTML）的 PostCSS 语法，可以用于识别 html 或者 vue 中的样式
stylelint-config-html：Stylelint 的可共享 HTML 配置。

npm i -D stylelint stylelint-config-standard stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-prettier stylelint-order postcss postcss-html stylelint-config-html

3. package.json 中配置scripts

 "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint:stylelint": "stylelint --fix src/**/*.{css,less,scss,vue,sass}"
  },

4.创建.stylelintrc.js

module.exports = {
    extends: [
        'stylelint-config-standard',
        'stylelint-config-prettier',
        'stylelint-config-html/vue',
        'stylelint-config-recommended-vue/scss',
        'stylelint-config-recommended-scss',
    ],
    plugins: ['stylelint-order'],
    customSyntax: 'postcss-html',
    ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json',],
    overrides: [
        {
            files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
            extends: ['stylelint-config-recommended'],
            rules: {
                'keyframes-name-pattern': null,
                'selector-pseudo-class-no-unknown': [
                    true,
                    {
                        ignorePseudoClasses: ['deep', 'global'],
                    },
                ],
                'selector-pseudo-element-no-unknown': [
                    true,
                    {
                        ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
                    },
                ],
            },
        },
    ],
};

5. 创建忽略文件.stylelintignore

/dist/*
/public/*
public/*
/node_modules/**

6. 运行命令

npm run lint:stylelint

如下图所示，触发的规则是不允许存在样式空模块，当然你写代码的时候已经触发了stylelint,可以看到有红色的破浪线，无须执行命令

7. 保存的时候自动格式化

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true, //eslint保存的时候触发
        "source.fixAll.stylelint": true //stylelint保存的时候触发
    },
    "editor.formatOnSave": true,//开启保存的时候自动格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode",//指定格式化的插件为Prettier
    "[vue]": {//局部设置，优先级较高，此处的局部设置，是防止用户区设置干扰到工作区设置
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 配置stylelint检查的文件类型范围
    "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "scss",
        "sass",
        "vue"
    ],
    "stylelint.enable": true,//开启stylelint
}

Eslint\Prettier

如果您需要了解Eslint可以查看这篇文章

如果您需要了解Prettier可以查看这篇文章