zqy233的前端学习笔记

主题

回到顶部
索引

stylelint

官方文档 https://github.com/stylelint/stylelint/blob/main/docs/user-guide/get-started.md

stylelint相关列表 https://github.com/stylelint/awesome-stylelint#readme

stylelint是css格式化工具

stylelint-config-standard是其通用标准

格式化css

sh
pnpm i -D stylelint stylelint-config-standard

pnpm i -D stylelint stylelint-config-standard

根目录创建配置文件.stylelintrc.json

json
{
  "extends": "stylelint-config-standard"
}

{
  "extends": "stylelint-config-standard"
}

进行格式化

sh
npx stylelint "**/*.css"

npx stylelint "**/*.css"

scss

sh
pnpm i -D stylelint stylelint-config-standard-scss

pnpm i -D stylelint stylelint-config-standard-scss
json
{
  "extends": "stylelint-config-standard-scss"
}

{
  "extends": "stylelint-config-standard-scss"
}
sh
npx stylelint "**/*.scss"

npx stylelint "**/*.scss"

自动修复

命令行加入--fix

sh
npx stylelint "**/*.css" --fix

npx stylelint "**/*.css" --fix

vscode-stylelint

实际开发中，肯定不会输命令行，可以使用vscode插件做自动修复，需要安装vscode-stylelint，并设置vscode的settings.json

保存时自动格式化

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

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

避免与vscode的样式校验冲突

json
"css.validate": false,
"less.validate": false,
"scss.validate": false

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

配置校验范围

json
 "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "sass",
    "vue"
  ],

 "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "sass",
    "vue"
  ],

如何不使用配置文件

设置一个空对象，就不会使用配置文件了（可以用于开发时不更改，git钩子时再进行修复）

js
 "stylelint.config": {
  },

 "stylelint.config": {
  },

搭配lint-staged

package.json新增命令

json
"scripts": {
   "style-lint": "stylelint src/**/*.{css,sass,scss,less,vue}",
   "style-lint:fix": "stylelint src/**/*.{css,sass,scss,less,vue} --fix",
},

"scripts": {
   "style-lint": "stylelint src/**/*.{css,sass,scss,less,vue}",
   "style-lint:fix": "stylelint src/**/*.{css,sass,scss,less,vue} --fix",
},
json
"lint-staged": {
   "*.{css,sass,scss,less,vue}": [
      "pnpm run style-lint"
   ]
},

"lint-staged": {
   "*.{css,sass,scss,less,vue}": [
      "pnpm run style-lint"
   ]
},

配置文件格式

支持以下格式

  • package.json中的stylelint 属性
  • .stylelintrc
  • .stylelintrc.{cjs,js,json,yaml,yml}
  • stylelint.config.{cjs,js}

支持vue识别

SH
pnpm i -D postcss-html stylelint-config-recommended-vue

pnpm i -D postcss-html stylelint-config-recommended-vue

错误的写法，这样vue可以正常格式化，但css会失效

js
module.exports = {
    extends: [
        'stylelint-config-standard',
        'stylelint-config-recommended-vue',
    ],
    customSyntax: 'postcss-html',
}

module.exports = {
    extends: [
        'stylelint-config-standard',
        'stylelint-config-recommended-vue',
    ],
    customSyntax: 'postcss-html',
}

正确的写法

js
module.exports = {
    extends: [
        'stylelint-config-standard',
        'stylelint-config-recommended-vue',
    ],
    overrides: [
        {
            files: ['*.vue', '**/*.vue'],
            customSyntax: 'postcss-html',
        },
    ],
}

module.exports = {
    extends: [
        'stylelint-config-standard',
        'stylelint-config-recommended-vue',
    ],
    overrides: [
        {
            files: ['*.vue', '**/*.vue'],
            customSyntax: 'postcss-html',
        },
    ],
}

stylelint-order

https://github.com/hudochenkov/stylelint-order

stylelint-order插件用于css属性排序，但是它只提供排序的功能，具体的属性排序规则需要自行配置，所以还是直接用社区提供的一些参考配置吧，免得自己费功夫

参考配置

最多star的是stylelint-config-recess-order，所以随大流就用stylelint-config-recess-order

如何使用stylelint-config-recess-order

SH
pnpm i -D stylelint-config-recess-order

pnpm i -D stylelint-config-recess-order

无需重复安装stylelint-order这个插件，stylelint-config-recess-order内部已经集成了stylelint-order

js
module.exports = {
	extends: ['stylelint-config-recess-order'],
	rules: {
		// Add overrides and additional rules here
	},
}

module.exports = {
	extends: ['stylelint-config-recess-order'],
	rules: {
		// Add overrides and additional rules here
	},
}

rules

列表 https://github.com/stylelint/stylelint/blob/main/docs/user-guide/rules.md

个人配置参考

sh
pnpm i -D stylelint stylelint-config-standard-scss stylelint-config-recess-order stylelint-config-recommended-vue postcss-html

pnpm i -D stylelint stylelint-config-standard-scss stylelint-config-recess-order stylelint-config-recommended-vue postcss-html

stylelint-config-standard-scss

查看源码，这个拓展是基于这两者的，所以安装了这个拓展就不用安装这两者了

js
extends: ['stylelint-config-standard', 'stylelint-config-recommended-scss'],

extends: ['stylelint-config-standard', 'stylelint-config-recommended-scss'],

查看源码，这个拓展是基于这两者的，所以安装了这个拓展就不用安装这两者了

js
extends: ["stylelint-config-recommended", "stylelint-config-html"],

extends: ["stylelint-config-recommended", "stylelint-config-html"],

stylelint-config-recess-order

查看源码，这个插件是基于stylelint-order的，所以安装了这个插件就不用安装stylelint-order了

js
plugins: ['stylelint-order'],

plugins: ['stylelint-order'],

.stylelintrc.js

我一般都用js后缀的配置文件，比较好写注释

js
module.exports = {
    extends: [
        'stylelint-config-standard-scss',
        'stylelint-config-recommended-vue',
        'stylelint-config-recess-order',
    ],
    overrides: [
        {
            files: ['*.vue', '**/*.vue'],
            customSyntax: 'postcss-html',
        },
    ],
    rules: {
        // 不允许重复的选择器（设置为null表示允许重复）
        'no-duplicate-selectors': null,
        // 注释前必须有空行（设置为null表示允许没有空行）
        'comment-empty-line-before': null,
    },
}

module.exports = {
    extends: [
        'stylelint-config-standard-scss',
        'stylelint-config-recommended-vue',
        'stylelint-config-recess-order',
    ],
    overrides: [
        {
            files: ['*.vue', '**/*.vue'],
            customSyntax: 'postcss-html',
        },
    ],
    rules: {
        // 不允许重复的选择器（设置为null表示允许重复）
        'no-duplicate-selectors': null,
        // 注释前必须有空行（设置为null表示允许没有空行）
        'comment-empty-line-before': null,
    },
}

Released under the MIT License.

Copyright © 2022.4-2024.7