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

songxianling1992發表於2023-05-05
VSCode

為什麼要做

css樣式的書寫順序及原理——很重要！很重要！很重要！ 瀏覽器的渲染原理：reflow和repaint
  1. 解析html檔案構建dom樹，解析css檔案構建cssom
  2. 結合dom樹和cssom生成渲染樹
  3. 根據渲染樹進行layout（佈局）和paint（渲染）

在步驟3，生成渲染樹的過程中，瀏覽器會從根節點（html節點）開始遍歷每個樹節點的css樣式進行解析。在解析過程中，如果某個元素的定位變化影響了佈局。則要倒回去重新渲染。

// 例如
.box{
    width: 100px; 
    height: 100px; 
    background-color: #ddd; 
    position: absolute; 
    /*當瀏覽器解析到position為absolute時，發現需要脫離文件流而不是在文件流中渲染時，
      會倒回去重新渲染*/
}

為何選stylelint

  • 其支援 Less、Sass 這類前處理器；
  • 在社群活躍度上，有非常多的 第三方外掛

  • 在 Facebook，Github，WordPress 等公司得到實踐，能夠覆蓋很多場景。

    怎麼做

    1. vscode配置

  • 安裝編譯器外掛
    image.png
  • 配置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"],

2. 相關程式碼

  1. 安裝依賴

    npm i stylelint stylelint-config-rational-order stylelint-config-recommended-vue stylelint-config-standard-scss stylelint-prettier -D
  • stylelint-config-rational-order 處理css屬性間的順序（Stylelint 配置透過按順序組合在一起對相關屬性宣告進行排序： 定位 盒子模型 排版 視覺的 動畫片 雜項 ---npm介紹）
  • stylelint-config-standard-scss：scss樣式擴充
  • stylelint-config-recommended-vue[/scss]: vue標準配置，透過overrides選項調整了.vue檔案樣式規則，繼承了stylelint-config-standard[-scss]和stylelint-config-recommended-vue[/scss]規則
  • stylelint-prettier：將 prettier 作為 stylelint的規則來使用，程式碼不符合 Prettier 的標準時，會報一個 stylelint錯誤，同時也可以透過 stylelint --fix 來進行格式化，外掛遵循prettier的配置
  1. 配置 stylelint.config.js 規範
    在根目錄新建stylelint.config.js檔案；並新增如下內容
module.exports = {
  root: true,
  plugins: ['stylelint-prettier'],
  extends: ['stylelint-config-standard-scss', 'stylelint-config-rational-order', 'stylelint-config-recommended-vue'],
  // https://stylelint.docschina.org/user-guide/rules/
  customSyntax: 'postcss-html',
  overrides: [
    {
      files: ['**/*.vue'],
      customSyntax: 'postcss-html'
    }
  ],
  rules: {
    indentation: 2,
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ],
    'number-leading-zero': 'never',
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
    'selector-type-no-unknown': null,
    'at-rule-no-unknown': null,
    'no-duplicate-selectors': null,
    'no-empty-source': null,
    'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }]
  }
}
  1. 設定 stylelint 忽略問題
    在根目錄新建 .stylelintignore 檔案；新增內容
/dist/*
/public/*
public/*

實現了什麼

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

相關文章