Stylelint Config of Project

安装

# pnpm
pnpm add stylelint @gx-web/stylelint-config postcss postcss-html -D
# npm
npm i stylelint @gx-web/stylelint-config postcss postcss-html -D
# yarn
yarn add stylelint @gx-web/stylelint-config postcss postcss-html -D

注意须知

需要以下同等依赖, 请手动安装

• postcss
• postcss-html

在pnpm进行管理依赖时, 需要配置.npmrc

# 默认配置
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*

# 添加配置
public-hoist-pattern[]=*stylelint*

配置使用

// stylelint.config.mjs
export default {
  extends: ['@gx-web/stylelint-config'],
  // 拓展规则
  rules: {},
  // 忽略文件
  ignoreFiles: []
}

格式化配置

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  },
  "stylelint.validate": [
    "html",
    "css",
    "scss",
    "vue"
  ],
  "scss.lint.unknownAtRules": "ignore"
}

格式化命令

// package.json
{
  "scripts": {
    "lint:stylelint": "stylelint --fix './src/**/*.{css,scss,vue}'"
  }
}

命令参数说明

• --fix
  • 此项指示 ESLint 尝试修复尽可能多的问题。这些修复是对实际文件本身进行的，只有剩余的未修复的问题才会被输出
• './src/**/*.{css,scss,vue}'
  • 格式化目录, 支持目录, 文件名

其余命令可参考官方