本文來(lái)源于：老袁聊前端

宇宙最好用的編譯器：Vscode，推薦以下十大使用插件！

1.代碼智能提示

Kite AI Code AutoComplete

Kite 支持js與python的多行補(bǔ)全功能，可幫助你在保持流程順暢的同時(shí)加快編碼速度。

• 推薦指數(shù)：?????
• GitHub：https://github.com/kiteco/vscode-plugin
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

Tabnine Autocomplete AI

Tabnine 是功能強(qiáng)大的人工智能助手，能幫你更快地敲代碼并減少錯(cuò)誤。Tabnine 基于 AI 深度學(xué)習(xí)算法，能夠預(yù)測(cè)你編碼意圖并提供一鍵式代碼完成， 而且完全免費(fèi)。

• 推薦指數(shù)：?????
• github：https://github.com/codota/tabnine-vscode
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode
• 備注：低配電腦慎用

JavaScript (ES6) code snippets

支持JavaScript和TypeScript

• 推薦指數(shù)：???
• github：xabikos/vscode-javascript
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
• 備注：常規(guī)ES代碼提示塊

2.主題+文件夾Icons

?

依據(jù)個(gè)人喜好配置

?

Night Owl

給夜貓專(zhuān)用主題，而且針對(duì)喜歡深夜工作的碼農(nóng)進(jìn)行了優(yōu)化，甚至顧及到了有色盲和夜盲的人。

• 推薦指數(shù)：?????
• github：https://github.com/sdras/night-owl-vscode-theme
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=sdras.night-owl

One Dark Pro

Atom 的標(biāo)志性 One Dark 主題，也是VS Code中安裝次數(shù)最多的主題之一。

• 推薦指數(shù)：????
• github：https://github.com/Binaryify/OneDark-Pro
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

Material Theme

號(hào)稱(chēng)最適配Visual Studio Code的史詩(shī)般的主題。

• 推薦指數(shù)：???
• github：https://github.com/material-theme/vsc-material-theme
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

Ayu

一個(gè)色彩鮮艷的主題，提供三種版本：dark，light，mirage。

• 推薦指數(shù)：????
• github：https://github.com/ayu-theme/vscode-ayu
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=teabyii.ayu

Material Theme Icons

• 推薦指數(shù)：?????
• github：https://github.com/material-theme/vsc-material-theme-icons
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons

Dracula Theme

• 推薦指數(shù)：?????
• github：https://github.com/gerane/VSCodeThemes
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=gerane.Theme-Dracula

3.大型項(xiàng)目新建文件

advanced-new-file

• github：patbenatar/vscode-advanced-new-file
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file

4.分享代碼

carbon-now-sh

• VSCode地址：https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh

5.運(yùn)行調(diào)試代碼

Code Runner

• github：https://github.com/formulahendry/vscode-code-runner
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

javascript console utils

幫你一鍵插入?console.log()?并自動(dòng)填充內(nèi)容。

• github：https://github.com/whtouche/vscode-js-console-utils
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=whtouche.vscode-js-console-utils

Live Server

啟動(dòng)具有實(shí)時(shí)重新加載功能的本地開(kāi)發(fā)服務(wù)器，可以處理靜態(tài)和動(dòng)態(tài)頁(yè)面。

• github：https://github.com/ritwickdey/vscode-live-server
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

6.字體選項(xiàng)

?

依據(jù)個(gè)人喜好配置

?

Cascadia Code（配置fontLigatures）

微軟官方推薦，值得擁有～

• 推薦指數(shù)：?????
• 下載地址：https://github.com/microsoft/cascadia-code/releases

Fira Code

• 推薦指數(shù)：????
• 下載地址：https://github.com/tonsky/FiraCode

Hack Nerd Font

• 推薦指數(shù)：?????
• github：
• 下載地址：https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Hack

Menlo

• 推薦指數(shù)：???

Chalkboard

• 推薦指數(shù)：???

Consolas

• 推薦指數(shù)：???

Geeza pro

• 推薦指數(shù)：???

Roboto Mono

• 推薦指數(shù)：???

7.自定義VsCode

Fix VSCode Checksums

用于在更改VSCode核心文件后調(diào)整校驗(yàn)和的擴(kuò)展。一旦應(yīng)用了校驗(yàn)與更改并重新啟動(dòng)VSCode，就能夠消除所有關(guān)于核心文件被修改的警告，例如標(biāo)題欄中顯示[Unsupported]或啟動(dòng)時(shí)出現(xiàn)以下對(duì)話(huà)框：

• 推薦指數(shù)：?????
• github：https://github.com/lehni/vscode-fix-checksums
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=lehni.vscode-fix-checksums

Custom CSS and JS Loader

• 推薦指數(shù)：????
• github：https://github.com/be5invis/vscode-custom-css
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css

background

給你的VSCode加個(gè)背景

• 推薦指數(shù)：?????
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=shalldie.background

SynthWave '84

據(jù)作者說(shuō)他想穿越回1984年的夏天，因?yàn)樗矚g那個(gè)年代的霓虹燈。。。

• 推薦指數(shù)：?????
• github：https://github.com/robb0wen/synthwave-vscode
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

Vibrancy

半透明效果

• 推薦指數(shù)：?????
• github：https://github.com/EYHN/vscode-vibrancy
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy

8.提升你的正則技能

RegExp Preview and Editor

https://marketplace.visualstudio.com/items?itemName=Lulus.vscode-regexp-preivew

Regex Previewer

https://marketplace.visualstudio.com/items?itemName=le0zh.vscode-regexp-preivew

9.美化JavaScript代碼

Prettier - Code formatter

• 推薦指數(shù)：???
• github：https://github.com/prettier/prettier-vscode
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

ESLint

地球人都知道，不多說(shuō)了

• 推薦指數(shù)：?????

highlight-icemode

• 推薦指數(shù)：???
• github：https://github.com/EsIce/highlight-icemode
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=iceliu.highlight-icemode

Bracket Pair Colorizer 2

• 推薦指數(shù)：???
• github：https://github.com/CoenraadS/Bracket-Pair-Colorizer-2
• VSCode地址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

10.Package.json 及時(shí)查看包版本號(hào)

Version Lens

• VSCode地址：https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens

最后是主題推薦：Night Owl + Material Theme Icons + Vibrancy + Cascadia Code