Vue2.7 + Vite+ Eslint、Stylelint、Commitlint 统一开发规范 + husky + lint-staged （git commit 时自动格式化代码） + Vue 全家桶集成 + Axios 封装及接口管理 https://juejin.cn/post/7118700020911570974

2.8 KiB

Raw Blame History

Stylelint CSS 格式化

Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。

安装依赖

stylelint - Stylelint 本体
stylelint-config-prettier- 关闭 Stylelint 中与 Prettier 中会发生冲突的规则。
stylelint-config-rational-order - 对 CSS 声明进行排序
stylelint-config-standard- Stylelint 官方推荐规则
stylelint-order 使用 stylelint-config-rational-order 时依赖的模块

pnpm add stylelint stylelint-config-prettier stylelint-config-rational-order stylelint-config-standard stylelint-order -D

添加 StyleLint 配置文件

在根目录添加一个 .stylelintrc.js 文件，内容如下：

module.exports = {
  root: true,
  extends: [
    'stylelint-config-standard',
    'stylelint-config-rational-order',
    'stylelint-config-prettier'
  ],
  defaultSeverity: 'warning',
  plugins: ['stylelint-order'],
  rules: {
    'no-empty-source': null,
    'selector-class-pattern': null
  }
}

在根目录添加一个 .stylelintignore 文件，内容如下：

public
dist

启用 Vue 文件支持

stylelint v14 版本默认是不支持 vue 文件中的 style 代码自动检测，详情我们可以查看官方迁移指南，具体配置如下：

stylelint-config-html 解析 vue 文件
postcss-html 使用 stylelint-config-html 依赖的模块
postcss-less 对 less 文件进行解析

pnpm add stylelint-config-html postcss-html postcss-less -D

修改 .stylelintrc.js 文件：

module.exports = {
  root: true,
  extends: [
    'stylelint-config-standard',
    'stylelint-config-rational-order',
    'stylelint-config-prettier',
    'stylelint-config-html/vue' // 需要放在最后一位
  ],
  defaultSeverity: 'warning',
  plugins: ['stylelint-order'],
  rules: {
    'no-empty-source': null,
    'selector-class-pattern': null
  },
  overrides: [
    {
      files: ['*.vue', '**/*.vue'],
      rules: {
        'selector-pseudo-class-no-unknown': [
          true,
          {
            ignorePseudoClasses: ['deep', 'global']
          }
        ],
        'selector-pseudo-element-no-unknown': [
          true,
          {
            ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted']
          }
        ]
      }
    }
  ]
}

在 VSCode 工作区配置中，添加如下代码：

{
  "stylelint.validate": ["vue"] // Add "vue" language.
}

2.8 KiB Raw Blame History

Stylelint CSS 格式化

2.8 KiB

Raw Blame History