返回

我是VSCode体验优化大师，和大家分享几个提升VSCode开发体验的“骚”技巧！

前端







## 前言

VSCode作为大部分前端程序员吃饭的工具来说是离不开的，那么提升VSCode开发时的体验想必也是十分重要的，这里分享几个提升VSCode开发体验的“骚”技巧。

## 技巧一：使用插件

VSCode的插件系统非常强大，可以让你轻松地扩展VSCode的功能。这里推荐几个提升VSCode开发体验的插件：

* **Auto Close Tag** ：自动闭合HTML/XML标签。
* **Bracket Pair Colorizer 2** ：给括号对染色，方便区分。
* **Color Picker** ：提供了一个方便的颜色选择器。
* **Debugger for Chrome** ：可以在VSCode中调试Chrome。
* **ESLint** ：检查JavaScript代码的语法和风格错误。
* **GitLens** ：提供了一系列Git相关的功能。
* **Live Server** ：可以让你在VSCode中实时预览HTML/CSS/JavaScript代码。
* **Path Intellisense** ：自动补全文件路径。
* **Prettier** ：自动格式化代码。
* **Settings Sync** ：同步VSCode设置。
* **TabNine AI Autocomplete** ：提供智能代码自动补全。
* **vscode-icons** ：为文件和文件夹添加图标。

## 技巧二：使用主题

VSCode提供了多种内置主题和用户贡献的主题，你可以根据自己的喜好选择一款喜欢的主题。这里推荐几个提升VSCode开发体验的主题：

* **One Dark Pro** ：一种流行的深色主题，简洁大方。
* **Material Theme** ：一种基于Material Design的主题，色彩鲜艳。
* **Dracula** ：一种暗色主题，灵感来自吸血鬼德古拉。
* **Solarized** ：一种高对比度的主题，适合长时间编码。
* **Nord** ：一种深色主题，灵感来自北极光。
* **Cobalt2** ：一种深色主题，灵感来自钴元素。
* **Oceanic Next** ：一种深色主题，灵感来自海洋。
* **Monokai** ：一种深色主题，灵感来自Vim编辑器。
* **Tomorrow Night** ：一种深色主题，灵感来自Tomorrow主题。

## 技巧三：使用快捷键

VSCode提供了许多快捷键，可以让你快速完成各种操作。这里推荐几个提升VSCode开发体验的快捷键：

* **Ctrl + K + D** ：格式化代码。
* **Ctrl + Shift + F** ：全局搜索。
* **Ctrl + F** ：在当前文件搜索。
* **Ctrl + H** ：替换。
* **Ctrl + G** ：转到行。
* **Ctrl + Shift + G** ：转到文件。
* **Ctrl + Shift + O** ：打开文件。
* **Ctrl + Shift + S** ：保存文件。
* **Ctrl + Z** ：撤销。
* **Ctrl + Y** ：重做。
* **Ctrl + Shift + Z** ：恢复到上次保存的状态。
* **Ctrl + Alt + F** ：查找引用。
* **Ctrl + Alt + R** ：重构代码。

## 技巧四：使用设置

VSCode提供了许多设置，你可以根据自己的喜好进行调整。这里推荐几个提升VSCode开发体验的设置：

* **"editor.fontSize": 16** ：设置编辑器的字体大小。
* **"editor.lineHeight": 20** ：设置编辑器行的行高。
* **"editor.tabSize": 4** ：设置编辑器的缩进大小。
* **"editor.detectIndentation": false** ：禁用自动检测缩进。
* **"editor.wordWrap": "on"** ：启用单词换行。
* **"editor.minimap.enabled": true** ：启用小地图。
* **"editor. minimap. side": "right"** ：将小地图放在右侧。
* **"editor.renderWhitespace": "all"** ：显示所有空白字符。
* **"editor.rulers": [80, 120]** ：设置标尺的位置。
* **"editor.bracketPairColorization. enabled": true** ：启用括号对染色。
* **"editor.autoClosingBrackets": "always"** ：始终自动闭合括号。
* **"editor. autoClosingQuotes": "always"** ：始终自动闭合引号。
* **"editor.formatOnSave": true** ：保存时自动格式化代码。
* **"files. autoSave": "onFocusChange"** ：焦点改变时自动保存文件。
* **"terminal. integrated.shell.windows": "C:\Windows\System32\cmd.exe"** ：设置Windows终端的默认shell。
* **"terminal.integrated.fontSize": 16** ：设置终端的字体大小。

## 技巧五：使用扩展

VSCode的扩展系统非常强大，可以让你轻松地扩展VSCode的功能。这里推荐几个提升VSCode开发体验的扩展：

* **Auto Import** ：自动导入代码所需的模块。
* **Bracket Pair Colorizer 2** ：给括号对染色，方便区分。
* **Color Picker** ：提供了一个方便的颜色选择器。
* **Debugger for Chrome** ：可以在VSCode中调试Chrome。
* **ESLint** ：检查JavaScript代码的语法和风格错误。
* **GitLens** ：提供了一系列Git相关的功能。
* **Live Server** ：可以让你在VSCode中实时预览HTML/CSS/JavaScript代码。
* **Path Intellisense** ：自动补全文件路径。
* **Prettier** ：自动格式化代码。
* **Settings Sync** ：同步VSCode设置。
* **TabNine AI Autocomplete** ：提供智能代码自动补全。
* **vscode-icons** ：为文件和文件夹添加图标。

## 结语

以上就是提升VSCode开发体验的“骚”技巧，希望对大家有所帮助。如果您有其他提升VSCode开发体验的小技巧，欢迎在评论区分享。

## 延伸阅读

* [VSCode官方文档](https://code.visualstudio.com/docs/)
* [VSCode插件市场](https://marketplace.visualstudio.com/)
* [VSCode主题市场](https://theme.