只用VSCode自帶的Format功能，即可滿(mǎn)足可配置的代碼格式化需求！下面本篇文章就來(lái)帶大家了解一下VSCode的Format功能，希望對(duì)大家有所幫助！

近年開(kāi)發(fā)環(huán)境越來(lái)越重視代碼的規(guī)范化，借助工具來(lái)檢查、自動(dòng)化修復(fù)，成為了代碼保障的第一選擇。

一般會(huì)使用Lint (ESLint StyleLint)或Prettier等輔助工具，通過(guò)簡(jiǎn)單的配置部署，就可以使用一些比較流行的Code Style規(guī)范，達(dá)到自動(dòng)提示、自動(dòng)修復(fù)、自動(dòng)執(zhí)行和監(jiān)督的目的。

(資料圖)

但是不知道大家有沒(méi)有遇到以下幾種情景：

IDE里敲代碼時(shí)，由于沒(méi)有實(shí)時(shí)format（一般在save時(shí)自動(dòng)format），總是出現(xiàn)紅色的提示，總是以為是自己的語(yǔ)法寫(xiě)錯(cuò)了，其實(shí)只是還未format。（比如ESLint插件的自動(dòng)校驗(yàn)提示）

剛開(kāi)始使用時(shí)，總是遇到不理解的規(guī)則（可能太過(guò)嚴(yán)格了），還得點(diǎn)進(jìn)到提示里查看具體原因，相當(dāng)于一邊開(kāi)發(fā)一邊學(xué)習(xí)規(guī)則。

寫(xiě)了一段代碼，save后代碼突然變長(zhǎng)了，全給換行了，50行的code硬生生給拉到100行。這里就不指名誰(shuí)了。

對(duì)代碼規(guī)范（更多的指格式化）并沒(méi)有太多要求，比如項(xiàng)目比較小，項(xiàng)目進(jìn)度比較緊等。只要能滿(mǎn)足基本的格式化要求就行。

尤其是最后一條，其實(shí)很多小項(xiàng)目只要能滿(mǎn)足最基本的格式化就行，能保證團(tuán)隊(duì)內(nèi)都能滿(mǎn)足并執(zhí)行一套簡(jiǎn)單規(guī)范，其它比較嚴(yán)格的規(guī)范可以不用考慮。

這里提到一個(gè)概念，規(guī)范分為兩種：代碼格式規(guī)則（Formatting rules）和 代碼質(zhì)量規(guī)則（Code-quality rules）。上述提到的基本規(guī)范，基本就屬于代碼格式規(guī)則。

下面列下有哪些常用的，基本的格式化規(guī)則，即代碼格式規(guī)則，以 standardjs style 為例：

分號(hào)。eslint: semi

空格縮進(jìn)。eslint: indent

關(guān)鍵字后面加空格。eslint: keyword-spacing

函數(shù)聲明時(shí)括號(hào)與函數(shù)名間加空格。eslint: space-before-function-paren

字符串拼接操作符之間要留空格。eslint: space-infix-ops

逗號(hào)后面加空格。eslint: comma-spacing

單行代碼塊兩邊加空格。eslint: block-spacing

文件末尾留一空行。eslint: eol-last

鍵值對(duì)當(dāng)中冒號(hào)與值之間要留空白。eslint: key-spacing

除了縮進(jìn)，不要使用多個(gè)空格。eslint: no-multi-spaces

行末不留空格。eslint: no-trailing-spaces

屬性前面不要加空格。eslint: no-whitespace-before-property

遇到分號(hào)時(shí)空格要后留前不留。eslint: semi-spacing

代碼塊首尾留空格。eslint: space-before-blocks

圓括號(hào)間不留空格。eslint: space-in-parens

模板字符串中變量前后不加空格。eslint: template-curly-spacing

可以看到，基本都是分號(hào)縮進(jìn)空格空白相關(guān)的規(guī)范，而這些規(guī)范在一些IDE里已經(jīng)集成好了。

比如VSCode，就可以通過(guò)簡(jiǎn)單配置，滿(mǎn)足上述的所有規(guī)則。

VSCode Format

VSCode自身就帶有一個(gè)Format功能，大多文件類(lèi)型都支持。默認(rèn)快捷鍵是Ctrl+K+D。

還支持設(shè)置為Format on Save。

然后列下上述基本規(guī)范里，哪些不包含在默認(rèn)Format功能里。

分號(hào)。- 默認(rèn)沒(méi)有規(guī)范，可以通過(guò)settings配置。

空格縮進(jìn)。- 默認(rèn)4個(gè)空格TabSize，可以通過(guò)settings配置。

函數(shù)聲明時(shí)括號(hào)與函數(shù)名間加空格。- 跟standardjs不一樣，VSCode默認(rèn)沒(méi)有空格。

文件末尾留一空行。- 默認(rèn)沒(méi)有，可以通過(guò)settings配置。

就4個(gè)，其中第3個(gè)可以說(shuō)規(guī)則不一樣，但是有規(guī)則的，所以綜合就3個(gè)。所以說(shuō)大部分規(guī)則默認(rèn)format功能里已經(jīng)支持了。

1. 分號(hào)

分為三種規(guī)范：要求必須有分號(hào)；禁止分號(hào)；都行。市面上流行規(guī)范里，啥樣都有，但是一般都是要求必須有或者禁止的。

VSCode默認(rèn)沒(méi)有要求，但是可以通過(guò)settings定義：

ignore默認(rèn)，就是有沒(méi)有分號(hào)都行；

insert必須有分號(hào)；

remove禁止分號(hào)。

2. 縮進(jìn)規(guī)范

一般分為兩種規(guī)范，2個(gè)空格還是4個(gè)空格，現(xiàn)在大多市面上流行的規(guī)范里，都是以2個(gè)空格為準(zhǔn)。

VSCode默認(rèn)規(guī)范是：

如上圖是默認(rèn)配置，如果想所有文件都以2個(gè)空格縮進(jìn)作為規(guī)范，可以先關(guān)掉Detect Indentation，再把Tab Size設(shè)置為2。

如果不關(guān)Detect Indentation，只改Tab Size為2，則是根據(jù)文件內(nèi)容縮進(jìn)，然后新建文件是2個(gè)空格縮進(jìn)。

VSCode是根據(jù)什么檢測(cè)文件的tabsize是多大，可以在文件底部狀態(tài)欄看到，點(diǎn)擊還可以更改。

3. 文件末尾留一空行

settings里搜索關(guān)鍵字insertFinalNewline，默認(rèn)選項(xiàng)是disable的，check上，save時(shí)就會(huì)給所有文件末尾留一空行。

綜上

綜上，所有settings配置如下：

這里建議設(shè)置Workspace下的settings，設(shè)置后會(huì)在.vscode路徑下生成settings.json文件，可以提交到git上統(tǒng)一開(kāi)發(fā)團(tuán)隊(duì)內(nèi)部規(guī)范。

// .vscode/settings.json{  "editor.formatOnSave": true, // 保存文件自動(dòng)format  "javascript.format.semicolons": "insert", // js文件，強(qiáng)制必須有分號(hào)，設(shè)置`remove`則禁止分號(hào)  "typescript.format.semicolons": "insert", // ts文件，同上  "editor.tabSize": 2, // 設(shè)置默認(rèn)縮進(jìn)為2個(gè)空格  "editor.detectIndentation": false, // 是否強(qiáng)制所有文件按tabSize設(shè)置縮進(jìn)；"否"則根據(jù)文件內(nèi)容縮進(jìn)、新建文件按tabSize縮進(jìn)。  "files.insertFinalNewline": true, // 所有文件末尾留一空行  "[javascript]": {    "editor.defaultFormatter": "vscode.typescript-language-features" // 設(shè)置js類(lèi)型文件的默認(rèn)format為VSCode自帶Format  },  "[javascriptreact]": {    "editor.defaultFormatter": "vscode.typescript-language-features" // jsx文件，同上  },  "[css]": {    "editor.defaultFormatter": "vscode.css-language-features" // css文件，同上  }，  "[less]": {    "editor.defaultFormatter": "vscode.css-language-features" // less文件，同上  }}

其實(shí)VSCode settings里還可以配置更多的format配置，大家可以自己摸索。

其它格式文件Format

比如css、less、json、md等，個(gè)人感覺(jué)直接用VSCode默認(rèn)的就夠了。

其它規(guī)范：

除了以上提到的代碼格式規(guī)則，其它規(guī)范就屬于是代碼質(zhì)量規(guī)則了，這種用ESLint規(guī)范下就行了，因?yàn)檫@些規(guī)范和上述代碼格式規(guī)則是不沖突的，配合ESLint的auto fix on save，可以滿(mǎn)足保存文件的時(shí)候，先用VSCode format 代碼格式規(guī)則，然后用ESLint處理代碼質(zhì)量規(guī)則。舉幾個(gè)例子：

強(qiáng)制單引號(hào)或雙引號(hào)。eslint: quotes

始終使用。 ===替代 ==。eslint: eqeqeq

關(guān)于ESLint的用法，可以參考之前的文章：ESLint配合VSCode 統(tǒng)一團(tuán)隊(duì)前端代碼規(guī)范

最后

本文整理了如何只用VSCode開(kāi)發(fā)工具，來(lái)規(guī)范前端Code的代碼格式規(guī)范，并且支持可配置、保存文件自動(dòng)格式化代碼功能。

優(yōu)點(diǎn)：

配置簡(jiǎn)單，不用安裝各種npm或者插件，VSCode自身就有的功能。

適合小的簡(jiǎn)單項(xiàng)目，或者對(duì)代碼格式規(guī)范需求不高的項(xiàng)目，適合小廠(chǎng)。

部分規(guī)則支持自定義，可按實(shí)際需求進(jìn)行配置。

缺點(diǎn)：

規(guī)則不多，基本都是代碼格式規(guī)則，做不了代碼質(zhì)量規(guī)則的校驗(yàn)，需要結(jié)合ESLint搭配。

滿(mǎn)足不了對(duì)格式規(guī)范要求比較高的項(xiàng)目，比如大項(xiàng)目、大廠(chǎng)。

相比ESLint，規(guī)則很少，可配置化也不多。

相比Prettier，規(guī)則也很少，肯定比不了一些流行的代碼風(fēng)格規(guī)范。

沒(méi)辦法通過(guò)Git Hooks做到提交代碼時(shí)的自動(dòng)校驗(yàn)。

此文只是提供了一種代碼格式規(guī)范的一種解決方案，一種思路，適不適合自己還得看自身需求。

更多關(guān)于VSCode的相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：vscode基礎(chǔ)教程！

以上就是帶你用VSCode的Format功能實(shí)現(xiàn)代碼格式化的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞：