VS Code 前端常用插件整理

╰+哭是因爲堅強的太久メ 2022-02-28 15:56 368阅读 0赞

### 文章目录 ###

*   *  VS Code 前端常用插件整理
     *   *   *  代码补全
             *  代码格式化
             *  高亮显示
             *  版本控制
             *  其他

## VS Code 前端常用插件整理 ##

Visual Studio Code （简称 VS Code / VSC） 是 Microsoft 为 Windows，Linux 和 macOS 开发的源代码编辑器。它支持调试，嵌入式 Git 控件，语法突出显示，智能代码补全，代码片段和代码重构。 同时也是支持自定义的，开发者可以更改编辑器的主题，键盘快捷键和首选项，拥有强大的拓展能力。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]

这里主要说一下前端常用插件，可根据自己的需求进行选择。

#### 代码补全 ####

*  **HTML Snippets**，支持 HTML5 标签提示补全。
 *  **JavaScript (ES6) snippets**，支持 JavaScript ES6 语法代码的补全。
 *  **jQuery Code Snippets**，　jQuery 代码片段的提示。
 *  **HTML CSS support**，CSS 自动补齐。
 *  **Auto Rename Tag**，自动重命名配对的 HTML / XML 标签。
 *  **IntelliSense for CSS class names in HTML**， 为HTML class 属性提供 CSS 类名称提示。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]

#### 代码格式化 ####

*  **Csscomb**，css 、less、sass 的代码格式化。
 *  **JS-CSS-HTML Formatter**，JavaScript，HTML，CSS 代码格式化。
 *  **快捷键**，Shift+Alt+F

#### 高亮显示 ####

*  **Bracket Pair Colorizer**，高亮连接显示匹配的括号。
 *  **Color Highlight**，在编辑器中高亮显示颜色。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 2]

#### 版本控制 ####

*  **Git Easy**，增加了 vscode 中自带的 git 操作，安装后按 F1 调出控制台，输入 git easy \[options\] 完成 git 操作，代替 git bash。
 *  \*\*Git Lens \*\*，查看 git 日志以及图表和详细信息，查看文件的历史记录（Git 日志）以及修改者信息。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 3]

#### 其他 ####

*  **vscode-icons**，为文件提供图标，便于查找。
 *  **Debugger for Chrome**，js 调试的插件，前端项目在 Chrome 中运行起来之后，可以直接在 VSCode 中打断点、查看输出、查看控制台。
 *  **ESLint**，检查 Javascript 语法错误。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 4]

--------------------

**推荐阅读**  
[超详细！Oracle11g 64 位安装教程][Oracle11g 64]  
[「微软」推出的那些好用的微信小程序][Link 1]  
[教你使用「微软翻译」上 Google][Google]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 5]

欢迎加我微信，一起交流，互相学习，共同进步！

![在这里插入图片描述][20190315083734931.jpg]  
关注公众号『嗜码』。回复关键字「前端」、「Python」、「Java」、「Android」、「小程序」、「Vue」等获取免费精品学习资料。  
![在这里插入图片描述][20190315083756375.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]: /images/20220228/bd38ecc97b9e4e3da7a81baad465fcf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]: /images/20220228/15097809d1d94a63a36d289ec6c037d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 2]: /images/20220228/09b2f7759d9b409386934105abfc85eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 3]: /images/20220228/a6480f4920ca4eff92bcfc2ee1b7a9bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 4]: /images/20220228/342f007acd30482794c3810fa9f316d2.png
[Oracle11g 64]: https://mp.weixin.qq.com/s?__biz=MzIyNDQzMDAwNg==&mid=2247485171&idx=1&sn=f0f61b360e8c76f36586b81ee5300081&chksm=e80e542adf79dd3c7882e529f41698c813b65e2eac61e9daa8e011974e42e0ad528730fd41f6&token=311192386&lang=zh_CN#rd
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzIyNDQzMDAwNg==&mid=2247485140&idx=1&sn=65a5f6f67119d485731857e16e35ad9d&chksm=e80e540ddf79dd1b62b3c51352cc33d1384c7bb102cc4d90ed37405a5fd3c92fb7a801358522&token=311192386&lang=zh_CN#rd
[Google]: https://mp.weixin.qq.com/s?__biz=MzIyNDQzMDAwNg==&mid=2247485162&idx=1&sn=a5cb71160dfd74fab02ec7577c70c242&chksm=e80e5433df79dd253bc6b79304268b671db528af7b4762e97435d6e47d28afb1f47ac93c85bb&token=311192386&lang=zh_CN#rd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 5]: /images/20220228/2533fb5ede0d47dc9f35a1388a028d43.png
[20190315083734931.jpg]: /images/20220228/2f670e36810b4e628aab08bdd6414d66.png
[20190315083756375.png]: /images/20220228/f8dcbc92de424cc286c4516aa893c455.png