前言

在前端开发中，有一个非常好用的工具，Visual Studio Code，简称 VS code。
都不用我安利 VS code，大家就会乖乖的去用，无数个大言不惭的攻城狮，都被 VS code 比德芙还丝滑的强大功能所折服。我是来给大家安利插件的，想做个比较全面的插件集合给大家。网上的我也看过一些，但是都比较零散，时间也久了一些，我结合最近的情况，总结一下
造福大家，才是我想做的。手动比心❤。

日常安利

VS code 特点：

开源，免费；

自定义配置

集成 git

智能提示强大

支持各种文件格式（html/jade/css/less/sass/xml）

调试功能强大

各种方便的快捷键

强大的插件扩展

对程序员这么友好，没理由不用。

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

Visual Studio Code（VScode ）github 地址：https://github.com/Microsoft/vscode

安装插件的方式

方法一：

按 F1 或 Ctrl + Shift + p ，输入 extensions ，点击第一个就可以

方法二：

ctrl + P 然后输入 ext install

方法三：

点击图中位置

插件合集

插件官网：https://marketplace.visualstudio.com/

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

配置类插件

Settings Sync
Settings Sync 插件地址
最好用的插件，没有之一，一台电脑配置好之后，其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了，
使用 GitHub Gist 同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。
Debugger for Chrome
从 VS Code 调试在 Google Chrome 中运行的 JavaScript 代码。
用于在 Google Chrome 浏览器或支持 Chrome DevTools 协议的其他目标中调试 JavaScript 代码的 VS Code 扩展。
beautify**

格式化代码工具

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

4.Atuo Rename Tag

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

5.中文（简体）语言包

Chinese (Simplified) Language Pack for Visual Studio Code

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

6.Code Spell Checker

代码拼写检查器

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

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

7.vscode-icons

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

8.guides

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

9.Rainbow Brackets

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

效果如下：

10.Bracket Pair Colorizer

用于着色匹配括号

11.Indent-Rainbow

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

12.filesize

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

13.Import Cost

对引入的计算大小

1	ext install wix.vscode-import-cost

14.Path Intellisense

可自动填充文件名。

1	ext install christian-kohler.path-intellisense

**15.WakaTime **

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

16.GitLens

git 日志查看插件

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

17..REST Client

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

**18.Npm Intellisense **

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

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

19.Azure Storage

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

20.Project Manager

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

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

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

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

Language Support for Java(TM) by Red Hat
Language Support for Java(TM) by Red Hat redhat.java
这个插件，这个下载次数，安装就对了。
Todo Tree
此扩展可以快速搜索（使用ripgrep）您的工作区以获取 TODO 和 FIXME 等注释标记，并在资源管理器窗格的树视图中显示它们。单击树中的 TODO 将打开文件并将光标放在包含 TODO 的行上。
找到的 TODO 也可以在打开的文件中突出显示。
TabNine
TabNine 插件地址
这是一款基于 GPT-2 语言模型的自动补全工具，强烈推荐 TabNine 这款插件，哪怕你使用的不是 vs code 也可以尝试一下这款插件。
1
ext install TabNine.tabnine-vscode

VS code 主题集合

Night Owl

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

Atom One Dark Theme

一个基于 Atom 的黑暗主题

Dracula Official

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

One Dark Pro

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

Bimbo

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

代码提示提示类

HTML Snippets

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

HTML CSS Support

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

jQuery Code Snippets

jQuery 代码提示

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

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

HTMLHint

html 代码检测，支持 html5

语言相关

C＃

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

CodeMetrics

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

VUE 插件

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

VueHelper snippet 代码片段

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

prettier 代码规范性插件

Java Extension Pack

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

工具型插件

VSC Netease Music

插件是一位叫做 nondanee 的第三方開發者開發的。

插件 github 地址: https://github.com/nondanee/vsc-netease-music
插件 marketplace: https://marketplace.visualstudio.com/items?itemName=nondanee.vsc-netease-music

插件功能

發現音樂 (歌單 / 新歌 / 排行榜)
搜索 (單曲 / 歌手 / 專輯 / 歌單)
用户登錄 (手機號 / 郵箱)
用户收藏 (歌單 / 歌手 / 專輯)
每日歌曲推薦 / 推薦歌單 / 私人 FM
喜歡音樂 / 收藏音樂
播放模式切換 / 音量調節
逐行歌詞
熱門評論
快捷鍵支持
聽歌記錄 (不確定有效)
無海外限制

插件需求

我在電腦上可以正常地使用, 但是 Github 上看到可能需要替換一些文件才可以正常使用。

Github 原文:

VS Code for Windows 自 1.31.0 起自帶完整的 ffmpeg 動態鏈接庫 (可能是 bug)，無需替換；macOS 與 Linux 平台仍需替換。

VS Code 使用的 Electron 版本不包含 ffmpeg，需替換自帶的 ffmpeg 動態鏈接庫才能正常播放 (每次更新 VS Code 都需重新替換)

手動替換

通過 VS Code 版本在 https://raw.githubusercontent.com/Microsoft/vscode/%version%/.yarnrc 查看其使用的 Electron 版本，並於 https://github.com/electron/electron/releases/tag/%version% 下載對應的 Electron 完整版本進行替換

Windows

1 2	下載 electron-%version%-win32-%arch%.zip 替換 ./ffmpeg.dll

macOS

下載 electron-%version%-darwin-x64.zip  
替換 ./Electron.app/Contents/Frameworks/Electron\ Framework.framework/Libraries/libffmpeg.dylib  
```  

##### Linux

```bash
下載 electron-%version%-linux-%arch%.zip  
替換 ./libffmpeg.so  
```  

#### 自動替換 

 使用 Python 腳本替換 (Python 2/3 均可，絕大部分發行版自帶環境)

默認安裝位置下 Linux 和 Windows 需要以管理員身份運行，macOS 不需要 

##### Windows Powershell

```bash
Invoke-RestMethod https://gist.githubusercontent.com/nondanee/f157bbbccecfe29e48d87273cd02e213/raw | python  
```  

##### Unix Shell

```bash
curl https://gist.githubusercontent.com/nondanee/f157bbbccecfe29e48d87273cd02e213/raw | python  
```  

 如果 VS Code 使用默認配置安裝，腳本會自動尋找並替換，若自定義了安裝位置，請自行修改 installation

插件用法 

 按 **F1** 或者 **Ctrl Shift P** 打開命令面板 

 輸入命令前綴 ` 網易雲音樂 ` 或 `NeteaseMusic` 就可以使用。  

![4.png](https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/blog/VSC_Netease_Music/4.png)

![5.png](https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/blog/VSC_Netease_Music/5.png)

![6.png](https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/blog/VSC_Netease_Music/6.png)

界面底部還會顯示歌詞和操作欄  
![7.png](https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/blog/VSC_Netease_Music/7.png)

## Tips

Linux 下配置 vscode 终端字体：

在 Ubuntu 18.04.1LTS 下的解决方案（亲测可用），其他版本 linux 做参考。

下载字体

```bash
# clone
cd /usr/share/fonts/truetype/
sudo git clone https://github.com/powerline/fonts.git

刷新字体 $sudo fc-cache -f -v

安装字体

# install
cd fonts
./install.sh
# clean-up a bit
cd ..
rm -rf fonts

在 文件/首选项/设置中，选择 工作区，搜索 终端 字体，改成 Source Code Pro for Powerline

效果：

**Mac 下配置 vscode 终端字体 **

在 Mac 10.13.6 下的解决方案（亲测可用），其他版本做参考。

1	下载安装字体 < span class="variable">$cd /Library/Fonts$sudo git clone https://github.com/abertsch/Menlo-for-Powerline.git

在 vscode 中设置字体：

1	"terminal.integrated.fontFamily": "Menlo for Powerline"

效果：

Visual Studio Code 的插件功能真的是强大到爆裂，还有仕么有意思的插件，欢迎大家在评论区补充

to be continued…