如何用VSCode的Format功能實(shí)現(xiàn)代碼格式化

這篇文章主要介紹了如何用VSCode的Format功能實(shí)現(xiàn)代碼格式化的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇如何用VSCode的Format功能實(shí)現(xiàn)代碼格式化文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出南山免費(fèi)做網(wǎng)站回饋大家。

近年開發(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ǔ)法寫錯(cuò)了，其實(shí)只是還未format。（比如ESLint插件的自動(dòng)校驗(yàn)提示）

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

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

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

尤其是最后一條，其實(shí)很多小項(xiàng)目只要能滿足最基本的格式化就行，能保證團(tuán)隊(duì)內(nèi)都能滿足并執(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)單配置，滿足上述的所有規(guī)則。

VSCode Format

VSCode自身就帶有一個(gè)Format功能，大多文件類型都支持。默認(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ī)范是：

• Detect Indentation 對(duì)應(yīng)settings: editor.detectIndentation 默認(rèn)值true，根據(jù)當(dāng)前文件內(nèi)容來(lái)檢測(cè)當(dāng)前文件是2個(gè)空格還是4個(gè)空格，然后根據(jù)這個(gè)來(lái)Format；

• Tab Size 對(duì)應(yīng)settings: editor.tabSize：默認(rèn)值4，如果是新建文件，則是根據(jù)這個(gè)值來(lái)確定，默認(rèn)是4個(gè)tab size。

如上圖是默認(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)一開發(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類型文件的默認(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，可以滿足保存文件的時(shí)候，先用VSCode format 代碼格式規(guī)則，然后用ESLint處理代碼質(zhì)量規(guī)則。舉幾個(gè)例子：

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

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

關(guān)于“如何用VSCode的Format功能實(shí)現(xiàn)代碼格式化”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“如何用VSCode的Format功能實(shí)現(xiàn)代碼格式化”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：如何用VSCode的Format功能實(shí)現(xiàn)代碼格式化
網(wǎng)站鏈接：http://muchs.cn/article2/joheoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、搜索引擎優(yōu)化、網(wǎng)站排名、虛擬主機(jī)、定制開發(fā)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)