stylelint最佳实践

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

npm i stylelint stylelint-config-standard -D

# 以下视情况进行安装
npm i postcss-scss postcss-less -D

# 如果是vue项目，需要安装
npm i stylelint-config-recommended-vue -D

// https://stylelint.io/user-guide/get-started

module.exports = {
  extends: [
    'stylelint-config-standard',
    // 如果是vue项目，需要添加
    'stylelint-config-recommended-vue',
  ],
  // rule覆盖（根据自己喜好来配置）
  rules: {
    'string-quotes': 'single',
    'property-no-vendor-prefix': null,
    'declaration-colon-newline-after': null,
    'value-list-comma-newline-after': null,
    'custom-property-pattern': null,
    'color-hex-length': 'short',
    'color-function-notation': null,
    'alpha-value-notation': null,
    'value-no-vendor-prefix': null,
    'selector-class-pattern': null,
    'function-url-quotes': null,
    'no-missing-end-of-source-newline': true,
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
  },
  overrides: [
    // 若项目中存在scss文件，添加以下配置
    {
      files: '**/*.scss',
      customSyntax: 'postcss-scss',
    },
    // 若项目中存在less文件，添加以下配置
    {
      files: '**/*.less',
      customSyntax: 'postcss-less',
    },
  ]
};

npm set-script prepare "husky install"

# 如果配置了commit-lint，可以去掉yarn关键字
npx husky add .husky/pre-commit "yarn lint-staged --allow-empty"

npm i husky lint-staged -D

{
  "scripts": {
    "stylelint": "stylelint **/*.{css,less,scss,vue}"
  },
  "devDependencies": {
    "husky": "^7.0.4",
    "lint-staged": "^12.3.7"
  },
  "lint-staged": {
    "**/*.{css,less,scss,vue}": [
      "stylelint --fix"
    ]
  }
}

npm i @commitlint/cli @commitlint/config-conventional cz-customizable -D

{
  "scripts": {
    "commit": "node ./node_modules/cz-customizable/standalone.js"
  }
}

#!/bin/sh

# shellcheck source=./_/husky.sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['Feat', 'Fix', 'Doc', 'Style', 'Update', 'Chore', 'Refactor', 'Test', 'Framework', 'Revert'],
    ],
    'type-case': [0, 'always', 'start-case'],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
};

module.exports = {
  types: [
    { value: 'Feat', name: '特性:    一个新的特性' },
    { value: 'Update', name: '更新:   更新一个功能' },
    { value: 'Fix', name: '修复:    修复一个Bug' },
    { value: 'Style', name: '样式:    变更的只有样式' },
    { value: 'Doc', name: '文档:    变更的只有文档' },
    { value: 'Refactor', name: '重构:    代码重构，注意和特性、修复区分开' },
    { value: 'Test', name: '测试:    添加一个测试' },
    { value: 'Framework', name: '框架:    开发框架变动(构建、脚手架工具等)' },
    { value: 'Revert', name: '回滚:    代码回退' }
  ],
  scopes: [
    { name: '系统框架' },
    { name: '公共组件' },
  ],
  allowTicketNumber: false,
  isTicketNumberRequired: false,
  ticketNumberPrefix: 'TICKET-',
  ticketNumberRegExp: '\\d{1,5}',

  // override the messages, defaults are as follows
  messages: {
    type: '选择一种你的提交类型:',
    scope: '选择一个scope (可选):',
    // used if allowCustomScopes is true
    customScope: 'Denote the SCOPE of this change:',
    subject: '短说明:\n',
    body: '长说明，使用"|"换行(可选)：\n',
    breaking: '非兼容性说明 (可选):\n',
    footer: '关联关闭的issue，例如：#31, #34(可选):\n',
    confirmCommit: '确定提交说明?'
  },

  allowCustomScopes: true,
  // skip any questions you want
  skipQuestions: ['body'],

  // limit subject length
  subjectLimit: 72,
};

npm run prepare

npm i stylelint-prettier stylelint-config-prettier -D

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "insertPragma": false
}

module.exports = {
  extends: [
    'stylelint-prettier/recommended',
  ],
};

mkdir .vscode

{
  "recommendations": [
    "stylelint.vscode-stylelint"
  ]
}

{
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": [
    "css",
    "postcss",
    "less",
    "scss",
    "sass",
    "vue"
  ]
}