更新了關(guān)于vue-cli3的相關(guān)配置

Stylelint簡(jiǎn)介

stylelint是一個(gè)基于 Javascript 的代碼審查工具，它易于擴(kuò)展，支持最新的 CSS 語(yǔ)法，也理解類(lèi)似 CSS 的語(yǔ)法。此外，因?yàn)樗腔?JavaScript，所以比起 Ruby 開(kāi)發(fā)的 scss-lint 速度更快。

stylelint 是一個(gè)強(qiáng)大和現(xiàn)代的 CSS 審查工具，有助于開(kāi)發(fā)者推行統(tǒng)一的代碼規(guī)范，避免樣式錯(cuò)誤。

stylelint 由 PostCSS 提供技術(shù)支持，所以它也可以理解 PostCSS 解析的語(yǔ)法，比如 SCSS。

PostCSS 是一個(gè)使用 JS 解析樣式的插件集合，它可以用來(lái)審查 CSS 代碼，也可以增強(qiáng) CSS 的語(yǔ)法（比如變量和混合宏），還支持未來(lái)的 CSS 語(yǔ)法、行內(nèi)圖片等等。

PostCSS 的哲學(xué)是專(zhuān)注于處理一件事，并做到極致，目前它已經(jīng)有了 200 多個(gè)插件，由于它們都是基于 JavaScript 編寫(xiě)的，所以運(yùn)行速度非?？?。

Stylelint使用

1.安裝

npm install -g stylelint --save-dev

2.配置

1.本地安裝：

npm install stylelint-config-standard --save-dev

2.在項(xiàng)目中添加配置文件"stylelint.config.js"

module.exports = { 
    extends: ["stylelint-config-standard"] 
}

3.添加或修改標(biāo)準(zhǔn)配置中的內(nèi)容

module.exports = { 
    extends: ["stylelint-config-standard"], 
    rules: { 
        "max-nesting-depth": 2 // 允許嵌套的深度為2
    } 
}

在Vue+Webpack下配置Stylelint

1.Webpack下配置

1.本地安裝stylelint-webpack-plugin：

npm install stylelint-webpack-plugin --save-dev

2.打開(kāi)文件 build/webpack.base.conf.js，并在頂部添加加載插件代碼

var StyleLintPlugin = require('stylelint-webpack-plugin')

在plugins數(shù)組下添加以下代碼：

plugins: [
    //... 
    new StyleLintPlugin({ 
        // 正則匹配想要lint監(jiān)測(cè)的文件
        files: ['src/**/*.vue', 'src/assets/styles/*.l?(e|c)ss'] 
    }),
    //... 
],

更新：vue-cli3下配置

1.本地安裝@ascendancyy/vue-cli-plugin-stylelint：

#需添加新插件
npm install  @ascendancyy/vue-cli-plugin-stylelint --save-dev

2.vue-cli3的vue.config.js需添加以下配置

  pluginOptions: {
    lintStyleOnBuild: true, // 添加了插件(@ascendancyy/vue-cli-plugin-stylelint), 所以需要配置
    stylelint: {
      fix: true, // boolean (default: true)
      files: ['src/**/*.vue', 'src/assets/styles/*.l?(e|c)ss'] // string | [string] (default: ['src/**/*.{vue,htm,html,css,sss,less,scss}'])
      // formatter: () => { } // function (default: require('stylelint-codeframe-formatter'))
      // etc...
    }
  }

2.若在Vue文件下進(jìn)行stylelint校驗(yàn)，則需要：

1.本地安裝 stylelint-processor-html（若需要第3步校驗(yàn)css屬性順序，可忽略此插件）：

npm install stylelint-processor-html --save-dev

2.修改配置文件"stylelint.config.js"

module.exports = { 
    processors: ["stylelint-processor-html"], 
    extends: ["stylelint-config-standard"], 
    rules: {
    } 
}

這樣，當(dāng)項(xiàng)目啟動(dòng)時(shí)，就會(huì)對(duì)vue文件下的css，或者目錄下的css文件進(jìn)行stylelint校驗(yàn)了

3.stylelint 搭配 stylelint-order，可以校驗(yàn) CSS的屬性順序

1.安裝stylelint-order（校驗(yàn)排序） 、css-properties-sorting（自動(dòng)修復(fù)排序，若安裝此插件，需刪除processors: ["stylelint-processor-html"]）

npm i --save-dev stylelint-order css-properties-sorting

2.在"stylelint.config.js"配置文件新增stylelint-order插件，通過(guò)"order/properties-order"定義順序

module.exports = { 
    extends: ["stylelint-config-standard", "css-properties-sorting"], 
    plugins: ["stylelint-order"], // stylelint-order是CSS屬性排序插件
    rules: {
        "order/properties-order"：[]
    } 
}

3.在項(xiàng)目下創(chuàng)建.stylelintignore文件，指明忽略stylelint的文件或目錄

*.js
*.png
*.eot
*.ttf
*.woff

Stylelint 規(guī)則

根據(jù)自己項(xiàng)目規(guī)范，配置需要的規(guī)則。以下是在stylelint-config-standard基礎(chǔ)上，根據(jù)自身項(xiàng)目需求修改出的一些規(guī)則：

module.exports = {
  extends: ["stylelint-config-standard", "css-properties-sorting"],
  plugins: ["stylelint-order"], // stylelint-order是CSS屬性排序插件
  rules: {
    // "color-hex-case": "lower", // 顏色值為小寫(xiě)字母(stylelint-config-standard)
    // "color-no-invalid-hex": true, // 顏色值不能為無(wú)效值(stylelint-config-standard)
    "font-family-name-quotes": "always-where-recommended", // 字體系列中命名時(shí)帶引號(hào)
    "function-url-quotes": "always", // 地址一定要寫(xiě)引號(hào)
    "number-leading-zero": "never", // 要求或分?jǐn)?shù)低于1的數(shù)字禁止前導(dǎo)零
    "number-no-trailing-zeros": true, // 禁止在數(shù)量尾隨零
    "string-quotes": "double", // 指定字串，雙引號(hào)
    "length-zero-no-unit": true, // 禁止單位零長(zhǎng)度。
    "value-keyword-case": "lower", // 指定小寫(xiě)關(guān)鍵字的值
    "value-list-comma-newline-after": "always-multi-line",// 在值列表的逗號(hào)后指定一個(gè)換行符或禁止留有空格
    "shorthand-property-no-redundant-values": true, // 不允許在簡(jiǎn)寫(xiě)屬性冗余值
    // "property-case": "lower", // 為屬性指定小寫(xiě)(stylelint-config-standard)
    "keyframe-declaration-no-important": true, // 不允許!important在關(guān)鍵幀聲明
    // "block-closing-brace-empty-line-before": "never", // 不允許關(guān)閉括號(hào)前空一行(stylelint-config-standard)
    // "block-closing-brace-newline-after": "always", // 需要一個(gè)換行符關(guān)閉括號(hào)后的空白(stylelint-config-standard)
    // "block-opening-brace-newline-after": "always-multi-line", // 開(kāi)括號(hào)的塊之后需要新的一行(stylelint-config-standard)
    "selector-class-pattern": "^[a-z]+([a-z0-9]?|[a-z0-9\\-\\_]*[a-z0-9])$", // 指定一個(gè)模式類(lèi)選擇符，限制選擇器名稱(chēng)寫(xiě)法
    "selector-id-pattern": "^[a-z]+([a-z0-9]?|[a-z0-9\\-\\_]*[a-z0-9])$", // 指定一個(gè)模式，id選擇器，限制選擇器名稱(chēng)寫(xiě)法
    "value-keyword-case": "lower", // 屬性值小寫(xiě)
    "no-empty-source": null, // 不允許空的來(lái)源
    "at-rule-no-unknown": null, // 不允許at-rules不明
    // "indentation": 2, // 指定縮進(jìn)(stylelint-config-standard)
    "max-nesting-depth": 3, // 允許嵌套的深度為3
    "no-duplicate-selectors": true, // 不允許重復(fù)的選擇器
    // "no-eol-whitespace": true, // 不允許行尾空白(stylelint-config-standard)
    // "no-invalid-double-slash-comments": true // 不允許雙斜杠注釋(/ /…)不支持CSS(stylelint-config-standard)
    "order/order": [ // 指定聲明塊內(nèi)的內(nèi)容順序
      ["custom-properties", "declarations"], {
        "disableFix": true
      }
    ],
    "order/properties-order": [ // 指定聲明塊內(nèi)屬性的字母順序
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'float',
      'width',
      'height',
      'max-width',
      'max-height',
      'min-width',
      'min-height',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'margin-collapse',
      'margin-top-collapse',
      'margin-right-collapse',
      'margin-bottom-collapse',
      'margin-left-collapse',
      'overflow',
      'overflow-x',
      'overflow-y',
      'clip',
      'clear',
      'font',
      'font-family',
      'font-size',
      'font-smoothing',
      'osx-font-smoothing',
      'font-style',
      'font-weight',
      'hyphens',
      'src',
      'line-height',
      'letter-spacing',
      'word-spacing',
      'color',
      'text-align',
      'text-decoration',
      'text-indent',
      'text-overflow',
      'text-rendering',
      'text-size-adjust',
      'text-shadow',
      'text-transform',
      'word-break',
      'word-wrap',
      'white-space',
      'vertical-align',
      'list-style',
      'list-style-type',
      'list-style-position',
      'list-style-image',
      'pointer-events',
      'cursor',
      'background',
      'background-attachment',
      'background-color',
      'background-image',
      'background-position',
      'background-repeat',
      'background-size',
      'border',
      'border-collapse',
      'border-top',
      'border-right',
      'border-bottom',
      'border-left',
      'border-color',
      'border-image',
      'border-top-color',
      'border-right-color',
      'border-bottom-color',
      'border-left-color',
      'border-spacing',
      'border-style',
      'border-top-style',
      'border-right-style',
      'border-bottom-style',
      'border-left-style',
      'border-width',
      'border-top-width',
      'border-right-width',
      'border-bottom-width',
      'border-left-width',
      'border-radius',
      'border-top-right-radius',
      'border-bottom-right-radius',
      'border-bottom-left-radius',
      'border-top-left-radius',
      'border-radius-topright',
      'border-radius-bottomright',
      'border-radius-bottomleft',
      'border-radius-topleft',
      'content',
      'quotes',
      'outline',
      'outline-offset',
      'opacity',
      'filter',
      'visibility',
      'size',
      'zoom',
      'transform',
      'box-align',
      'box-flex',
      'box-orient',
      'box-pack',
      'box-shadow',
      'box-sizing',
      'table-layout',
      'animation',
      'animation-delay',
      'animation-duration',
      'animation-iteration-count',
      'animation-name',
      'animation-play-state',
      'animation-timing-function',
      'animation-fill-mode',
      'transition',
      'transition-delay',
      'transition-duration',
      'transition-property',
      'transition-timing-function',
      'background-clip',
      'backface-visibility',
      'resize',
      'appearance',
      'user-select',
      'interpolation-mode',
      'direction',
      'marks',
      'page',
      'set-link-source',
      'unicode-bidi',
      'speak'
    ]
  }
};

具體的規(guī)則以及例子可以查看以下文檔：
stylelint 的官方配置文檔 、Example config
CSS屬性順序

參考：
使用stylelint對(duì)CSS/Sass做代碼審查
A nice way to lint .vue files with Stylelint?
Linting CSS in Vue files
"declaration-block-properties-order" rule is not the same rule that stylelint uses.
更新補(bǔ)充vue-cli3：
vue-cli-plugin-stylelint插件 git地址
Support of style lint
vue單文件組件lint error自動(dòng)fix及styleLint報(bào)錯(cuò)自動(dòng)fix

原文：
如何在Vue+Webpack下配置Stylelint