vscode使用stylelint儲存自動格式化程式碼

songxianling1992發表於2023-05-05
VSCode

為什麼要做

怎麼做

1. vscode配置

  1. 安裝編譯器外掛
    image.png
  2. 配置setting.json
    在.vscode/settings.json中新增配置項
"editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true,
        "source.fixAll": true,
    },
    // stylelint配置
    "stylelint.enable": true,
    // 關閉編輯器內建樣式檢查（避免與stylelint衝突）
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
  1. 配置 stylelint.config.js 規範
    在根目錄新建stylelint.config.js檔案；並新增如下內容
module.exports = {
  root: true,
  plugins: ['stylelint-prettier'],
  extends: ['stylelint-config-standard', 'stylelint-config-standard-vue', 'stylelint-config-rational-order', 'stylelint-config-prettier'],
  // https://stylelint.docschina.org/user-guide/rules/
  customSyntax: 'postcss-html',
  overrides: [
    {
      files: ['**/*.vue'],
      customSyntax: 'postcss-scss'
    }
  ],
  rules: {
    'number-leading-zero': false,
    'alpha-value-notation': false,
    'color-function-notation': false,
    'no-eol-whitespace': false,
    'function-no-unknown': null,
    'selector-class-pattern': null,
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global']
      }
    ],
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ],
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen', 'function', 'if', 'each', 'include', 'mixin']
      }
    ],
    'no-empty-source': null,
    'string-quotes': null,
    'named-grid-areas-no-invalid': null,
    'unicode-bom': 'never',
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
    'declaration-colon-space-after': 'always-single-line',
    'declaration-colon-space-before': 'never',
    // 'declaration-block-trailing-semicolon': 'always',
    'rule-empty-line-before': [
      'always',
      {
        ignore: ['after-comment', 'first-nested']
      }
    ],
    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
    'order/order': [
      [
        'dollar-variables',
        'custom-properties',
        'at-rules',
        'declarations',
        {
          type: 'at-rule',
          name: 'supports'
        },
        {
          type: 'at-rule',
          name: 'media'
        },
        'rules'
      ],
      { severity: 'warning' }
    ]
  }
}
  1. 設定 stylelint 忽略問題
    在根目錄新建 .stylelintignore 檔案；新增內容
/dist/*
/public/*
public/*

2. 安裝依賴

npm i stylelint stylelint-config-prettier stylelint-config-rational-order stylelint-config-standard stylelint-config-standard-vue stylelint-order stylelint-prettier -D
  • stylelint-config-rational-order 處理css屬性間的順序（Stylelint 配置透過按順序組合在一起對相關屬性宣告進行排序： 定位 盒子模型 排版 視覺的 動畫片 雜項 ---npm介紹）
  • stylelint-config-prettier 禁用所有與格式相關的 Stylelint 規則，解決 prettier 與 stylelint 規則衝突，確保將其放在 extends 佇列最後，這樣它將覆蓋其他配置。
  • stylelint-config-standard：stylelint官方共享的標準規則整合
  • stylelint-config-standard-vue[/scss]: vue標準配置，透過overrides選項調整了.vue檔案樣式規則，繼承了stylelint-config-standard[-scss]和stylelint-config-recommended-vue[/scss]規則

實現了什麼

儲存自動格式化css樣式先後順序
gif

相關文章