VS Code 程序猿必装的高效开发插件

墨蓝 2022-09-11 00:21 293阅读 0赞

### 高效开发 ###

*   *   *  文件图标
         *  黑暗主题
         *  代码检查工具
         *  代码美化
         *  CSS 类名智能提示
         *  代码拼写检查
         *  模块区分
         *  内嵌cmd终端
         *  路径提示
         *  ES6 语法智能提示
         *  Vue 多功能集成插件
         *  智能提示
         *  Git专用

### 文件图标 ###

插件名称：vscode-icons

vscode-icons 可以实现对各类文件类型的文件前的图标进行优化显示，我们在查看长文件列表的时候，可以直接通过文件的图标就可以快速知道文件的类型，而不用再去看文件的后缀名了  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16]

### 黑暗主题 ###

插件名称：One Dark Pro

可以一键将VS Code编辑器颜色调为暗色，开发更舒服  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### 代码检查工具 ###

插件名称：ESLint

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码

VSCode 中的 ESLint 插件就直接将 ESLint 的功能集成，安装后即可使用ESLint语法，对于代码格式与规范的细节可以自定义标准，一个团队可以共享同一个配置文件，所有人写出的代码就可以使用同一个代码规范，在代码打包前就可以自动完成自己的代码规范检查  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### 代码美化 ###

插件名称：Beautify

Beautify插件可以快速格式化代码，让你在编写代码时杂乱无章的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 3]

### CSS 类名智能提示 ###

插件名称：IntelliSense for CSS class names in HTML

IntelliSense for CSS class names in HTML 插件，可以在 HTML 中需要调用 CSS 类名的地方，此插件会智能地给你已定义 CSS 类名的提示

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

### 代码拼写检查 ###

插件名称：Code Spell Checker

此插件安装后就不用管就好了，在你代码中有单词拼写错误时，插件可以给出错误拼写单词的建议  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 5]

### 模块区分 ###

插件名称：Bracket Pair Colorizer

友好的给括号加上不同的颜色，便于区分不同的区块，使用者还可以定义括号类型和颜色

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

### 内嵌cmd终端 ###

插件名称：Terminal

编辑器中内嵌一个似 cmd 终端程序，直接在编辑器中运行终端命令

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

### 路径提示 ###

插件名称：Path Intellisense

插件自动提示文件路径，支持各种文件无脑快速引入  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 8]

### ES6 语法智能提示 ###

插件名称：JavaScript(ES6) code snippets

ES6 语法智能提示及快速输入，不仅仅支持 .js，还支持.ts，.jsx，.tsx，.html，.vue  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 9]

### Vue 多功能集成插件 ###

插件名称：Vetur

语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode 官方钦定 Vue 插件，Vue开发者必备

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

### 智能提示 ###

插件名称：Npm Intellisense

npm 装包后，require 时的包智能提示，import 语句中自动填充 npm 模块  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 11]

### Git专用 ###

插件名称：GitLens

快捷方便查看 Git 日志，高频使用 Git 者必备 [使用链接][Link 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 12]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f5be7d68c21f4f34883f69e256ba958e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/07a7ea48aa8c4a28aa58292e63a7c83e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/0d60dda6968a41b09ed033923e9d07c4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/e4828e9d8b8b47e1ae4a74352262e033.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/1a86d284f7c64e96a0e4efad6c898c1d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/724cd45e30fc4c549efae0f44501e806.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/c375db4075294891bb5ebf4f9e8b49f7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/9a2d7964c2cc457da75462213ac6c4f0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220829/f1ba8cc08fec4074bfcf6b81d09d3c0f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220829/cd7aa0ef5ed24be1977d902c3ad150e8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220829/0aecff958fc74d50aa5ac19495ae081f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220829/d4dd3c5c3c474ee1a9a8228dd678e0eb.png
[Link 1]: https://link.zhihu.com/?target=https://www.jianshu.com/p/a91cb8a2e55d
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARGF2aWTlh4nlrrg_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220829/41f5af4895224db5958fe33b6d37fa20.png