下載和安裝

下載

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

安裝

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

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

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

Prettier Code Formatter

使用 Prettier 來統(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 插件的功能非常簡單丝蹭，它可以自動(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 來個(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í)候们妥，你就需要一些額外的代碼片段插件來輔助你編寫ES6/ES7代碼。

• VS Code JavaScript(ES6) snippets：它是如今最流行的勉吻，安裝了超過120萬的插件监婶。該插件為JavaScript、TypeScript、HTML惑惶、React和Vue提供了ES6語法支持煮盼。
• JavaScript Snippet Pack：JavaScript代碼片段集合。
• Atom JavaScript Snippet：從Atom移植過來的JavaScript代碼片段带污。
• JavaScript Snippets：ES6代碼片段僵控，并且包含Mocha、Jasmine和其它BDD測(cè)試框架的代碼片段鱼冀。

語法插件

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

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

代碼風(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萬的安裝量。你可以在.eslintrc.json中配置倒堕。
• JSHint：JSHint的代碼風(fēng)格檢查插件灾测。在項(xiàng)目的根目錄下面，用.jshintrcfile配置垦巴。
• JavaScript Standard Style: 一個(gè)無需配置的自帶非常嚴(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來驗(yàn)證已經(jīng)安裝的模塊等限，確保已經(jīng)安裝的模塊版本號(hào)正確爸吮，標(biāo)記那些安裝了但是沒有在package.json列出來的包，以及那些還沒有安裝的包望门。Node.js Modules IntelliSense：為JavaScript和TypeScript模塊自動(dòng)補(bǔ)全import語句形娇。

  
  

• 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萬奕巍，Beautify是jsBeautifier的插件，支持JavaScript儒士、JSON的止、CSS和HTML一鍵格式化。
• Prettier Code Formatter：安裝量超過150萬着撩，支持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，移除無用的else語句挖滤，將變量聲明和變量初始化合并崩溪。應(yīng)該說很大程度上受到Webstorm的啟發(fā)。

瀏覽器插件

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

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

框架插件

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

• Angular 6：超過220萬的安裝量剩膘，支持TypeScript、HTML盆顾、Angular Material ngRx怠褐、RxJS和Flex Layout。并且有172個(gè)Angular的代碼片段您宪。
• Angular v5 snippets：超過270萬的安裝量奈懒，提供 TypeScript、RxJS宪巨、HTML和Docker文件的代碼片段磷杏。
• React Native/React/Redux snippets for es6/es7：為這些框架提供ES6/ES7語法的代碼片段。
• React Native Tools：提供智能提示揖铜、命令行工具和Debugging功能茴丰。
• Vetur：為Vue框架提供語法高亮、代碼片段天吓、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庫來提供測(cè)試支持。使用該插件可以直接在代碼中運(yùn)行測(cè)試并將提示錯(cuò)誤入撒。
• ES6 Mocha Snippets：提供ES6語法的 Mocha代碼片段隆豹。充分利用箭頭函數(shù)，盡量不使用大括號(hào)來保持代碼的簡潔茅逮，可配置允許使用分號(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è)用來計(jì)算JavaScript和TypeScript代碼復(fù)雜度的插件。

image

插件包

VS Code的插件市場有一個(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é)語

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

更多參考

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