prettyhtml格式化HTML；prettier格式化css/less/scss/postcss/ts；stylus-supremacy格式化stylus；vscode自帶格式化插件格式化js；vetur格式化.vue文件；讓不同塊使用不同的格式化方案ESlint：新版的ESlint支持了對.vue文件的校驗。

{ /*格式化文件對應插件：主要是兩步，一步是用格式化插件格式化對應的文件；另一步讓格式化后的代碼能通過代碼檢驗工具。prettyhtml格式化HTML；prettier格式化css/less/scss/postcss/ts；stylus-supremacy格式化stylus；vscode自帶格式化插件格式化js；vetur格式化.vue文件；ESlint進行代碼檢驗。*/ /*格式化思路和注意事項。注意格式化的代碼能符合ESlint代碼檢驗。1.用vetur設置默認格式化工具。格式化.vue文件2.用ESlint設置保存時修復ESlint錯誤的功能。3.用prettier格式化css；去除語法結尾的分號，使用單引號替換雙引號。4.保存時自動格式化。*/ // 默認使用prettier格式化支持的文件 "editor.defaultFormatter": "esbenp.prettier-vscode", "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.postcss": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.stylus": "stylus-supremacy", // "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.ts": "prettier", "vetur.format.defaultFormatter.sass": "sass-formatter", "open-in-browser.default": "Chrome", // 將vetur的js格式化工具指定為vscode自帶的 "vetur.format.defaultFormatter.js": "vscode-typescript", // 移除js語句的分號 "javascript.format.semicolons": "remove", // 在函數名后面加上括號，類似這種形式 foo () {} "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // eslint配置項，保存時自動修復錯誤。 "editor.codeActionsOnSave": { "source.fixAll": true }, // 指定 *.vue 文件的格式化工具為vetur "[vue]": { "editor.defaultFormatter": "octref.vetur" }, // 指定 *.js 文件的格式化工具為vscode自帶 "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "vetur.format.defaultFormatterOptions": { "JS-beautify-HTML": { // JS-beautify-HTML的設置在這里 "wrap_attributes": "force-aligned" }, " prettyhtml": { "printWidth'": 100, // 每一行不超過100個字符 "singleQuote": false, // 不用單引號 "wrapAttributes": false, "sortAttributes": true }, "prettier": { // 去掉代碼結尾的分號 "semi": false, //不加分號 "singleQuote": true, //用單引號 // #讓prettier使用eslint的代碼格式進行校驗 "eslintIntegration": true, "arrowParens": "always" } }, // vscode默認啟用了根據文件類型自動設置tabsize的選項 "editor.detectIndentation": false, // 重新設定tabsize "editor.tabSize": 2, // 保存時自動格式化代碼 "editor.formatOnSave": true, //可選項。stylus的格式化配置以及sass格式化配置。 // 格式化stylus, 需安裝Manta's Stylus Supremacy插件 "stylusSupremacy.insertBraces": false, // 是否插入大括號 "stylusSupremacy.insertColons": false, // 是否插入冒號 "stylusSupremacy.insertSemicolons": false, // 是否插入分號 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行 "stylusSupremacy.insertNewLineAroundBlocks": false, // 啟用調試模式。 "sass.format.debug": false, // 刪除空格 "sass.format.deleteEmptyRows": true, // 刪除最后一個空格。 "sass.format.deleteWhitespace": true, // 將 scss / css 轉換為 sass。 "sass.format.convert": true, // 如果 屬性:值 為true,則始終設置為1. "sass.format.setPropertySpace": true /*格式化插件：//vetur：代碼高亮、emmet語法支持、語法錯誤校驗檢查、代碼提醒、格式化vue。vetur集成了prettier，讓.vue文件中不同的塊使用不同的格式化方案，<template> 調用 html 格式化工具，<script> 調用 JavaScript 格式化工具，<style> 使用style格式化工具。//ESlint：新版的ESlint支持了對.vue文件的校驗。//prettyhtml：為純HTML模板等提供通用格式化的工具。//prettier：格式化工具，用于css/less/scss/postcss/ts//stylus-supremacy：用于格式化stylus文件的node.js模塊。//js的格式化工具用vscode自帶的。Prettier不支持在函數名后面加上括號。這點和ESlint沖突了。//EditorConfig：主要是用于讓 vscode 支持.editorconfig 文件。.editorconfig 文件中的設置用于在基本代碼庫中維持一致的編碼風格和設置，例如縮進樣式、選項卡寬度、行尾字符以及編碼等。EditorConfig 是讓代碼創建前保持規范，Prettier 是讓代碼保存后保持規范*/}