這篇關于vscode格式化配置研究初稿，具體內容如下所示：
前言
之前用vscode進行格式化的時候都是在百度和谷歌上搜“vscode格式化代碼”然后直接copy別人。細節的配置一直沒去看過。
但是最近一段時間開發項目的時候發現和同組的提交代碼的時候格式總是不統一。于是這兩天專門看了看插件的官方文檔，研究研究。
今天初步有一點研究結果了。會配置一點點了。寫此博客與大家共同參考。不足的地方歡迎大家補充，錯誤的地方歡迎大家糾錯。
文章內容包括兩個部分：一是理論，二是我的settings.json的配置。
理論
參考文章：
VSCode程序猿彩虹屁插件rainbow fart體驗篇
vscode 配置vue+vetur+eslint+prettier自動格式化功能
vscode 配置vue+vetur+eslint+prettier自動格式化功能
代碼格式化目的：
代碼格式化的目的一是為了提高代碼可讀性，方便自己編碼，方便團隊開發；二是方便找出和修正因為格式導致的錯誤。
在團隊開發。因為每個人的編碼習慣不同，如
- 縮進是2還是4。
- 代碼結尾是否加分號，用單引號還是用雙引號。
- 函數和后面的括號之間是否加個空格。
- 等等
統一代碼格式，讓每個人開發更順利。
為了完成第一個目的，格式化插件有vetur、prettier等針對文件進行格式化的插件；
為了完成第二個目的，格式化插件有ESlint等對文件進行代碼檢驗的插件。
代碼格式化的注意事項：
插件作用
首先明白格式化插件分別側重格式化哪些文件，因為不同的文件有不同的格式規范。
prettyhtml格式化HTML；
prettier格式化css/less/scss/postcss/ts；
stylus-supremacy格式化stylus；
vscode自帶格式化插件格式化js；
vetur格式化.vue文件；讓不同塊使用不同的格式化方案
ESlint：新版的ESlint支持了對.vue文件的校驗。
符合代碼檢驗
然后注意讓格式化的代碼符號ESlint代碼檢驗。
格式化代碼最重要的是兩點，一點是用格式化插件格式化對應的文件；另一點是讓格式化后的代碼能通過代碼檢驗工具。
舉個例子。
Prettier插件不支持在函數名后面加上括號。這點和ESlint沖突了。所以js的格式化不能使用prettier插件格式化，而是使用vscode自帶的js格式化功能來格式化。否則ESlint就是報錯，簡直煩死強迫癥。
插件更新
最后要注意插件的是插件不斷更新的，所以網上直接copy的格式化代碼會各種不兼容。
如vscode 的 ESLint 插件在某個版本已經移除了 "eslint.validate" 這個配置選項，而網上很多教程都是使用的這個。
在新版的 ESLint 中已經支持了對 *.vue 文件的校驗，所以無需再進行這項配置了，只需要添加一個保存時自動修復 ESLint 錯誤的功能就行了。
代碼格式化插件的官方文檔：
語言介紹
pug：官方文檔 。pug是一款專門為node.js平臺開發的HTML模塊引擎。
less：官方文檔。less是一門CSS預處理語言。
scss：官方文檔。scss（sass）是世界上最成熟、穩定強大的專業級CSS預處理語言。
postcss：官方文檔。postcss是使用js插件來轉換CSS的工具。
stylus：官方文檔。stylus是node.js平臺上的CSS預處理框架。
插件介紹
vetur：官方文檔。代碼高亮、emmet語法支持、語法錯誤校驗檢查、代碼提醒、格式化vue。
vetur集成了prettier，讓.vue文件中不同的塊使用不同的格式化方案，template標簽調用 html 格式化工具，script標簽調用 JavaScript 格式化工具，style標簽使用style格式化工具。
ESlint：官方文檔。代碼檢驗。
prettyhtml：官方文檔。為vue或純HTML模板等提供通用格式化的工具。
pretties：官方文檔。代碼格式化工具，能夠解析代碼，使用用戶設定的規則格式化規范的代碼。
stylus-supremacy：官方文檔。用于格式化stylus文件的node.js模塊。
我的settings.json文件
{
/*格式化文件對應插件：
主要是兩步，一步是用格式化插件格式化對應的文件；
另一步讓格式化后的代碼能通過代碼檢驗工具。
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 是讓代碼保存后保持規范
*/
}
總結
到此這篇關于2020最新版vscode格式化代碼的詳細教程的文章就介紹到這了,更多相關vscode格式化代碼內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- 2020最新版vscode格式化代碼的詳細教程
- vscode 使用Prettier插件格式化配置使用代碼詳解
- VSCode 格式化縮進代碼的實現
- vscode寫python時的代碼錯誤提醒和自動格式化的方法
- vscode代碼格式化和eslint的使用
- vscode使用官方C/C++插件無法進行代碼格式化問題
- Vue-cli Eslint在vscode里代碼自動格式化的方法
