建站
咨詢
售后
建站咨詢
新聞中心
免費(fèi)、開源、功能強(qiáng)大，vscode幾乎是前端工程師們必備的輕量級(jí)代碼編輯器。
公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出延川免費(fèi)做網(wǎng)站回饋大家。
它幾乎支持所有主流的程序語言的語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號(hào)匹配等特性，支持插件擴(kuò)展，并針對(duì)網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。
其他的代碼編輯器在打開超大文件時(shí)可能會(huì)產(chǎn)生明顯的卡頓，但vscode幾乎就是秒開。因?yàn)榇蜷_速度特別快，vscode還經(jīng)常被用作普通文本閱讀器。
但有時(shí)需要輸入的代碼量比較大，在編輯的時(shí)候容易出現(xiàn)各種各樣的小bug，檢查修改起來十分費(fèi)力。這個(gè)時(shí)候，在vscode中安裝幾款插件，就可以實(shí)現(xiàn)輕松改查，一鍵格式對(duì)正，提高編程效率。
今天，小渡就為大家推薦8款入門級(jí)vscode插件，帶你完成從顏值到功能的全方位提升。話不多說，一起來看看吧！
1、顏值提升利器：Material Theme
MaterialTheme是一款vscode主題插件，通過選擇不同的主題樣式，不僅可以調(diào)整代碼編輯器主題顏色，也能同時(shí)對(duì)代碼顏色進(jìn)行適配，讓編輯器界面更加清爽和美觀。
目前，MaterialTheme提供了十種主題顏色，在vscode中可實(shí)現(xiàn)一鍵安裝，輕松換色。
欲先攻其事，必先利其器。賞心悅目的代碼編輯器界面，也會(huì)讓寫代碼的過程變得趣味十足。
2、治好你的“代碼強(qiáng)迫癥”：Prettier
在多人開發(fā)同一個(gè)項(xiàng)目，合并代碼時(shí)，經(jīng)常會(huì)遇到各人代碼風(fēng)格迥異，換行空格亂七八糟，2格、4格縮進(jìn)交替上演等等如此令人崩潰的狀況，而單人開發(fā)時(shí)，一些小錯(cuò)誤也不可避免，簡(jiǎn)直像張東升一樣分分鐘把強(qiáng)迫癥逼上懸崖。
這個(gè)時(shí)候，就需要Prettier閃亮登場(chǎng)了。Prettier是VSCode代碼格式增強(qiáng)工具，一個(gè)配置文件，配合vscode，保存即將代碼全部格式化。代碼格式統(tǒng)一的問題，交給Prettier再合適不過了，輕松治好你的“代碼強(qiáng)迫癥”。
不過Prettier只關(guān)心格式化文件（最大長(zhǎng)度、混合標(biāo)簽和空格、引用樣式等），這顯然是不夠的，項(xiàng)目運(yùn)行中還是需要引入ESlint，二者配合才能讓項(xiàng)目代碼“茁壯成長(zhǎng)”。
3、括號(hào)連連看：Bracket Pair Colorizer 2
除了各種字母和單詞，編程中最常見的就是各種各樣的括號(hào)了。隨著代碼量的增多，{[()]}天團(tuán)開始瘋狂嵌套，這還讓我們?cè)趺从淇斓腸odereview 或者改代碼？
圖片源自網(wǎng)絡(luò)，僅做配文展示
還好有它——BracketPair Colorizer 2！這是一款在vscode上擁有五星好評(píng)的王者軟件，為代碼中的各種結(jié)對(duì)的括號(hào)兄弟們提供了顏色高亮等功能。
除此之外，BracketPair Colorizer 2還提供了各種的配置選項(xiàng)，包括顏色的唯一性的設(shè)置、顏色模式、設(shè)置選中括號(hào)時(shí)，相應(yīng)匹配括號(hào)的CSS、是否在Gutter中顯示選中的括號(hào)、是否顯示ScopeLine等等，可以滿足你對(duì)顏色高亮的不同需求。
小伙伴們還猶豫什么！不要睡，安它！
4、html自動(dòng)重命名插件：Auto Rename Tag
AutoRename Tag的特征是自動(dòng)重命名配對(duì)的HTML/ XML 標(biāo)簽，也可以在JSX中使用。在settings.json文件中的auto-rename-tag.activationOnLanguage中添加一項(xiàng)以設(shè)置擴(kuò)展名將被激活的語言。默認(rèn)情況下，它是**[“*”]**，將為所有語言激活。
修改html標(biāo)簽，AutoRename Tag將自動(dòng)幫你完成尾部閉合標(biāo)簽的同步修改。
5、幫助你快速找到css代碼：Css peek
CSSPeek插件擴(kuò)展了HTML和ejs代碼編輯功能，支持在源代碼中的字符串中找到css/scss/less(類和id)。這在很大程度上是受方括號(hào)中稱為CSS內(nèi)聯(lián)編輯器的類似功能的啟發(fā)。
這個(gè)擴(kuò)展支持所有正常的符號(hào)定義跟蹤功能，但它針對(duì)的是css選擇器(類、id和HTML標(biāo)記)。這包括：
查找：以內(nèi)聯(lián)方式加載css文件并在那里進(jìn)行快速編輯(Alt+F12)
轉(zhuǎn)到定義：直接跳轉(zhuǎn)到css文件或在新編輯器中打開它(F12)
鼠標(biāo)懸停：用鼠標(biāo)懸停在符號(hào)上顯示定義(Ctrl+ Hover)
此外，如果已經(jīng)知道類名或ID名，Csspeek還可以在你的html中鼠標(biāo)指向某個(gè)class或者id名稱，按住Ctrl鍵+鼠標(biāo)左鍵可以直接定位到該名稱的CSS的位置，并快速跳轉(zhuǎn)到正確的CSS/SCSS/LESS代碼，可以說是大大提高了開發(fā)效率。
6、換機(jī)不用愁：Settings Sync
Vscode上又一位五星好評(píng)大佬級(jí)插件——代碼同步工具SettingsSync。它是基于GitHubTokens 和GitHubGist 功能實(shí)現(xiàn)，可以一鍵輕松實(shí)現(xiàn)上傳下載跨多臺(tái)機(jī)器同步設(shè)置、代碼片段、主題、文件圖標(biāo)、啟動(dòng)、鍵綁定、工作區(qū)和擴(kuò)展。
因?yàn)閂scode不像webstorm那樣幾乎集成了所有需要的插件，它需要一個(gè)個(gè)手動(dòng)安裝。但在插件多了之后，如果更換了設(shè)備，來回安裝vscode插件及快捷鍵配置會(huì)很麻煩。
這時(shí)，用SettingsSync插件就可以輕松解決這個(gè)問題，通過配置文件的形式，就可以在多個(gè)設(shè)備之間同步vscode的配置了，非常好用。
7、圖像預(yù)覽工具：Image preview
Imagepreview是一款非常實(shí)用的圖像預(yù)覽工具。作為一款vscode五星好評(píng)的圖片工具，它會(huì)根據(jù)路徑在鼠標(biāo)懸停時(shí)，在代碼欄顯示圖片及其尺寸，很大程度上節(jié)約了我們翻閱圖片的時(shí)間與精力。
8、點(diǎn)亮匹配標(biāo)簽：Highlight Matching Tag
HighlightMatchingTag是一款突出顯示匹配的開始或結(jié)束標(biāo)簽，它的原理其實(shí)和instant-rename-tag完全是一樣的，只是綁定了不同的事件hook。
1、 通過 post-command-hook 監(jiān)聽光標(biāo)移動(dòng)事件，如果當(dāng)前處于 web-mode 模式時(shí)繼續(xù)處理
2、 如果光標(biāo)在Tag區(qū)域，找到匹配的光標(biāo)，然后用 Overlay 高亮匹配的標(biāo)簽
3、 如果光標(biāo)不在Tag區(qū)域，隱藏標(biāo)簽高亮
在安裝HighlightMatching Tag插件后，可以在用戶設(shè)置中自定義配對(duì)光標(biāo)。
除了一些好用的插件之外，還有一些實(shí)用的vscode快捷鍵，也可以提高工作效率噢——
Ctrl+ P ：轉(zhuǎn)到文件，您可以在VisualStudio Code 中移動(dòng)到打開的文件/文件夾的任何文件。
Ctrl+ ` ：在VSCode 中打開terminal
Alt+ Down：下移一行
Alt+ Up：上移一行
Ctrl+ D：將選定的字符移動(dòng)到下一個(gè)匹配字符串上
Ctrl+ Space：觸發(fā)建議
Shift+ Alt + Down：向下復(fù)制行
Shift+ Alt + Up：向上復(fù)制行
Ctrl+ Shift + T：重新打開最新關(guān)閉的窗口
本文題目：前端vscode必裝的效率插件，你知道嗎？
文章網(wǎng)址：http://www.5511xx.com/article/dpjhpdd.html
