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

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括越城網(wǎng)站建設(shè)、越城網(wǎng)站制作、越城網(wǎng)頁制作以及越城網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，越城網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到越城省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

• 原文：10 Must-have VS Code Extensions for JavaScript Developers
• 作者：Michael Wanyoike
• 譯者：Fundebug

毫無疑問Visual Studio Code是最流量的輕量級(jí)代碼編輯器。它確實(shí)從其它代碼編輯器吸收了大量的概念，特別是Sublime Text和Atom。不過，它受歡迎的原因主要還是在于它的性能更好，并且十分穩(wěn)定。另外，它還提供了我們最想要的原本只能在那種復(fù)雜的大型IDE像Eclipse或者Visual Studio 2017里面才有的智能代碼提示(IntelliSense)這樣的功能。

VS Code能夠如此強(qiáng)大還源自于它的插件市場(chǎng)。歸功于其開源社區(qū)，VS Code幾乎支持所有的編程語言、框架和開發(fā)技術(shù)。并且有各種各樣的支持方案，包括代碼片段(snippets)，語法高亮、Emmet和IntelliSense功能相關(guān)的技術(shù)。

在本文中，我專注于JavaScript開發(fā)者經(jīng)常用到的插件。目前，針對(duì)JavaScript有非常多的VS Code插件，我也不可能面面俱到。因此，我會(huì)重點(diǎn)列出那些最流行的必不可少的插件。為了使本文更有條理，我將它們分門別類整理。

代碼片段(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庫(kù)來提供測(cè)試支持。使用該插件可以直接在代碼中運(yùn)行測(cè)試并將提示錯(cuò)誤。

• ES6 Mocha Snippets：提供ES6語法的 Mocha代碼片段。充分利用箭頭函數(shù)，盡量不使用大括號(hào)來保持代碼的簡(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代碼。

  <img style="width:80%;" src="/upload/otherpic76/2018_11_20_json-to-js.gif" />

• Code Metrics：這是一個(gè)用來計(jì)算JavaScript和TypeScript代碼復(fù)雜度的插件。

插件包

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é)語

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

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了7億+錯(cuò)誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2018/11/20/10-must-have-vs-code-extensions-for-javascript-developers/

網(wǎng)站名稱：10種JavaScript開發(fā)者必備的VSCode插件
路徑分享：http://chinadenli.net/article48/ppcdep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、軟件開發(fā)、品牌網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站制作、

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)