下載和安裝

下載

下載地址:VSCodeUserSetup-x64-1.31.1.exe

安裝

按引導(dǎo)安裝即可

第一次啟動(dòng)的畫面

個(gè)性化 VS Code 插件與配置

Prettier Code Formatter

使用 Prettier 來(lái)統(tǒng)一代碼風(fēng)格，當(dāng)保存 HTML/CSS/JavaScript 文件時(shí)，它會(huì)自動(dòng)調(diào)整代碼格式。這樣，不用擔(dān)心代碼格式問題。由于 Prettier 本身不能個(gè)性化配置，有時(shí)可能會(huì)引起不適，但是至少保證團(tuán)隊(duì)成員可以輕易統(tǒng)一代碼風(fēng)格。

Prettier Code Formatter

npm

npm 插件可以檢查 package.json 中所定義的 npm 模塊與實(shí)際安裝的 npm 模塊是否一致：

• package.json 中定義了，但是實(shí)際未安裝
• package.json 中未定義，但是實(shí)際安裝了
• package.json 中定義的版本與實(shí)際安裝的版本不一致

npm Intellisense

npm Intellisense 插件會(huì)為 package.json 建立索引，這樣當(dāng)我 require 某個(gè)模塊時(shí)，它可以自動(dòng)補(bǔ)全。

Bracket Pair Colorizer

Bracket Pair Colorizer 可以為代碼中的匹配的括號(hào)自動(dòng)著色，以不同的顏色進(jìn)行區(qū)分，這樣我們可以輕易地辨別某個(gè)代碼塊的開始與結(jié)束。

Auto Close Tag

Auto Close Tag 插件的功能非常簡(jiǎn)單，它可以自動(dòng)補(bǔ)全 HTML/XML 的關(guān)閉標(biāo)簽。

GitLens

我非常喜歡 Gitlens，因?yàn)樗梢詭椭铱焖倮斫獯a的修改歷史。
Current Line Blame：查看當(dāng)前行代碼的結(jié)尾查看最近一次 commit 的姓名、時(shí)間以及信息

Markdown All in One

Markdown All in One 插件幫助我編寫 README 以及其他 MarkDown 文件。我尤其喜歡它處理列表以及表格的方式

用戶配置

除了安裝各種各樣的插件，我們還可以通過配置 VS Code 的 User Settings 來(lái)個(gè)性化我們的 VS Code。

字體設(shè)置

我非常喜歡帶有 ligatures(合字、連字、連結(jié)字或合體字)的字體。ligatures 就是將多于一個(gè)字母的合成一個(gè)字形。我主要使用Fira Code作為我編程所使用的字體，如下圖中的
=>
與
===
：

image

我的字體配置如下:

image

關(guān)于縮進(jìn)，我是這樣配置的：

image

import 路徑移動(dòng)或者重命名時(shí)，自動(dòng)更新:

image

user-settings.json

下面是我的 VS Code 的配置文件user-settings.json：

image

如果你想知道更多的 VS Code 使用技巧，可以查看VSCode Can Do That。

JavaScript開發(fā)者必備的VS Code插件

好的代碼插件可以讓工作效率翻倍，心情也更加舒暢！

代碼片段(Snippet)插件

當(dāng)你第一次安裝VS Code，它會(huì)提供基本的針對(duì)JavaScript/TypeScript的代碼片段支持。當(dāng)你要從事更加前沿的開發(fā)的時(shí)候，你就需要一些額外的代碼片段插件來(lái)輔助你編寫ES6/ES7代碼。

• VS Code JavaScript(ES6) snippets：它是如今最流行的，安裝了超過120萬(wàn)的插件。該插件為JavaScript、TypeScript、HTML、React和Vue提供了ES6語(yǔ)法支持。
• JavaScript Snippet Pack：JavaScript代碼片段集合。
• Atom JavaScript Snippet：從Atom移植過來(lái)的JavaScript代碼片段。
• JavaScript Snippets：ES6代碼片段，并且包含Mocha、Jasmine和其它BDD測(cè)試框架的代碼片段。

語(yǔ)法插件

VS Code自帶的針對(duì)JavaScript的語(yǔ)法高亮已經(jīng)相當(dāng)不錯(cuò)。你可以安裝不同的主題來(lái)改變代碼的顏色。不過，如果你想要更好的可讀性，可以安裝代碼高亮插件。這里有一些推薦：

• JavaScript Atom Grammar：該插件將Visual Studio Code自帶的JavaScript語(yǔ)法替換成了Atom編輯器的版本。
• Babel JavaScript：支持 ES201x JavaScript、React、FlowType和GraphQL代碼的語(yǔ)法高亮。
• DotENV：如果你使用Node，你需要它。DotEnv提供.env文件的語(yǔ)法高亮。

代碼風(fēng)格檢查插件

為了保證整個(gè)團(tuán)隊(duì)代碼格式的一致性，使用一個(gè)代碼風(fēng)格檢查工具可以做到。ESLint是最流行的一個(gè)工具，因?yàn)樗С址浅６嗟拇a風(fēng)格，包括標(biāo)準(zhǔn)的、Google和Airbnb。下面列出一些推薦的插件：

• ESLint：這個(gè)是最流行的代碼風(fēng)格檢查插件，有超過670萬(wàn)的安裝量。你可以在.eslintrc.json中配置。
• JSHint：JSHint的代碼風(fēng)格檢查插件。在項(xiàng)目的根目錄下面，用.jshintrcfile配置。
• JavaScript Standard Style: 一個(gè)無(wú)需配置的自帶非常嚴(yán)格規(guī)則的代碼風(fēng)格檢查插件。它強(qiáng)制要求你所有代碼要遵循標(biāo)準(zhǔn)規(guī)則。
• JSLint：JSLint的代碼風(fēng)格檢查插件。

如果你想要了解各個(gè)插件的優(yōu)缺點(diǎn)，可以看看這篇博客JavaScript代碼風(fēng)格檢查插件大評(píng)比。

Node插件

每一個(gè)JavaScript項(xiàng)目至少需要安裝一個(gè)Node包。這里推薦一些針對(duì)Node的插件：

• npm：使用package.json來(lái)驗(yàn)證已經(jīng)安裝的模塊，確保已經(jīng)安裝的模塊版本號(hào)正確，標(biāo)記那些安裝了但是沒有在package.json列出來(lái)的包，以及那些還沒有安裝的包。Node.js Modules IntelliSense：為JavaScript和TypeScript模塊自動(dòng)補(bǔ)全import語(yǔ)句。

  
  

• Path IntelliSense：雖然并不是真的和Node相關(guān)，這個(gè)插件可以自動(dòng)補(bǔ)全文件名，可以在輸入時(shí)對(duì)本地文件進(jìn)行智能提示。

• Node exec：運(yùn)行你執(zhí)行當(dāng)前的Node文件或者選中的部分代碼。

• View Node Package：通過此插件可以快速查看一個(gè)Node包的源代碼。-

• Node Readme：快速打開npm包文檔。

• Search node_modules：搜索node_modules里面的代碼，標(biāo)準(zhǔn)的搜索是不會(huì)包含該文件夾的。

• Import Cost：顯示引入的包的大小

代碼格式化插件

你也許會(huì)發(fā)現(xiàn)，有時(shí)后復(fù)制粘貼完一段代碼后，縮進(jìn)的格式變亂，需要一行一行的調(diào)整十分麻煩。這個(gè)時(shí)候，你肯定想要一個(gè)代碼格式化工具。

• Beautify：安裝量超過230萬(wàn)，Beautify是jsBeautifier的插件，支持JavaScript、JSON、CSS和HTML一鍵格式化。
• Prettier Code Formatter：安裝量超過150萬(wàn)，支持JavaScript、TypeScript和CSS的格式化，使用Prettier(一個(gè)深受大家喜愛的格式化插件)。
• JS Refactor：提供了許多重構(gòu)JavaScript 代碼的方法，例如提取代碼中的變量和方法，將函數(shù)轉(zhuǎn)換為使用箭頭函數(shù)或模板字面量和將函數(shù)導(dǎo)出。
• JavaScript Booster：一個(gè)非常棒的重構(gòu)工具，比如將var替換為const或則let，移除無(wú)用的else語(yǔ)句，將變量聲明和變量初始化合并。應(yīng)該說很大程度上受到Webstorm的啟發(fā)。

瀏覽器插件

除非你直接在控制臺(tái)寫JavaScript代碼，大多數(shù)時(shí)候是在瀏覽器中執(zhí)行的。也就是說，每一次代碼更新，你都需要刷新頁(yè)面來(lái)重寫載入代碼。如果一直手動(dòng)操作，是很繁瑣的。我們可以用插件來(lái)替代。

• Debugger for Chrome：你只需要在代碼編輯器中設(shè)置斷點(diǎn)，在瀏覽器中會(huì)在斷點(diǎn)處暫停。
• Live Server：在本地開發(fā)環(huán)境中，實(shí)時(shí)重新加載(reload)頁(yè)面。
• Preview on Web Server：提供web服務(wù)器和實(shí)時(shí)預(yù)覽。
• PHP Server：對(duì)于僅需要在客戶端運(yùn)行JavaScript 代碼做測(cè)試非常有用。
• Rest Client：你不需要使用瀏覽器或則一個(gè)CURL程序來(lái)測(cè)試REST API，通過Rest Client可以在編輯器內(nèi)交互式運(yùn)行HTTP請(qǐng)求。

框架插件

對(duì)于大多數(shù)項(xiàng)目，為了節(jié)省開發(fā)時(shí)間，你往往會(huì)使用一個(gè)合適的開發(fā)框架來(lái)快速開發(fā)。在VS Code上，大多數(shù)框架都有相應(yīng)的插件支持。但是依然有很多框架并沒有對(duì)應(yīng)的插件。

• Angular 6：超過220萬(wàn)的安裝量，支持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。并且有172個(gè)Angular的代碼片段。
• Angular v5 snippets：超過270萬(wàn)的安裝量，提供 TypeScript、RxJS、HTML和Docker文件的代碼片段。
• React Native/React/Redux snippets for es6/es7：為這些框架提供ES6/ES7語(yǔ)法的代碼片段。
• React Native Tools：提供智能提示、命令行工具和Debugging功能。
• Vetur：為Vue框架提供語(yǔ)法高亮、代碼片段、Emmet、格式化、代碼風(fēng)格檢查、智能提示、調(diào)試幫助等。有非常詳細(xì)的文檔: vetur。
• Ember：為Ember提供命令工具和智能提示。安裝后，所有的ember cli命令都可以使用。
• Cordova Tools：為Cordova插件和Ionic框架提供支持。提供代碼智能提示、調(diào)試輔助以及其他特性。
• jQuery Code Snippets：提供超過130個(gè)jQuery代碼片段。

測(cè)試插件

在軟件開發(fā)中，測(cè)試是必可不少的一個(gè)環(huán)節(jié)，特別是那些要上線到生產(chǎn)環(huán)境的項(xiàng)目。你可以看看我們這篇講測(cè)試的文章: JavaScript Testing: Unit vs Functional vs Integration Tests。下面是一些流行的測(cè)試插件：

• Mocha sidebar：使用Mocha庫(kù)來(lái)提供測(cè)試支持。使用該插件可以直接在代碼中運(yùn)行測(cè)試并將提示錯(cuò)誤。
• ES6 Mocha Snippets：提供ES6語(yǔ)法的 Mocha代碼片段。充分利用箭頭函數(shù)，盡量不使用大括號(hào)來(lái)保持代碼的簡(jiǎn)潔，可配置允許使用分號(hào)。
• Jasmine Code Snippets：Jasmine測(cè)試框架的代碼片段。
• Protractor Snippets：Protractor框架的端到端(end-to-end)測(cè)試片段，支持JavaScript和Typescript。
• Node TDD：為Node和JavaScript項(xiàng)目提供test-driven development支持。在代碼更新的時(shí)候可以自動(dòng)觸發(fā)代碼的測(cè)試。

其它很酷的插件

我把它們分類到awesome類別，是因?yàn)樗鼈冋娴暮芸帷?/p>

• Quokka.js：一個(gè)很棒的調(diào)試工具，可以為您正在編寫的代碼提供實(shí)時(shí)反饋,能夠預(yù)覽變量的函數(shù)和計(jì)算值結(jié)果。請(qǐng)查看文檔：文檔
• Paste as JSON：快速將JSON數(shù)據(jù)轉(zhuǎn)換為JavaScript代碼。
• Code Metrics：這是一個(gè)用來(lái)計(jì)算JavaScript和TypeScript代碼復(fù)雜度的插件。

image

插件包

VS Code的插件市場(chǎng)有一個(gè)類型叫插件包。它實(shí)際上已一個(gè)相互關(guān)聯(lián)的插件的集合，方便一起安裝，協(xié)同使用。

• Nodejs Extension Pack：包含了ESLint、npm、JavaScript(ES6)代碼片段、node_modules搜索、NPM智能提示和文件路徑智能提示。
• VS Code for Node.js – Development Pack ：NPM智能提示，ESLint，Chrome調(diào)試器，Code Metrics，Docker和導(dǎo)入包的開銷計(jì)算。
• Vue.js Extension Pack：包含大約12個(gè)VS Code插件，有些在本文沒有提到，比如auto-rename-tag和auto-close-tag。Ionic Extesion Pack：包含許多用于Ionic、Angular、RxJS、Cordova和HTML開發(fā)的插件。

結(jié)語(yǔ)

VS Code能夠如此流行的一個(gè)原因就是擁有大量的高質(zhì)量插件。它前所未有的提高了編碼的效率。比如ESLint助你減少代碼失誤，Debugger for Chrome讓你更加方便去Debugging。Node.js的智能引入提示讓你可以讓你正確引入所需模塊，Live Server和 REST Client可以讓你省去頻繁切換到外部工具的麻煩。我希望今天介紹的這些插件可以幫助你提高工作效率

更多參考

高效開發(fā)者是如何個(gè)性化 VS Code 插件與配置的？
10種JavaScript開發(fā)者必備的VS Code插件