Visual Studio Code（VS code）你们都在用吗？或许你们需要看一下这篇博文

怼烎@ 2022-02-27 07:38 175阅读 0赞

> **小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。**

# 写在前面 #

在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。

都不用我安利VS code，大家就会乖乖的去用，无数个大言不惭的攻城狮，都被VS code比德芙还丝滑的强大功能所折服。

我是来给大家安利插件的，想做个比较全面的插件集合给大家。网上的我也看过一些，但是都比较零散，时间也久了一些，我结合最近的情况，总结一下

造福大家，才是我想做的。手动比心❤。

# 正文 #

## 一.日常安利　VS code ##

VS vode特点：

*  开源，免费；
 *  自定义配置
 *  集成git
 *  智能提示强大
 *  支持各种文件格式（html/jade/css/less/sass/xml）
 *  调试功能强大
 *  各种方便的快捷键
 *  强大的插件扩展

对前端这么友好，没理由不用。

>   Visual Studio Code（VScode ）官网　：[https://code.visualstudio.com/][https_code.visualstudio.com]

> Visual Studio Code（VScode ）github地址 ：[https://github.com/Microsoft/vscode][https_github.com_Microsoft_vscode]

## 二.怎么安装插件？ ##

方法一：

*  按F1或Ctrl+Shift+p，输入extensions，点击第一个就可以
 *  ![1416523-20181206153427966-260575790.png][]

方法二：

*  ctrl + P 然后输入 >ext install
 *  ![1416523-20181206153328337-1360629846.png][]

方法三：

*  点击图中位置
 *  ![1416523-20181206153533780-591397872.png][]

## 三.插件合集 ##

> 插件官网：[https://marketplace.visualstudio.com/][https_marketplace.visualstudio.com]

每一个插件名都超链接到官网，注意查看

### a.配置类插件： ###

**1.[Settings Sync][]**

最好用的插件，没有之一，一台电脑配置好之后，其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了，

使用GitHub Gist同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。

![1416523-20181206162846619-523184775.png][]

**2.[Debugger for Chrome][]**

从VS Code调试在Google Chrome中运行的JavaScript代码。

用于在Google Chrome浏览器或支持[Chrome DevTools协议的][Chrome DevTools]其他目标中调试JavaScript代码的VS Code扩展。

![1416523-20181206164127036-1621084600.png][]

**3.[beautify][]**

格式化代码工具

美化`javascript`，`JSON`，`CSS`，`Sass`，和`HTML`在Visual Studio代码。

![1416523-20181206174520569-1531269029.png][]

**4.[Atuo Rename Tag][]**

修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改

![1416523-20181206174812723-187738775.png][]

**5.[中文（简体）语言包][Link 1]**

[Chinese (Simplified) Language Pack for Visual Studio Code][Link 1]

将界面转换为中文，对英语不好的人，非常友好。例如我。。。

![1416523-20181206154608477-1879711262.png][]

**6.[Code Spell Checker][]**

代码拼写检查器

一个与camelCase代码配合良好的基本拼写检查程序。

此拼写检查程序的目标是帮助捕获常见的拼写错误，同时保持误报数量较低。

![1416523-20181206155904453-115465020.png][]

**7.[vscode-icons][]**

显示Visual Studio代码的图标，目前该插件已被vscode内部支持："文件" -> "首选项" -> "文件图标主题"

![1416523-20181206165818940-538883197.png][]

**8.[guides][]**

显示代码对齐辅助线，很好用

![1416523-20181206170217337-427163549.png][]

9.[Rainbow Brackets][]

为圆括号，方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员，当然还有JavaScript和其他程序员特别有用。

效果如下：

![1416523-20181206170530148-994048515.png][]

**10.[Bracket Pair Colorizer][]**

用于着色匹配括号

![1416523-20181206175403016-1968892637.png][]

**11.[Indent-Rainbow][]**

用四种不同颜色交替着色文本前面的缩进

![1416523-20181206170923368-1499870572.png][]

**12.[filesize][]**

在状态栏中显示当前文件大小，点击后还可以看到详细创建、修改时间

![1416523-20181206175117373-859815432.png][]

**13.Import Cost**

对引入的计算大小

![1416523-20181206175535740-1762311521.png][]

**14.[Path Intellisense][]**

可自动填充文件名。

![1416523-20181206171352570-1802692211.png][]

**15.[WakaTime][] **

从您的编程活动自动生成的度量标准，见解和时间跟踪。

![1416523-20181206154852977-1089454238.png][]

**16.[GitLens][]**

git日志查看插件

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码作者身份，还能通过强大的比较命令获得有价值的见解等等

![1416523-20181206155104900-2060209830.png][]

**17..[REST Client][]**

REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应。

![1416523-20181206155402611-1050725814.png][]

**18.[Npm Intellisense][] **

用于在 import 语句中自动填充 npm 模块

require 时的包提示（最新版的vscode已经集成此功能）

![1416523-20181206155553112-464065538.png][]

**19.[Azure Storage][]**

VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器，文件共享，表和队列。按照[本教程][Link 2]从VS Code部署Web应用程序到Azure存储。

![1416523-20181206160202864-1288887276.png][]

**20.[Project Manager][]**

它可以帮助您轻松访问项目，无论它们位于何处。*不要再错过那些重要的项目了*。您可以定义自己的**收藏**项目，或选择自动检测**VSCode**项目，**Git**，**Mercurial**和**SVN**存储库或**任何**文件夹。

从版本8开始，您就有了专门的项目**活动栏**！

以下是**Project Manager**提供的一些功能：

*  将任何项目保存为**收藏夹**
 *  自动检测**VSCode**，**GIT中**，**水银**或**SVN**存放区
 *  在相同或新窗口中打开项目
 *  识别*已删除/重命名的*项目
 *  一个**状态栏**标识当前项目
 *  专门的**活动栏**

![1416523-20181206160353637-1420849990.png][]

**21.[Language Support for Java(TM) by Red Hat][Language Support for Java_TM_ by Red Hat][redhat.java][Language Support for Java_TM_ by Red Hat]**

这个插件，这个下载次数，安装就对了。

![1416523-20181206173123464-1710552650.png][]

**22.[Todo Tree][] **

此扩展可以快速搜索（使用[ripgrep][]）您的工作区以获取TODO和FIXME等注释标记，并在资源管理器窗格的树视图中显示它们。单击树中的TODO将打开文件并将光标放在包含TODO的行上。

找到的TODO也可以在打开的文件中突出显示。

![1416523-20181206160705142-312341754.png][]

### b.VS code 主题集合 ###

1.[Night Owl][]

一个非常适合夜猫子的 VS Code 主题。像是为喜欢深夜编码的人精心设计的。

![1416523-20181206171701638-497301226.png][]

2.[Atom One Dark Theme][]

一个基于Atom的黑暗主题

![1416523-20181206171542045-692178595.png][]

3.[Dracula Official][]

官方吸血鬼主题，博主用的就是这款，很漂亮

![1416523-20181206180110876-84601184.png][]

4.[One Dark Pro][]

Atom标志性的One Dark主题，也是VS Code下载次数最多的主题之一！

![1416523-20181206180306127-882727765.png][]

5.[Bimbo][]

简约而现代的神奇海洋主题

![1416523-20181206180511237-1715417004.png][]

###  c.代码提示提示类 ###

1.[HTML Snippets][]

完整的HTML代码提示，包括HTML5

![1416523-20181206172032488-204186600.png][]

2.[HTML CSS Support][]

在 html 标签上写class 智能提示css样式

![1416523-20181206172443974-1183078346.png][]

3.[jQuery Code Snippets][]

jQuery代码提示

超过130个用于JavaScript代码的jQuery代码片段。

只需键入字母'jq'即可获得所有可用jQuery代码片段的列表。

![1416523-20181206173334914-301408283.png][]

4.[HTMLHint][]

html代码检测，支持html5

![1416523-20181206174203386-1758440889.png][]

### d.语言相关 ###

1.[C＃][C]

*  适用于[.NET Core的][.NET Core]轻量级开发工具。
 *  伟大的C＃编辑支持，包括语法突出显示，智能感知，转到定义，查找所有引用等。
 *  调试支持.NET Core（CoreCLR）。注意：不支持单声道调试。桌面CLR调试[支持有限][Link 3]。
 *  支持Windows，macOS和Linux上的project.json和csproj项目。

2.[CodeMetrics][]

计算TypeScript / JavaScript文件的复杂性。

3.VUE插件

vetur   　　 语法高亮、智能感知、Emmet等

VueHelper  　　snippet代码片段

ESLint    　　将ESLint JavaScript集成到VS代码中。

prettier    代码规范性插件

4.[ Java Extension Pack][Java Extension Pack]

它是一组流行的扩展，可以帮助在Visual Studio Code中编写，测试和调试Java应用程序。查看[VS Code中的Java][VS Code_Java]以开始使用。

![1416523-20181206165228627-1133186655.png][]

作者：[Dawnzhang][]   
出处：[https://www.cnblogs.com/clwydjgs/p/10078065.html][https_www.cnblogs.com_clwydjgs_p_10078065.html]  
版权：本文版权归作者  
转载：欢迎转载，但未经作者同意，必须保留此段声明；必须在文章中给出原文连接；

**你可能感兴趣的**

*  [黑科技！Fundebug支持网页录屏!][Fundebug 1]
 *  [Async/Await替代Promise的6个理由][Async_Await_Promise_6]
 *  [30个极大提高开发效率的VS Code插件][30_VS Code]
 *  [10个JavaScript难点][10_JavaScript]
 *  [2018前端工程师成长路线图][2018]
 *  [Source Map入门教程][Source Map]
 *  [2018年最值得关注的30个Vue开源项目][2018_30_Vue]
 *  [10个最佳ES6特性][10_ES6]
 *  [重新思考单元测试][Link 4]
 *  [不要争了！技术选择没那么重要][Link 5]

[Fundebug]: https://www.fundebug.com/
[https_code.visualstudio.com]: https://code.visualstudio.com/
[https_github.com_Microsoft_vscode]: https://github.com/Microsoft/vscode
[1416523-20181206153427966-260575790.png]: /images/20220227/0932d0706566484a94c6820334b13753.png
[1416523-20181206153328337-1360629846.png]: /images/20220227/6f15e0c786204a5b8f6eb8b63efe8863.png
[1416523-20181206153533780-591397872.png]: /images/20220227/33f19e8d79dc4e4f9f9e36dd424908fe.png
[https_marketplace.visualstudio.com]: https://marketplace.visualstudio.com/
[Settings Sync]: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
[1416523-20181206162846619-523184775.png]: /images/20220227/5d5a8553d0064ef291c1a546713a218c.png
[Debugger for Chrome]: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
[Chrome DevTools]: https://chromedevtools.github.io/debugger-protocol-viewer/
[1416523-20181206164127036-1621084600.png]: /images/20220227/93fd6995b1104248ad64858b46b09d2a.png
[beautify]: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
[1416523-20181206174520569-1531269029.png]: /images/20220227/7c24615a9fb54495a7ea146212445933.png
[Atuo Rename Tag]: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
[1416523-20181206174812723-187738775.png]: /images/20220227/f89738b932d4463f972ab9b01d2e8851.png
[Link 1]: https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans
[1416523-20181206154608477-1879711262.png]: /images/20220227/03b3b14a28974a6db2c4117fd8fdb8df.png
[Code Spell Checker]: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
[1416523-20181206155904453-115465020.png]: /images/20220227/3a3357e8457b4eceba50e8f926620888.png
[vscode-icons]: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
[1416523-20181206165818940-538883197.png]: /images/20220227/71f2ee6b822a4b629ba4a12a232125df.png
[guides]: https://marketplace.visualstudio.com/items?itemName=spywhere.guides
[1416523-20181206170217337-427163549.png]: /images/20220227/373dd72e26a84f5e98de34cb215b0858.png
[Rainbow Brackets]: https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets
[1416523-20181206170530148-994048515.png]: /images/20220227/3dc1b245d2c84feb9db015a87685d43d.png
[Bracket Pair Colorizer]: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
[1416523-20181206175403016-1968892637.png]: /images/20220227/adcf86f4fd3e43b1b461ce60852c4779.png
[Indent-Rainbow]: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
[1416523-20181206170923368-1499870572.png]: /images/20220227/d33f028670104be5aa4ac0b2dbc51bc8.png
[filesize]: https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize
[1416523-20181206175117373-859815432.png]: /images/20220227/e695debea4fc452cbc4d39797280481f.png
[1416523-20181206175535740-1762311521.png]: /images/20220227/52b27ed02567495d8c41e7031732960d.png
[Path Intellisense]: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
[1416523-20181206171352570-1802692211.png]: /images/20220227/9f506cc4a8f94e4f8c743f705d6b5ec7.png
[WakaTime]: https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime
[1416523-20181206154852977-1089454238.png]: /images/20220227/9c972bf5dd5d40c9ae40a53a679c8f9d.png
[GitLens]: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
[1416523-20181206155104900-2060209830.png]: /images/20220227/2b11beb31d2c4d86a69bcc55f5eaf172.png
[REST Client]: https://marketplace.visualstudio.com/items?itemName=humao.rest-client
[1416523-20181206155402611-1050725814.png]: /images/20220227/9aaa308b689e469a911f8335f524a5fe.png
[Npm Intellisense]: https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
[1416523-20181206155553112-464065538.png]: /images/20220227/ad13ff77152a40e38e4a04f40d7f679e.png
[Azure Storage]: https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestorage
[Link 2]: https://code.visualstudio.com/tutorials/static-website/getting-started
[1416523-20181206160202864-1288887276.png]: /images/20220227/73dc891622b64f1b8f2cbf3520f0bb50.png
[Project Manager]: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
[1416523-20181206160353637-1420849990.png]: /images/20220227/5a2ddfbf240c47f7a525e80faba4013b.png
[Language Support for Java_TM_ by Red Hat]: https://marketplace.visualstudio.com/items?itemName=redhat.java#overview
[1416523-20181206173123464-1710552650.png]: /images/20220227/494eccfe9c6e443caa97b997aaadeedd.png
[Todo Tree]: https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
[ripgrep]: https://github.com/BurntSushi/ripgrep
[1416523-20181206160705142-312341754.png]: /images/20220227/d240fdd5bc9d45e99c236b73b900e12c.png
[Night Owl]: https://marketplace.visualstudio.com/items?itemName=sdras.night-owl
[1416523-20181206171701638-497301226.png]: /images/20220227/d422d60fd28a471fb46df9d38fc44ae3.png
[Atom One Dark Theme]: https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark
[1416523-20181206171542045-692178595.png]: /images/20220227/3c2fd3adf4e9451dbc59749527f88b1a.png
[Dracula Official]: https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula
[1416523-20181206180110876-84601184.png]: /images/20220227/4331aa2d7d994785be0b560722f8def5.png
[One Dark Pro]: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
[1416523-20181206180306127-882727765.png]: /images/20220227/90644faccd944056a802c52bd7a09dc4.png
[Bimbo]: https://marketplace.visualstudio.com/items?itemName=pawelgrzybek.bimbo-theme
[1416523-20181206180511237-1715417004.png]: /images/20220227/968db9d6589d42be9d19c7e62761d651.png
[HTML Snippets]: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
[1416523-20181206172032488-204186600.png]: /images/20220227/4f52601e24b442539b627fa302efe7dc.png
[HTML CSS Support]: https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
[1416523-20181206172443974-1183078346.png]: /images/20220227/089052aefba04870824251fc8cad7404.png
[jQuery Code Snippets]: https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets
[1416523-20181206173334914-301408283.png]: /images/20220227/37a11ffd03cb4ffead1500f063099896.png
[HTMLHint]: https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint
[1416523-20181206174203386-1758440889.png]: /images/20220227/c2ca6190fd2645b58fc11bfe141def37.png
[C]: https://link.jianshu.com/?t=https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp
[.NET Core]: https://dotnet.github.io/
[Link 3]: https://github.com/OmniSharp/omnisharp-vscode/wiki/Desktop-.NET-Framework
[CodeMetrics]: https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-codemetrics
[Java Extension Pack]: https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack
[VS Code_Java]: https://code.visualstudio.com/docs/languages/java
[1416523-20181206165228627-1133186655.png]: /images/20220227/22faa8a2e56a44878361980a70593cae.png
[Dawnzhang]: https://www.cnblogs.com/clwydjgs/
[https_www.cnblogs.com_clwydjgs_p_10078065.html]: https://www.cnblogs.com/clwydjgs/p/10078065.html
[Fundebug 1]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/
[Async_Await_Promise_6]: https://blog.fundebug.com/2017/04/04/nodejs-async-await/
[30_VS Code]: https://blog.fundebug.com/2018/07/24/vs-extensions/
[10_JavaScript]: https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/
[2018]: https://blog.fundebug.com/2018/09/04/2018-frontend-roadmap/
[Source Map]: https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
[2018_30_Vue]: https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/
[10_ES6]: https://blog.fundebug.com/2017/08/21/10-best-es6-feature/
[Link 4]: https://blog.fundebug.com/2017/12/20/rethinking-unit-test/
[Link 5]: https://blog.fundebug.com/2018/07/19/technology-selection-is-not-critical/