推荐VScode十大实用插件
共 5203字,需浏览 11分钟
·
2020-12-21 15:10
本文来源于:老袁聊前端
宇宙最好用的编译器: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
![](https://filescdn.proginn.com/04ce8bfb8c725f4e8b5c82ab7f0e16ac/a8ec4ee94e01472f3c69213de43b502a.webp)
给夜猫专用主题,而且针对喜欢深夜工作的码农进行了优化,甚至顾及到了有色盲和夜盲的人。
推荐指数:????? github:https://github.com/sdras/night-owl-vscode-theme VSCode地址:https://marketplace.visualstudio.com/items?itemName=sdras.night-owl
One Dark Pro
![](https://filescdn.proginn.com/cea0487a8d53e959a15c121d91dd2183/3439d003819a1febc294440e267a4231.webp)
Atom 的标志性 One Dark 主题,也是VS Code中安装次数最多的主题之一。
推荐指数:???? github:https://github.com/Binaryify/OneDark-Pro VSCode地址:https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
Material Theme
![](https://filescdn.proginn.com/7b8346a6037df8d61d1f01b9f4f68afe/4a5ec81fa856376d93640b4c7cc4bec7.webp)
号称最适配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。
![](https://filescdn.proginn.com/55dbc43d51a226a434067be54e1f72db/33c15c8723303b8bca3b0393cfed6910.webp)
推荐指数:???? github:https://github.com/ayu-theme/vscode-ayu VSCode地址:https://marketplace.visualstudio.com/items?itemName=teabyii.ayu
Material Theme Icons
![](https://filescdn.proginn.com/61eb0dc0ca0ee54b55c160f97bc76d3f/4a5ec81fa856376d93640b4c7cc4bec7.webp)
推荐指数:????? github:https://github.com/material-theme/vsc-material-theme-icons VSCode地址:https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons
Dracula Theme
![](https://filescdn.proginn.com/afd5aef2f3c85d215c4fabab68990196/f044e6ea52e3a6cd51b0b48fd134da79.webp)
推荐指数:????? 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
![](https://filescdn.proginn.com/d28940003ba4ae47aa2b10a84370cfaa/2d1a1e3cd64d9bbc113ac4271a165249.webp)
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
启动具有实时重新加载功能的本地开发服务器,可以处理静态和动态页面。
![](https://filescdn.proginn.com/4e3bf49d057595f203082b891092cc31/bf2f94135a133b92451609c1029b4ce4.webp)
github:https://github.com/ritwickdey/vscode-live-server VSCode地址:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
6.字体选项
❝依据个人喜好配置
❞
Cascadia Code(配置fontLigatures)
![](https://filescdn.proginn.com/3212106edac72bb45e7a44712ebead35/d0f81a75b404e5caf4ad62728db262a7.webp)
微软官方推荐,值得拥有~
推荐指数:????? 下载地址:https://github.com/microsoft/cascadia-code/releases
Fira Code
![](https://filescdn.proginn.com/555e03d8d705dc396be8c1737bd9f6c1/60c2b9e38f51051784b201319e7459a6.webp)
推荐指数:???? 下载地址:https://github.com/tonsky/FiraCode
Hack Nerd Font
![](https://filescdn.proginn.com/b9dec5f7ddd7e20fc176cbcf0c21e222/3597b87afa18f57aeb799e52fb9da7ba.webp)
推荐指数:????? 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]或启动时出现以下对话框:
![](https://filescdn.proginn.com/0c573a61ee79d57e086c3ed15a2e4b70/b8a08b97e4cbc85caf52a4ff1217139e.webp)
推荐指数:????? 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加个背景
![](https://filescdn.proginn.com/fd9ce9e78e7b3a48c9ed3f282dd6e0b6/74a3d9d246bb22d1138dc0d0a503ff16.webp)
推荐指数:????? VSCode地址:https://marketplace.visualstudio.com/items?itemName=shalldie.background
SynthWave '84
据作者说他想穿越回1984年的夏天,因为他喜欢那个年代的霓虹灯。。。
![](https://filescdn.proginn.com/e78763ff3d7ce060c7226ae266539192/767a2d4ea7a671af58f583c5ef27d5ed.webp)
推荐指数:????? github:https://github.com/robb0wen/synthwave-vscode VSCode地址:https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode
Vibrancy
半透明效果
![](https://filescdn.proginn.com/119679174d135333883787d2631736af/a812e8445f8eca2a1358b46e7979e542.webp)
推荐指数:????? github:https://github.com/EYHN/vscode-vibrancy VSCode地址:https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy
8.提升你的正则技能
![](https://filescdn.proginn.com/e2e5603fb15a087b6994585ddf543219/22aab5a2d5c965cf246c795c8cd4b0ae.webp)
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
![](https://filescdn.proginn.com/af4405866bb7430b0bf5077a785043a9/ad9d428d30e9b52a7c1839bbdd27c727.webp)
推荐指数:??? github:https://github.com/prettier/prettier-vscode VSCode地址:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
ESLint
![](https://filescdn.proginn.com/e15f718fdc104d907af1e59f354413ac/e938e1512a8ef76e0d6e0d7b56362f89.webp)
地球人都知道,不多说了
推荐指数:?????
highlight-icemode
![](https://filescdn.proginn.com/8c5f38abe770f5ac0f9ded2114be438c/9dd6e64788cf801bef3443141ce454a3.webp)
推荐指数:??? github:https://github.com/EsIce/highlight-icemode VSCode地址:https://marketplace.visualstudio.com/items?itemName=iceliu.highlight-icemode
Bracket Pair Colorizer 2
![](https://filescdn.proginn.com/3610e682a2c57718844acf6af6d33529/864b31e5f848f41f533bf5a62e59fab1.webp)
推荐指数:??? 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
![](https://filescdn.proginn.com/18a72b59abeadef6f0dd73d5a9272d4f/5fcb73053b3a30c42cfd48b82b7a3caf.webp)
VSCode地址:https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens