点赞再看，养成习惯

现在越来越多的人使用的代码编辑器是 Visual Studio Code。陆续放弃了Atom、Sublime Text以及也很强大的WebStorm。

🎨 主题

VS Code 主题是Dark+ Material

⭐ 我之前使用过的其他一些主题：

Oceanic Next - 我使用了 Oceanic Next (dimmed bg)
emedy - 我使用了 Remedy Dark (straight)
Snazzy Operator
One Dark Pro

📁 图标

文件图标增强了 VS Code 的外观，主要是它可以帮助我们通过给定的图标区分不同的文件和文件夹。对于我的 VS Code，我使用两个文件图标：

Material Icon Theme - VS Code 最受欢迎的图标主题之一。
Material Theme Icons - 目前正在使用。
vscode-icons

✒ 字体

推荐用于代码编辑器的字体是 JetBrains Mono。这是带有连字支持的免费字体。

⭐ 我以前使用过的其他一些字体：

Operator Mono - 支持连字。
Fira Code - 免费并支持连字。
Dank Mono - 付费并支持连字。

⭐ 您要使用我的设置，使用我的 VS Code 字体吗？在 VS Code 中，按 Ctrl + P，输入 settings.json 并打开该文件。现在，用我的给定值替换下面的属性值。

{
  "workbench.colorTheme": "Snazzy Operator",
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.letterSpacing": 0.5,
  "editor.fontWeight": "400",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid"
}

一些使用的扩展

⭐ Git Graph

查看存储库的Git图，并从图中执行Git操作。

⭐ Debugger for Chrome

调试您的JavaScript代码在Chrome浏览器，或任何其他目标，支持Chrome调试协议。

⭐ GitLens — Git supercharged

增强Visual Studio代码中内置的Git功能——通过Git blame注释和代码透镜，一眼就能看到代码作者的身份，无缝导航和探索Git存储库，通过强大的比较命令获得有价值的见解

⭐ Auto Close Tag

自动添加HTML/XML关闭标签，与isual Studio IDE或SublimeText相同。当我们填写了开始标签，结束标签就会被自动加上。这个非常实用，减少很多我们写html和xml的时间。

⭐ Auto Rename Tag

自动重命名配对的 HTML / XML 标签，也可以在 JSX 中使用。

在settings.json 文件中的 auto-rename-tag.activationOnLanguage 中添加一项以设置扩展名将被激活的语言。默认情况下，它是**[“ *”]**，将为所有语言激活。

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

⭐ BPath Intellisense

补全文件路径，自动完成文件名的插件

⭐ Bracket Pair Colorizer 2

此扩展名允许用颜色标识匹配的括号，用户可以定义要匹配的符号，以及要使用的颜色。

⭐ CSS Peek

Peek：内联加载 css 文件并在那里进行快速编辑。（Ctrl + Shift + F12）
Go to：直接跳转到 CSS 文件或在新的编辑器（F12）中打开
Hover：在符号上悬停显示定义（Ctrl + hover）

⭐ DotENV

在 .env 文件中高亮显示键值对。

⭐ Browser Preview

VSCode的浏览器预览插件让我们能够在编辑器中打开一个可以真正的浏览器预览。浏览器预览是由Chrome Headless提供的，它的工作原理是在一个新进程中启动一个Headless Chrome实例。

⭐ JavaScript (ES6) code snippets

ES6语法中的JavaScript代码片段

⭐ language-stylus

stylus语言支持

⭐ Local History

将文件保存到本地历史记录中

⭐ Markdown Preview Enhanced

Markdown预览增强移植到vscode

⭐ Vetur

用于 VSCode的Vue工具

⭐ Simple React Snippets

React代码片段和命令的基本集合。

⭐ minapp

微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）

⭐ Bracket Pair Colorizer

一个可定制的扩展，用于给匹配的方括号着色

⭐ Highlight Matching Tag

突出显示匹配的开始或结束标签。

⭐ Image preview

⭐ Settings Sync

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

具体操作可以看扩展说明

⭐ npm 扩展

这个扩展支持运行包中定义的npm脚本。并根据包中定义的依赖项验证已安装的模块。

⭐ Terminal 设置

我的操作系统是 Windows，我通过命令行使用 Git，所以我有一个 Git terminal，我用这个终端作为我的集成 terminal。我的 terminal 设置如下：

"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"terminal.integrated.fontFamily": "FuraMono Nerd Font",
"terminal.integrated.fontSize": 12,
"terminal.integrated.rightClickCopyPaste": true

⭐ 其他语言支持

✔ 有用的 VS Code 快捷键

在平时中使用了一些重要的键盘快捷键，这些快捷方式使 Visual Studio Code 提高了我的工作效率。

Ctrl + P ：转到文件，您可以在 Visual Studio Code 中移动到打开的文件/文件夹的任何文件。
Ctrl + ` ：在 VS Code 中打开 terminal
Alt + Down：下移一行
Alt + Up：上移一行
Ctrl + D：将选定的字符移动到下一个匹配字符串上
Ctrl + Space：触发建议
Shift + Alt + Down：向下复制行
Shift + Alt + Up：向上复制行
Ctrl + Shift + T：重新打开最新关闭的窗口
Shift + Alt + 配合鼠标一起使用：选中一大串代码多行进行编辑

我的VS Code扩展