建站
咨詢
售后
建站咨詢
新聞中心
圖源：unsplash
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、宣威網(wǎng)絡(luò)推廣、成都微信小程序、宣威網(wǎng)絡(luò)營(yíng)銷、宣威企業(yè)策劃、宣威品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供宣威建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
市場(chǎng)營(yíng)銷最強(qiáng)策略之一：在人們知道自己需要什么之前幫助他們意識(shí)到自己需要什么。這一點(diǎn)上，VSCode深諳其道。
VSCode可能是目前最為流行的代碼編輯器，就是因?yàn)樗鼭M足了每一個(gè)開(kāi)發(fā)人員的需求，甚至可能開(kāi)發(fā)人員自己都不清楚的需求。這就是VSCode的獨(dú)特魅力。
VSCode是為現(xiàn)代技術(shù)而創(chuàng)建的，因而大多數(shù)VSCode愛(ài)好者都是JavaScript開(kāi)發(fā)人員。目前流行的JavaScript框架對(duì)于VSCode來(lái)說(shuō)早已完美無(wú)缺，它擁有你所需要的一切。
科技日新月異，選擇文本編輯器時(shí)，一定要選最新最好的。優(yōu)秀的開(kāi)發(fā)人員不能不舍得花時(shí)間。但這并不是說(shuō)應(yīng)該轉(zhuǎn)而學(xué)習(xí)另一種語(yǔ)言，或者另一個(gè)框架。
正如筆者在之前的博客中一直強(qiáng)調(diào)的那樣，開(kāi)發(fā)人員應(yīng)當(dāng)追上潮流，保持敏銳，了解最新信息，并將它們與目前使用的工具進(jìn)行比較，了解其中區(qū)別及其優(yōu)缺點(diǎn)，觀察其支撐和在社區(qū)中的發(fā)展，穩(wěn)定至關(guān)重要。這會(huì)大大提升你的工作效率。
圖源：unsplash
VSCode擁有一個(gè)龐大的開(kāi)源社區(qū)，其發(fā)展和潛力是無(wú)限的，本文將為你介紹25個(gè)最佳的VSCode擴(kuò)展。
1.Auto-CloseTag
擁有VCSCode擴(kuò)展是必要的。編寫(xiě)代碼本就困難重重，擁有了VSCode擴(kuò)展，就不需要僅僅因?yàn)槿鄙訇P(guān)閉標(biāo)記（
）而查找錯(cuò)誤。VSCode擴(kuò)展可以自動(dòng)添加剛剛添加的起始標(biāo)簽的右括號(hào)，然后將鼠標(biāo)光標(biāo)放在標(biāo)簽之間。是不是很酷?
2.VisualCode Integrated Terminal
將命令/終端放在VSCode編輯器中不僅會(huì)使工作更為輕松，還能節(jié)省空間。有了VSCode，你的終端就派上用場(chǎng)了。
3.ESLint/TSLint
此擴(kuò)展的主要功能是自動(dòng)格式化代碼，以便在整個(gè)團(tuán)隊(duì)中實(shí)現(xiàn)一致的格式化。ESLint也可以配置為自動(dòng)格式化代碼，無(wú)論何時(shí)出現(xiàn)錯(cuò)誤，它都會(huì)發(fā)出一連串的警告。
數(shù)百萬(wàn)的下載量可不是白給的~
4.CodeSpell Checker
如若不是以英語(yǔ)為母語(yǔ)的人，甚至可能也不是第二語(yǔ)言，那么Code Spell Checker對(duì)避免代碼出現(xiàn)拼寫(xiě)錯(cuò)誤非常有幫助。無(wú)論是否能說(shuō)一口流利的英語(yǔ)，打字錯(cuò)誤是不可避免的——人們不會(huì)想花時(shí)間去找錯(cuò)字，尤其在面對(duì)長(zhǎng)代碼時(shí)。
5.Settings Sync
使用多臺(tái)機(jī)器時(shí)，該擴(kuò)展將大有幫助。Settings sync讓所有電腦/筆記本電腦依照visual studio的設(shè)置方式實(shí)現(xiàn)同步。
同時(shí)在辦公室電腦和家用電腦上工作的開(kāi)發(fā)人員，基本上會(huì)在不同的地點(diǎn)工作。手動(dòng)更改兩端設(shè)置極為耗時(shí)，因?yàn)樾枰鶕?jù)正在做的項(xiàng)目不時(shí)更改設(shè)置以便緩解編程壓力。建議使用這個(gè)擴(kuò)展,以便將所有所作更改都自動(dòng)同步到個(gè)人電腦和工作點(diǎn)。
6.Bracket Pair Colorizer
括號(hào)可謂是痛苦之來(lái)源，尤其是在處理大型項(xiàng)目時(shí)。當(dāng)使用長(zhǎng)代碼時(shí)，情況會(huì)更糟。Bracket Pair Colorizer將有效緩解這種壓力。
由于有大量嵌套的長(zhǎng)代碼，尤其是在使用Javascript時(shí)，幾乎不可能確定哪些括號(hào)相互匹配。這一工具有助于更容易地找到打開(kāi)和關(guān)閉，用顏色標(biāo)識(shí)括號(hào)對(duì)將使代碼更具可讀性。趕緊下載吧!
7.Prettier
此前提到了ESLint，它可以自動(dòng)格式化連續(xù)的代碼，并顯示警告和錯(cuò)誤。
作為React/Native的開(kāi)發(fā)人員，保持代碼整齊干凈是必要的。首要的一點(diǎn)就是正確地縮進(jìn)和分隔以便更好地讀取代碼，特別是在處理編寫(xiě)已久的代碼時(shí)——帶有樣式、函數(shù)和處理程序的分隔非常重要，不僅方便自己，也方便了同事。要設(shè)置很簡(jiǎn)單，點(diǎn)擊保存時(shí)即可自動(dòng)格式化。
8.PathIntellisense
該擴(kuò)展是筆者常用VSCode擴(kuò)展之一。它可以節(jié)省很多時(shí)間。作為一名前端開(kāi)發(fā)人員，筆者時(shí)常健忘，但又需要用到大量的組件、擴(kuò)展和安裝包，特別是在使用React格式化時(shí)，因此，需要一些有助于處理文件路徑的東西。
大型項(xiàng)目中的工作麻煩多多，pathIntellisense將是你的左臂右膀。當(dāng)嘗試在引文中輸入一條路徑時(shí)，智能感知會(huì)自動(dòng)填寫(xiě)或顯示建議。路徑智能感知還可以幫助自動(dòng)完成所有隱藏文件。
9.BrowserPreview
該擴(kuò)展對(duì)于前端開(kāi)發(fā)人員而言必不可少。與其在Chrome中打開(kāi)另一個(gè)窗口來(lái)瀏覽在代碼中所做的更改，不如下載這個(gè)瀏覽器進(jìn)行預(yù)覽，這樣在VSCod中即可完成所有的工作。
該擴(kuò)展可顯示代碼的瀏覽器預(yù)覽，因此不必在瀏覽器上打開(kāi)標(biāo)簽就可以看到一些小改動(dòng)，大大了節(jié)省時(shí)間和空間。
10.Debuggerfor Chrome
這是筆者最愛(ài)和使用最多的VSCode擴(kuò)展。作為一個(gè)前端網(wǎng)頁(yè)移動(dòng)開(kāi)發(fā)者，Debugger for Chrome為筆者提供了很大的幫助。特別是對(duì)于JavaScript開(kāi)發(fā)人員來(lái)說(shuō)，它可以節(jié)省很多做小改動(dòng)的時(shí)間，有助于快速地找到并解決bug，對(duì)調(diào)試非常有幫助。
想要查找錯(cuò)誤來(lái)自哪些行和函數(shù)，甚至查看其數(shù)據(jù)處理，控制臺(tái)可以提供很大的幫助。
11.MaterialIcon Theme
通過(guò)該擴(kuò)展可為文件列表選擇漂亮可愛(ài)的圖標(biāo)。如果文件是JavaScript，那么在文件名旁邊的material樣式中會(huì)有一個(gè)JavaScript圖標(biāo)。若是從事視覺(jué)開(kāi)發(fā)，那么該擴(kuò)展就再適合不過(guò)了。
12.Javascript (ES6) Code Snippets
若你是JavaScript開(kāi)發(fā)人員，Javascript (ES6) Code Snippets將是你最好的幫手。無(wú)論使用什么JavaScript框架，此擴(kuò)展都將有所幫助。如果只是一遍又一遍地輸入相同的通用代碼，效果倒不是很明顯。
該代碼片段十分方便，是一個(gè)輕量級(jí)的庫(kù)擴(kuò)展，它可以綁定任何標(biāo)準(zhǔn)的JavaScript調(diào)用，因此只需鍵入快捷代碼，即可看到整個(gè)通用代碼自動(dòng)輸入到編輯器中。該擴(kuò)展不僅支持Javascript ES6，還支持Typescript、Reactjs、Vue和HTML。
13.LiveServer
在使用Live Server時(shí)，該VSCode擴(kuò)展將有助于打開(kāi)當(dāng)前項(xiàng)目的Live web服務(wù)器。一般這項(xiàng)工作用像Webpack這樣的構(gòu)建器完成即可，但是該擴(kuò)展顯然更為有效。只需右擊并打開(kāi)運(yùn)行l(wèi)ive server，便會(huì)自動(dòng)完成剩余的工作。
14.Github 擴(kuò)展
若正在使用Github作為項(xiàng)目存儲(chǔ)庫(kù)，或者希望使用其他開(kāi)發(fā)人員的源代碼存儲(chǔ)庫(kù)，那么這個(gè)擴(kuò)展就是為您量身定做。
順便一提，Github現(xiàn)在由微軟所有和管理，所以Github和VSCode現(xiàn)在都是微軟產(chǎn)品之一。
使用Github擴(kuò)展，可以輕松地連接其他開(kāi)發(fā)人員的存儲(chǔ)庫(kù)、喜歡的開(kāi)發(fā)人員的存儲(chǔ)庫(kù)，甚至自己的存儲(chǔ)庫(kù)。經(jīng)常使用Github的話，切換存儲(chǔ)庫(kù)將極為順手。
15.GitLens
Gitlens是另一個(gè)好用的擴(kuò)展。它擴(kuò)充了當(dāng)前的VSCode Git功能，能夠從以前所作的提交和更改中同時(shí)執(zhí)行代碼比較，還擁有其他一些很厲害的特性。
16.NPM
所有現(xiàn)代開(kāi)發(fā)人員都知道NPM是什么，以及它為什么這么重要。Node包管理器是一個(gè)可管理Package .json文件的擴(kuò)展。如果需要的依賴項(xiàng)以及NPM包的版本控制尚未安裝，它會(huì)給出警告。
筆者所處理的大多數(shù)bug和錯(cuò)誤都來(lái)自于使用的NPM包、函數(shù)和特性，因?yàn)樗鼈兣c其他包不兼容，所以無(wú)法運(yùn)行。如果沒(méi)有它所要求的依賴項(xiàng)沒(méi)有兼容的版本那可真是鴨梨山大！
17.Beautify
Beautify是另一用于代碼格式化的良好擴(kuò)展，與前文提到的Prettier幾乎一樣，但是效果更漂亮。到目前為止，它已有將近1200萬(wàn)的下載量了，還用筆者再多說(shuō)什么嗎。它可以格式化用Javascript、JSON、Sass、CSS和HTML編寫(xiě)的代碼。
18.Live Sass Compiler
如果您喜好Sass風(fēng)格，或者只是因?yàn)樗琼?xiàng)目應(yīng)用程序需求的一部分而恰好正在使用Sass，那么這個(gè)VSCode擴(kuò)展就是為您而生的!
它會(huì)實(shí)時(shí)將SASS/SCSS文件編譯成CSS文件，并自動(dòng)提供應(yīng)用程序或?yàn)g覽器中已編譯樣式的實(shí)時(shí)預(yù)覽。
19.Emmet
自筆者開(kāi)始使用VSCode以來(lái)，就一直在使用Emmet。它可以幫助開(kāi)發(fā)人員提高編寫(xiě)代碼的速度。使用該擴(kuò)展不久之后就再也離不開(kāi)它了。
20.VSCode Icons
這是為前端開(kāi)發(fā)人員打造的VSCode擴(kuò)展。與前文提到的material圖標(biāo)很相似，但是設(shè)計(jì)不同。前端開(kāi)發(fā)人員通常都喜歡可視化，對(duì)吧。這個(gè)圖標(biāo)有助于查看文件類型，不管它們是HTML,CSS, Javascript還是其他類型。
21.顏色選擇器
顏色選擇器擴(kuò)展有助于輕松選擇CSS文件中的顏色。它將立即反映或應(yīng)用到當(dāng)前正在處理的屬性。若喜歡使用RGBA顏色，也可以使用。
22.Quokka
Quokka被稱為JavaScript開(kāi)發(fā)人員的現(xiàn)代便簽板。其構(gòu)建旨在幫助開(kāi)發(fā)人員進(jìn)行代碼檢查。這是一個(gè)完美的解決方案。
與其他VSCode擴(kuò)展相比，它非常輕量級(jí)、高效且強(qiáng)大，有助于加快工作進(jìn)程。同時(shí)，它又是實(shí)時(shí)的，可以給出即時(shí)反饋。
它可以為每個(gè)結(jié)果匹配一個(gè)固定的顏色類型，以便開(kāi)發(fā)人員更容易理解代碼。
23.Live Share
Live Share是VSCode文本編輯器中最先進(jìn)的特性之一。當(dāng)與團(tuán)隊(duì)成員一起工作時(shí)，它無(wú)可挑剔。LiveShare的功能之一是允許每個(gè)開(kāi)發(fā)人員實(shí)時(shí)地與其他開(kāi)發(fā)人員共享代碼片段。
這一點(diǎn)堪稱完美，且有助于實(shí)現(xiàn)更加高效和多產(chǎn)團(tuán)隊(duì)協(xié)作。LiveShare允許即時(shí)共享當(dāng)前的項(xiàng)目，即使在調(diào)試時(shí)也是如此。
協(xié)作者不需要安裝任何存儲(chǔ)庫(kù)、sdk或任何東西來(lái)連接其他開(kāi)發(fā)人員的當(dāng)前代碼。團(tuán)隊(duì)中的每個(gè)人都可以通過(guò)協(xié)作來(lái)遠(yuǎn)程探索和修復(fù)問(wèn)題。
24.ES7, React, Redux & GraphQL Snippets
高級(jí)開(kāi)發(fā)人員目前使用的多是JavaScript框架(如React)，以及其他與生產(chǎn)和復(fù)雜應(yīng)用程序兼容的技術(shù)，這項(xiàng)擴(kuò)展是為他們量身定做的。
反復(fù)輸入標(biāo)準(zhǔn)代碼效率低下。在該代碼片段的幫助下，可以輕松創(chuàng)建基于類的組件、功能組件、輸入項(xiàng)、生命周期方法等，只需鍵入快捷代碼，這是筆者使用最多的擴(kuò)展之一，因?yàn)楣P者一直使用的是Reactjs和React Native。
25.REST 客戶端
另一個(gè)高級(jí)工具是Rest客戶端擴(kuò)展，在使用其他第三方工具和APIs時(shí)，它將大有幫助。另外也有助于輕松發(fā)出HTTP請(qǐng)求。
通過(guò)此擴(kuò)展可輕松地在代碼編輯器中直接調(diào)用和結(jié)束，大大節(jié)省了時(shí)間——你可以使用這個(gè)方法，而不是只為實(shí)現(xiàn)一個(gè)請(qǐng)求而來(lái)回切換瀏覽器或郵箱。
圖源：unsplash
無(wú)論是追求高效，還是尋求體驗(yàn)，在這里你都將找到滿意的答案。
新聞名稱：干貨滿滿！25種絕佳VSCode擴(kuò)展，體驗(yàn)便捷高效的生活
網(wǎng)頁(yè)路徑：http://www.dlmjj.cn/article/djspgpo.html
