本文轉載于SegmentFault社區

作者：Lewis92

---

前言

stylelint 是一個強大和現代的 CSS 審查工具，有助于開發者推行統一的代碼規范，避免樣式錯誤。其支持 less、sass 這類預處理器，目前 stylelint 有一百多條校驗規則，并且還在逐步增加。

---

一、stylelint 具體什么作用

stylelint 有一百多條校驗規則, 這些規則可以分為三類：

• 用于校對風格的規則：針對空格(比如說冒號附近的空格)、換行、縮進等等。

• 用于判別代碼可維護性的規則：判斷在CSS選擇器中是否有使用某個ID，或者在某條聲明當中是否應用了important關鍵詞。

• 用于判斷代碼錯誤的規則：檢測錯誤的HEX顏色寫法或者某條簡寫屬性是否會覆蓋其他的聲明語句。

---

二、安裝依賴

1.安裝 stylelint

npm i -D stylelint stylelint-config-stand

2.安裝適配預處理語法的插件，以 sass 為例：

npm i -D stylelint-scss

3.安裝 webpack 插件

npm i -D stylelint-webpack-plugin

---

三、通過 npm 命令運行

// package.json{ "scripts": { "lint:css": "stylelint **/*.{html,vue,css,sass,scss,less}" }}

可以手動在命令行運行：

npm run lint:css

---

四、通過 webpack 插件運行

// vue.config.jsconst StyleLintPlugin = require('stylelint-webpack-plugin');module.exports = { ... configureWebpack: { plugins: [new StyleLintPlugin({ files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'], fix: false, // 是否自動修復 cache: true, // 是否緩存 emitErrors: true, failOnError: false, })], },};

---

五、編寫配置

按以下順序查找，任何一項有值，就會結束查找

1.在 package.json 中的 stylelint 屬性指定規則

2.在 .stylelintrc 文件中指定，文件格式可以是 JSON 或 YAML。也可以給該文件加擴展名，.stylelintrc.json、 .stylelintrc.yaml、 .stylelintrc.yml、 .stylelintrc.js。

3.stylelint.config.js 文件，該文件 exports 一個配置對象

rules

默認情況下未打開任何規則，也沒有默認值。必須明確配置每個規則才能將其打開

defaultSeverity

只支持 “warning" 和 ”error" 兩種，用于定義全局默認的報錯等級

extends

可以擴展現有配置(無論是自己的配置還是第三方配置)

plugins

插件是社區構建的規則或規則集，支持方法，工具集，非標準 CSS功能或非常特定的用例。

processors

處理器是由社區構建的功能，它們掛接到stylelint的管道中，在其進入stylelint的過程中修改代碼，并在其退出時修改結果。

我們不鼓勵使用內置語法因為處理器與autofix功能不兼容。

ignoreFiles

忽略特定文件，node_modules 是默認情況下忽略的目錄。但是，如果 ignoreFiles 設置了，則將其覆蓋。

注意: 這不是忽略大量文件的有效方法。如果您想有效地忽略很多文件，請使用 .stylelintignore 或調整文件范圍。

// stylelint.config.jsmodule.exports = { defaultSeverity: 'error', extends: ['stylelint-config-standard'], // 官方推薦 rules: { },};

---

六、忽略文件

在項目跟目錄添加.stylelintignore 文件，配置規則與 .gitignore 、.eslintignore 規則一樣。

# .stylelintignore# 舊的不需打包的樣式庫*.min.css# 其他類型文件*.js*.jpg*.png*.eot*.ttf*.woff*.json# 測試和打包目錄/test//dist/

---

七、stylelint 與 eslint 同時使用 git-hooks 配置

// package.json{ ... "lint-staged": { "*.{html,vue,css,sass,scss,less}": [ "npm run lint:css" ] }， "gitHooks": { "pre-commit": "lint-staged" },}

-?END -

總結

以上是生活随笔為你收集整理的rules不显示 vue_使用stylelint规范vue项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。