isual Studio Code是一個(gè)免費(fèi)跨平臺的開源代碼編輯器，具有廣泛的預(yù)構(gòu)建擴(kuò)展庫，具備很多有用的附加功能。但是在使用過程中，我們有時(shí)不需要所有的功能，例如Python擴(kuò)展（超過220萬次安裝）提供很多支持，IntelliSense、代碼格式化等等，而我們往往指示想要快速查汝之行有用且重復(fù)的較小代碼塊，例如循環(huán)或條件語句。

現(xiàn)在已經(jīng)有人編寫了這種小的代碼塊，并且打包好供其他程序員使用。

為什么我們不使用 Visual Studio Code Marketplace，而是要選擇"Snippets"呢？因?yàn)檫@種小的代碼片段不僅可以在擴(kuò)展類別中使用，也適用于不同語言、調(diào)試器、格式化程序等等。

由于 VS Code是運(yùn)行在Windows、Linux和MacOS上的跨平臺工具，而JavaScript正在成為各種跨平臺項(xiàng)目的首選編程語言，所以今天就為大家推薦一些實(shí)用的JavaScript代碼片段。評選標(biāo)準(zhǔn)主要是基于下載次數(shù)、評級以及個(gè)人主觀評估。

JavaScript (ES6) Code Snippets

隨著JavaScript的版本發(fā)展，ES6成為了新的JavaS核心語言標(biāo)準(zhǔn)，主流瀏覽器也實(shí)現(xiàn)了其很多功能。

為了幫助用戶快速上手新功能，開發(fā)者Charalampos Karypidis發(fā)布了JavaScript (ES6) code snippets。

該代碼片段包支持JavaScript和TypeScript，目前下載已超過41.5萬次，評級為4.6。自首次發(fā)布以來，Charalampos Karypidis一直都在更新維護(hù)，所以不斷有新功能出現(xiàn)，如1.4.0版本支持用戶請求HTML文件。如果您也對開源項(xiàng)目有興趣，可以去GitHub上查看補(bǔ)充。

這個(gè)代碼片段包包含34個(gè)小片段： import and export、class helpers、 various methods和console methods。

Angular v4 TypeScript Snippets

最初由Google開發(fā)的AngularJS和Angular（基于TypeScript）的框架全部可以在VS Code extension marketplace 中找到。其余不兼容的框架幾乎總是會出現(xiàn)在“XX JavaScript框架”類似的文章中。也許你現(xiàn)在還在看這種JavaScript頂級框架的文章，但是我已經(jīng)在看 開發(fā)者John Papa為Angular 4.0.0開發(fā)的Angular v4 TypeScript Snippets。Angular v4 TypeScript Snippets三月剛剛發(fā)布，據(jù)說更快更小，同時(shí)也涵蓋了很多新功能，如ahead-of-time視圖引擎的改進(jìn)，TypeScript 2.1和2.2兼容性，ES2015實(shí)驗(yàn)性構(gòu)建等等。

目前Papa代碼包已經(jīng)被下載5.18萬次，是JavaScript代碼片段中下載量第一。該包中的42個(gè)片段可以分為三大類，TypeScript Angular Snippets、TypeScript RxJS Snippets (Reactive Extensions)和HTML Snippets。

使用該片段的方式與上述ES6片段相同，首先鍵入字母“a”，然后再輸入片段的名稱，直到您選擇所需的選項(xiàng)為止。要插入一個(gè)新組件的shell代碼，例如你開始輸入“a-component”，直到你可以選擇全名，你得到這個(gè)：

Angular v4 TypeScript片段包的平均評級為4.8，在GitHub上共獲得312星，以及112位開發(fā)者的支持，擁有MIT認(rèn)證。

Vue 2 Snippets

Vue.js是一個(gè)熱門的JavaScript框架，StackFlow調(diào)查顯示Vue.js已經(jīng)呈現(xiàn)出快速應(yīng)用的趨勢，是StackFlow年度增長最快的，Backbone.js, Ember.js和Meteor等框架似乎已經(jīng)開始進(jìn)入到生命周期的后期了。

當(dāng)你還在研究Vue是否能夠打入框架的最前列時(shí)，已經(jīng)有人走在了最前端。hollowtree發(fā)布了Vue 2 Snippets。Vue 2 Snippets基于vue.tmLanguage，支持vue（.vue）、HTML（.html的）、JavaScript（.js）、TypeScript（.ts）和pug（.pug）語言。

請點(diǎn)

該軟件包包含82個(gè)片段，主要用于JavaScript，HTML和Vue Router功能。如果要收集錯(cuò)誤，你可以使用字母“v”鍵入，直到找到VueConfigErrorHandler選項(xiàng)，按下ENTER鍵可以：

Vue.config.errorHandler=function（err，vm）{

//處理錯(cuò)誤

}

所有命令都不以“v”開始，如果要快速插入渲染器，你可以使用字母“r”開始輸入，直到找到渲染器選項(xiàng)，這樣您可以：

const renderer=require（'vue-server-renderer'）.createRenderer（）

如果您必須對很多選項(xiàng)進(jìn)行排序，那么沒有一致的觸發(fā)器模式可能會令人困惑，但使用情況會變得常規(guī)，有一點(diǎn)經(jīng)驗(yàn)。

Vue 2 Snippets的安裝近5.4萬次，獲得了4.9的評級，在GitHub上獲得了九顆星，目前的發(fā)展比較積極規(guī)律。

React標(biāo)準(zhǔn)樣式代碼片段

開發(fā)者Timon van Spronsen發(fā)布了React 標(biāo)準(zhǔn)樣式代碼片段，比照ES6 語法中的JavaScript標(biāo)準(zhǔn)樣式指南開發(fā)的React代碼片段。

React是由Facebook創(chuàng)建和開源的流行框架。雖然Spronsen并不是安裝量第一的Reactjs代碼片段，

但是我還是建議希望遵循JavaScript標(biāo)準(zhǔn)樣式的開發(fā)者使用這一產(chǎn)品，它的安裝量達(dá)到21610，同時(shí)也為Karypidis項(xiàng)目提供了支持。

Spronsen說，他的片段基于babel-sublime-snippets package，可預(yù)見地提供了與Karypidis包相同的功能。支持以下文件類型：JavaScript（.js）; TypeScript（.ts）; JavaScript React（.jsx;）和TypeScript React（.tsx） 。

它包括51個(gè)片段，其中29個(gè)專門用于支持類型。例如，觸發(fā)器“rccp [TAB key]”在類之后引入了一個(gè)帶有prop類的類組件框架，如下所示：

該軟件包評論不多，但5.0的評級還是比較難得的，GitHub項(xiàng)目獲得了10顆星。

ES6 / ES7的React-Native / React / Redux代碼片段

相信React Native是眾多程序員的心頭之愛，雖然我已經(jīng)安裝了完整的React Native Tools擴(kuò)展，但是我相信EQuimper的ES6 / ES7軟件包的React-Native / React / Redux代碼片段對于功能需求范圍較窄的程序員來說還是很有吸引力的。

它一共提供了30個(gè)片段，包括從導(dǎo)入到測試，例如生成組件類的ccs觸發(fā)器，

該代碼片段包雖然已經(jīng)被安裝了36000次，但是遺憾的是現(xiàn)在還沒有評價(jià)。

Visual Studio Marketplace中僅在代碼片段選項(xiàng)中搜索“JavaScript”就會出現(xiàn)105個(gè)相關(guān)結(jié)果，而且這些都是免費(fèi)來源的，程序員還可以獲取源代碼，然后根據(jù)自己的需求來做定制化的修改。這么贊的資源，程序員快快行動起來吧。

/喜湯

編者按：Mario Hoyos在Medium上寫了文章Tools I wish I had known about when I started coding，給新入行的開發(fā)工程師提供了幾款好用的工具。

科技行業(yè)里，可供人們使用的工具成百上千，你要怎么知道用哪一種上手最合適呢？

拿最近剛進(jìn)入編程這行的人來說吧，大量的工具信息堆砌過來其實(shí)毫無益處，反而會無從下手。我發(fā)現(xiàn)在自己的開發(fā)過程中，很多安裝的擴(kuò)展工具不僅沒有真正起到助益作用，反而常常妨礙了正常的開發(fā)工作。

我不是專家，不過隨著時(shí)間的推移，我還是編制了一份工具清單，這些工具已經(jīng)證明對我非常有用。如果你剛剛開始學(xué)習(xí)怎么編程的話，這個(gè)清單能給你提供一些指導(dǎo)。如果你是個(gè)經(jīng)驗(yàn)豐富的開發(fā)人員，也希望你能從中學(xué)到一些新的東西。

我將把這篇文章分為Chrome擴(kuò)展程序和VS代碼擴(kuò)展擴(kuò)展程序兩部分。我知道還有其他的瀏覽器和文本編輯器，但是我想你當(dāng)然只能在你能找到的工具里選擇，所以還是別因?yàn)閭€(gè)人喜好而引起一場宗教般的爭論。

請隨便選。

Chrome擴(kuò)展程序

現(xiàn)在設(shè)我是一位web開發(fā)人員，以Chrome為陣地。下面是一些能讓我少花點(diǎn)時(shí)間的工具：

• WhatFont?——?名字就說明了一切。這是找出你最喜歡網(wǎng)站使用的字體的簡單方法，這樣你就可以為己所用了。

• Pesticide——?修改CSS的絕佳程序。當(dāng)我試著學(xué)習(xí)匣子模型的時(shí)候，它簡直就是救命稻草般的存在。

• Colorzilla?——用于復(fù)制確切顏色的一個(gè)網(wǎng)站，用它可以將顏色直接復(fù)制到剪貼板上，這樣你就沒必要花太多時(shí)間獲得正確的RGBA組合了。

• CSS Peeper——查看網(wǎng)站使用的顏色時(shí)非常方便。在你一開始山寨你認(rèn)為酷的網(wǎng)站的時(shí)候很管用。這個(gè)程序能讓你查看它們的幕后的色彩方案。

• Wappalyzer?——想要獲悉你在網(wǎng)站上看到的是什么技術(shù)，這個(gè)程序很有用。想知道某網(wǎng)站使用什么樣的框架或者它承載了什么服務(wù)？這個(gè)照樣管用。

• React Dev Tools——一款用于調(diào)試應(yīng)用程序的工具。有一點(diǎn)要提一下，它只有在你編寫React程序時(shí)才有用。

• Redux Dev Tools——一款用于調(diào)試應(yīng)用程序的工具。有一點(diǎn)要提一下，它只有在你編寫Redux程序時(shí)才有用。

• JSON Formatter?——讓JSON在瀏覽器中看起來更一目了然的不二之選。也許麻煩的JSON讓你苦不堪言，不過只要用了這個(gè)軟件，找到你要找的東西，所花費(fèi)的時(shí)間會大幅縮短。

• Vimeo Repeat and Speed?——加速Vimeo視頻的絕佳工具。如果你像大多數(shù)的web開發(fā)人員一樣觀看視頻教程，你就會知道用1.25倍的常規(guī)回放速度觀看它們是多么的方便。本程序同時(shí)也有適用于YouTube的版本。

VS Code擴(kuò)展程序

Visual Studio Code是我寫代碼時(shí)的不二之選。

每個(gè)人都有他自己喜歡的文本編輯器，我也不例外。不過，我還是想把這些擴(kuò)展程序介紹給你，而它們對你所使用的大多數(shù)編輯器都適用?？纯次易钕矚g的擴(kuò)展程序有哪些：

• Auto Rename Tag?——自動重命名成對的HTML標(biāo)記。假如你創(chuàng)建了一個(gè)<p>標(biāo)記。現(xiàn)在你想更改它。有了這個(gè)軟件，你只需要更改一個(gè)就行，另一個(gè)會自動修改。從理論上來說，使用這個(gè)軟件可以把你的工作效率提升一倍。

• HTML CSS Support?——HTML文檔的CSS支持工具。該工具在獲得一些簡潔的語法高亮顯示和代碼建議方面非常有用。

• HTML Snippets?——這一工具在代碼分段方面非常有用，可以為你節(jié)省大量的時(shí)間。它能跟Emmet配對，這樣一來你甚至都不用再真正鍵入HTML了。

• Babel ES6/ES7?——JavaScript Babel的輔助工具。如果你用的是Babel，這個(gè)工具可以讓你更容易區(qū)分代碼。如果你喜歡JavaScript，那務(wù)必也不要錯(cuò)過這款軟件。

• Bracket Pair Colorizer?——色彩可視化工具。如果你沒有準(zhǔn)確地括號，那這個(gè)工具對于發(fā)現(xiàn)因此導(dǎo)致的許多常見漏洞十分方便。

• ESLint?——你在編寫代碼的時(shí)候，利用這個(gè)軟件可以輕易獲取有關(guān)漏洞的提示，而且在編碼過程中，它還可以幫助你養(yǎng)成良好的編碼習(xí)慣。

• Guides?——這一工具可以被用來添加額外的指導(dǎo)行代碼。這是另一個(gè)視覺提示，以確保你正確地括號了。

• JavaScript Console Utils?——使控制臺日志記錄變得更為簡單可行。如果你像大多數(shù)開發(fā)人員一樣，你會發(fā)現(xiàn)自己需要在調(diào)試流中登錄到控制臺（我知道我們應(yīng)該使用調(diào)試器）。這個(gè)實(shí)用的程序使得創(chuàng)建有用的console.log()語句變得易如反掌。

• Code Spell Checker?——這一工具正如其名，是拼寫檢查程序。漏洞的的另一個(gè)常見來源是變量或函數(shù)名。這一拼寫檢查工具可以查找不常見的單詞，而且還可以把我們用JavaScript編寫的東西進(jìn)行有效的審核。

• Git Lens?——可以讓我們對某文件何時(shí)、以及由何人進(jìn)行更改變得一目了然。當(dāng)代碼被破壞時(shí)，我們就能找到該負(fù)責(zé)任的人，而不是讓你當(dāng)替罪羊了。

• Path Intellisense?——文件路徑自動完成程序。這樣一來從其他文件中導(dǎo)入重要的東西就非常方便了。這一工具使文件導(dǎo)航變得輕而易舉。

• Prettier?——自動代碼格式化程序。忘掉那些你不得不手動縮進(jìn)代碼的日子吧，有了這個(gè)工具，事情就變得簡單多啦。這個(gè)程序會比你自己做得更快更好。對這個(gè)程序我是鼎力推薦的。

• VSCode-Icons?——將圖標(biāo)添加到文件譜中。如果文件結(jié)構(gòu)非常不科學(xué)，你的眼睛想罷工的話，這個(gè)程序可能會有所幫助。它對于你正在制作的任何文件都能提供有用的圖標(biāo)輔助，能使你更為輕易地區(qū)分看到的內(nèi)容。

總結(jié)

你肯定也有自己中意的工具，這些工具對你的開發(fā)工作來說是必不可少的。也希望我上面提到的一些工具能夠提高你的工作效率。

但是千萬不要落入貪多不爛的陷阱，因?yàn)樗赡芎馁M(fèi)很多時(shí)間。

希望你能在評論區(qū)留下你最喜歡的工具，這樣我們就可以共同進(jìn)步了。