更多VSCode插件使用請訪問：VSCode常用插件匯總
vscode-stylelint這是一個檢驗CSS/SASS/LESS代碼規范的插件。
StyleLint 使用指南
vscode-stylelint官網
vscode-stylelintt這是VS Code stylelint擴展。
首先簡單說一下使用流程：
1.安裝stylelint庫(在項目本地或全局安裝，看具體項目需要)
2.創建.stylelint.config.js配置文件(手動創建或者復制其它已有配置文件均可，看具體項目需求)
3.根據文檔設置完，保存文件時即可進行eslint修復(MacOS：快捷鍵是 command + s )
安裝
在項目本地或者全局安裝stylelint庫
npm install -d -save-dev stylelint
安裝完stylelint庫，還需要安裝官方提供的stylelint-config-standard校驗校准和一個css便攜順序的插件(先寫定位，再寫盒模型，再寫內容區樣式，最后寫 CSS3 相關屬性)stylelint-config-recess-order（建議安裝到項目本地，否則不好引入到配置文件里面，全局安裝也行，但是不能自定義rules了，各有千秋）
創建配置文件
手動創建或者從同事復制即可。
編輯器設置
為了防止編輯器內置的linter和此車就沖突，可以設置為：
"css.validate": false,
"less.validate": false,
"scss.validate": false
擴展程序設置
1.stylelint.enable
類型：boolean
默認值：true
控制是否啟用此擴展。
2.stylelint.configOverrides
類型：Object
默認值：null
設置stylelint configOverrides選項。
3.stylelint.config
類型：Object
默認值：null
設置stylelint config選項。請注意，啟用此選項后，stylelint不會加載配置文件。
4.stylelint.packageManager
類型："npm" | "yarn" | "pnpm"
默認值："npm"
控制程序包管理器以用於解析stylelint庫。僅當stylelint庫全局解析時，這才有影響。有效值為"npm"or "yarn"或"pnpm"。
5.editor.codeActionsOnSave
此設置支持該條目source.fixAll.stylelint。如果設置為true所有可自動修復的stylelint，則錯誤將在保存時修復。
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
下面的設置為包括stylelint在內的所有提供程序啟用“自動修復”：
"editor.codeActionsOnSave": {
"source.fixAll": true
}
您還可以通過以下方式有選擇地禁用stylelint：
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.stylelint": false
}
您還可以使用VS Code的語言范圍設置來有選擇地啟用和禁用特定語言。要禁用codeActionsOnSaveHTML文件，請使用以下設置：
"[html]": {
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": false
}
}
另請注意，在保存時運行代碼操作的時間預算為750毫秒，這可能不足以容納大型文件。您可以使用該editor.codeActionsOnSaveTimeout設置來增加時間預算。
指令
該擴展將以下命令添加到“命令”面板中。
Fix all auto-fixable problems：將stylelint自動修復解決方案應用於所有可修復的問題。
我的settings.json
{
//主題設置
"workbench.colorTheme": "Monokai",
// 默認編輯器字號
"editor.fontSize": 14,
//是否自動換行
"editor.wordWrap": "on",
// tab幾個縮進
"editor.tabSize": 2,
// 文件自動保存
"files.autoSave": "afterDelay",
// 自動格式化粘貼的代碼
"editor.formatOnPaste": true,
// 在資源管理器刪除內容時候是否進行用戶提醒
"explorer.confirmDelete": false,
// 控制在資源管理器內拖放移動文件或文件夾時是否進行確認
"explorer.confirmDragAndDrop": false,
// 在資源管理器拖拽文件是否進行用戶提醒
"workbench.statusBar.visible": true,
// 工作區縮放級別
"window.zoomLevel": 0,
// 重命名或移動文件時，啟用或禁用自動更新導入路徑
"javascript.updateImportsOnFileMove.enabled": "always",
// 啟用/禁用導航路徑
"breadcrumbs.enabled": true,
// 終端cmd字號
"terminal.integrated.fontSize": 16,
// 不檢查縮進，保存后統一按設置項來設置
"editor.detectIndentation": false,
// 編輯器初始界面
"workbench.startupEditor": "newUntitledFile",
// 工作台狀態欄是否可見
"workbench.statusBar.feedback.visible":false,
// 添加多個光標時候需要的快捷鍵
"editor.multiCursorModifier": "ctrlCmd",
// 自定義代碼片段顯示的位置
"editor.snippetSuggestions": "top",
"window.menuBarVisibility": "toggle",
// 啟用后，按下 TAB 鍵，將展開 Emmet 縮寫。
"emmet.triggerExpansionOnTab": true,
// 控制編輯器在空白字符上顯示符號的方式
"editor.renderWhitespace": "all",
// 控制編輯器是否應呈現空白字符
"editor.renderControlCharacters": false,
// 在文件和文件夾上顯示錯誤和警告
"problems.decorations.enabled": false,
// html文件格式化程序
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
"editor.codeActionsOnSave": {
// 禁止eslint對html進行校驗
"source.fixAll.eslint": false,
// 禁止stylelint對html進行校驗
"source.fixAll.stylelint": false
}
},
// 編輯器文件保存時的操作(MacOS：快捷鍵是 command + s ),並不能修復所有問題，多數還是需要手動修復
//
"editor.codeActionsOnSave": {
// 文件保存時開啟eslint自動修復程序
"source.fixAll.eslint": true,
// 文件保存時開啟stylelint自動修復程序
"source.fixAll.stylelint": true
},
// "[javascript]": {
// "editor.defaultFormatter": "vscode.typescript-language-features"
// },
// vscode-fileheader -----settings begin-----
// 文件作者
"fileheader.Author": "JiaoShouf2e",
// 文件最后修改者
"fileheader.LastModifiedBy": "JiaoShouf2e",
// vscode-fileheader -----settings end-----
//stylelint -----settings begin-----
// 防止編輯器內置linter與插件沖突設置
"css.validate": false,
"less.validate": false,
"scss.validate": false,
// 啟用stylelint插件
"stylelint.enable": true,
//stylelint -----settings end-----
// eslint -----settings begin-----
// 是否為JavaScript文件開啟eslint檢測
"eslint.enable": true,
// 保存之后進行lint
"eslint.run": "onSave",
// 是否啟用eslint的調試模式
"eslint.debug": true
// eslint -----settings end-----
}