本文來源于：老袁聊前端
宇宙最好用的編譯器：Vscode，推薦以下十大使用插件！
1.代碼智能提示
Kite AI Code AutoComplete
Kite 支援js與python的多行補全功能，可幫助你在保持流程順暢的同時加快編碼速度。
- 推薦指數： ????????????????
- GitHub：https://github.com/kiteco/vscode-plugin
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode
Tabnine Autocomplete AI
Tabnine 是功能強大的人工智能助手，能幫你更快地敲代碼并減少錯誤。Tabnine 基于 AI 深度學習算法，能夠預測你編碼意圖并提供一鍵式代碼完成， 而且完全免費。
- 推薦指數：????????????????????
- github：https://github.com/codota/tabnine-vscode
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode
- 備注：低配電腦慎用
JavaScript (ES6) code snippets
支援JavaScript和TypeScript
- 推薦指數：????????????
- github：xabikos/vscode-javascript
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
- 備注：正常ES代碼提示塊
2.主題+檔案夾Icons
❝
依據個人喜好配置
❞
Night Owl
Night Owl
給夜貓專用主題，而且針對喜歡深夜工作的碼農進行了優化，甚至顧及到了有色盲和夜盲的人。
- 推薦指數：????????????????????
- github：https://github.com/sdras/night-owl-vscode-theme
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=sdras.night-owl
One Dark Pro
One Dark Pro
Atom 的标志性 One Dark 主題，也是VS Code中安裝次數最多的主題之一。
- 推薦指數：????????????????
- github：https://github.com/Binaryify/OneDark-Pro
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
Material Theme
Material Theme
号稱最适配Visual Studio Code的史詩般的主題。
- 推薦指數：????????????
- github：https://github.com/material-theme/vsc-material-theme
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme
Ayu
一個色彩鮮豔的主題，提供三種版本：dark，light，mirage。
Ayu
- 推薦指數：????????????????
- github：https://github.com/ayu-theme/vscode-ayu
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=teabyii.ayu
Material Theme Icons
Material Theme Icons
- 推薦指數：????????????????????
- github：https://github.com/material-theme/vsc-material-theme-icons
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons
Dracula Theme
Dracula Theme
- 推薦指數：????????????????????
- github：https://github.com/gerane/VSCodeThemes
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=gerane.Theme-Dracula
3.大型項目建立檔案
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.運作調試代碼
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()
并自動填充内容。
- github：https://github.com/whtouche/vscode-js-console-utils
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=whtouche.vscode-js-console-utils
Live Server
啟動具有實時重新加載功能的本地開發伺服器，可以處理靜态和動态頁面。
Live Server
- github：https://github.com/ritwickdey/vscode-live-server
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
6.字型選項
❝
依據個人喜好配置
❞
Cascadia Code（配置fontLigatures）
Cascadia Code
微軟官方推薦，值得擁有～
- 推薦指數：????????????????????
- 下載下傳位址：https://github.com/microsoft/cascadia-code/releases
Fira Code
Fira Code
- 推薦指數：????????????????
- 下載下傳位址：https://github.com/tonsky/FiraCode
Hack Nerd Font
Hack Nerd Font
- 推薦指數：????????????????????
- github：
- 下載下傳位址：https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Hack
Menlo
- 推薦指數：????????????
Chalkboard
- 推薦指數：????????????
Consolas
- 推薦指數：????????????
Geeza pro
- 推薦指數：????????????
Roboto Mono
- 推薦指數：????????????
7.自定義VsCode
Fix VSCode Checksums
用于在更改VSCode核心檔案後調整校驗和的擴充。一旦應用了校驗與更改并重新啟動VSCode，就能夠消除所有關于核心檔案被修改的警告，例如标題欄中顯示[Unsupported]或啟動時出現以下對話框：
- 推薦指數：????????????????????
- github：https://github.com/lehni/vscode-fix-checksums
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=lehni.vscode-fix-checksums
Custom CSS and JS Loader
- 推薦指數：????????????????
- github：https://github.com/be5invis/vscode-custom-css
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css
background
給你的VSCode加個背景
- 推薦指數：????????????????????
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=shalldie.background
SynthWave '84
據作者說他想穿越回1984年的夏天，因為他喜歡那個年代的霓虹燈。。。
SynthWave '84
- 推薦指數：????????????????????
- github：https://github.com/robb0wen/synthwave-vscode
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode
Vibrancy
半透明效果
Vibrancy
- 推薦指數：????????????????????
- 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
Prettier - Code formatter
- 推薦指數：????????????
- github：https://github.com/prettier/prettier-vscode
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
ESLint
ESLint
地球人都知道，不多說了
- 推薦指數：????????????????????
highlight-icemode
- 推薦指數：????????????
- github：https://github.com/EsIce/highlight-icemode
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=iceliu.highlight-icemode
Bracket Pair Colorizer 2
Bracket Pair Colorizer 2
- 推薦指數：????????????
- github：https://github.com/CoenraadS/Bracket-Pair-Colorizer-2
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
10.Package.json 及時檢視包版本号
Version Lens
Version Lens
- VSCode位址：https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens
最後是主題推薦：Night Owl + Material Theme Icons + Vibrancy + Cascadia Code