2020最新版vscode格式化程式碼的詳細教學

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 是讓程式碼儲存後保持規範
*/
}