前言

时隔多月，再次静下心来创作分享。在项目组内除了开发还要兼顾前端进度管理，因为对内自研的原因，可能还需要有设计思想，偶尔需要自己设计开发，忙于工作，晚上学习之后也没什么精力做分享和记录了。

最近经历了工作后的第一个分水岭，选择入京寻求更好的发展，今后也会经常更新分享，欢迎交流。

内容介绍

本期分享几个好用的vscode工具，让你工作效率更近一步，搬砖更快。

主要内容涉及模板、插件和ai。

文章较长，可通过左侧目录导航辅助阅读选取需要部分。

工具

插件

首先是几个好用的插件，插件这个东西，简单好用，不占内容，推荐统统入手。

入门级

1. 别名路径跳转

听名字就知道是跳转的，主要是项目中引入的一些文件的跳转，基础功能，强推。

2.Auto Close Tag

自动闭合标签，写入开始标签会自动补充结束标签。

3.Auto Rename Tag

自动重命名，更改开始标签会自动更新结束标签，和Auto Close Tag使用效果更佳。

4.Chinese (Simplified) (简体中文) Language Pack for Vis

汉化vscode。

5.eslint

eslint，基础功能。

6.git graph

vscode内可直接进行各种git操作。

7. git history

git辅助工具，右键之后可以便捷查看历史记录。

8. GitLens — Git supercharged

功能强大的git辅助插件，可惜的是需要付费，可安装使用基础功能，会显示当前行上次操作记录。

9.vetur

解析vue代码的，可以让灰色的vue文件变彩色

10.Code Spell Checker

代码拼写检查，可以帮你及时发现拼写错误

11. ES7+ React/Redux/React-Native snippets

旨在为 React、Redux 和 React Native 开发提供丰富的代码片段支持

12.VSCode Animations

为vscode添加动画效果，光标移动拖尾和光滑过渡等

需要安装依赖插件（下面3选1）

• Custom CSS and JS Loader（默认推荐）

• Custom UI Style（新开发，功能更丰富）

• **Apc Customize UI++**（暂不支持最新版本的 VSCode）

提效

1. Turbo Console Log

可以快速生成打印语句，支持快速删除所有生成的语句，快捷键详见插件配置

2. Console Ninja

在vscode中直接预览打印出来的结果，据网友说有时好用有时不好用，大家可以尝试下

3. Outline Map

展示代码大纲并可以跳转对应位置

AI系列

1.TONGYI Lingma

强推，免费且好用，具有自动补全、大语言训练、快速生成代码、优化代码等功能，功能多且强大，并且免费，AI中简单易用且免费的。

2. GitHub Copilot

也是社区推荐比较好用的AI插件，但是github登录加上收费比较劝退，有氪金玩家可入手。

3. Tabnine: AI Autocomplete & Chat for Javascript, Python, Typescript, PHP, Go, Java & more

比较好用，有收费版本和基础版本，基础版本功能也很不错，包含代码补全等，推荐入手。

4. 其他AI 插件，待探索，分享给大家。

markdown相关

markdown部分使用很少，插件作用不是很清楚，只做分享，大家感兴趣可以自行探索

语音编码

前段时间vscode更新后出现的一个非常有趣的插件，可实现语音编码，但这个AI不太聪明的样子，只能你说啥他写啥，当前只能当做娱乐放松用，当然，工具的使用是灵活的，也可自行开发。

默认是英文版本，若想识别中文需要下载另一个插件。

补充

1. Better Comments

可以区别不同的注释类型，为不同类型添加不同颜色

2. Code Runner

用来在编辑器中快速运行代码

3. Codelf

变量命名

4. colorize

预览css颜色和其他颜色相关功能

5. Error Lens

提供详细的错误信息和上下文，强迫症慎用，代码质量低会红一大片

6. i18n Ally

国际化，可以直接展示国际化的中文

7. Iconify IntelliSense

快速使用相关图标

8. Surround

旨在帮助开发者快速地包裹或环绕选定的文本，使其包含在特定的字符、标签或其他结构中。这个插件通过提供快捷键和命令，使开发者能够更高效地编辑代码，减少手动输入和修改的时间。

9. vscode-custom-code-color

设置一些高亮，例如v-loading

10. vscode-styled-components

专门用于增强开发使用 styled-components 库的体验。styled-components 是一个流行的 CSS-in-JS 库，允许你在 React 组件中编写样式，从而实现样式和组件的紧密耦合。vscode-styled-components 插件通过提供一系列功能，帮助开发者更高效地编写和管理 styled-components 代码。

11. Tailwind CSS IntelliSense

顾名思义，提供tailwind css支持的

12. PostCSS Language Support

提供postcss支持

13. Stylelint

Stylelint 是一个强大的 CSS 代码风格 lint 工具，旨在帮助开发者确保 CSS 代码的一致性和可维护性。通过静态分析 CSS 代码，Stylelint 可以检测和报告潜在的错误、不一致的代码风格以及违反预定义规则的问题。Stylelint 支持多种 CSS 语法，包括普通的 CSS、SCSS、Less 等，并且可以与多种开发工具和构建系统集成。

14. VS Code Counter

代码行数统计，一个没啥用但是可能会用到的插件

使用方式：

(1) ctrl+shift+p然后选择下图命令

(2)右键点击文件夹，然后选择下图所示命令

结果展示（支持多语言，下图只是简单介绍）：

languages下方表格表头依次是 语言、文件数、代码行数、注释行数、空白行数、总行数

15.Blockman - Highlight Nested Code Blocks

• 「核心功能」：用彩色边框高亮嵌套的代码块（如函数、循环、条件语句），直观区分代码层级。

• 「适用场景」：阅读复杂代码、调试嵌套逻辑时，快速定位代码块边界。

• 「特色」：支持自定义边框样式、透明度和颜色，兼容大多数代码主题。

16.Project Manager

• 「核心功能」：快速保存和切换多个项目，支持按标签分类、搜索项目，无需反复通过文件管理器打开文件夹。

• 「适用场景」：同时开发多个项目时，减少切换成本；整理常用项目集合。

• 「特色功能」：支持从 Git 仓库、本地文件夹导入项目，可配置项目启动命令。

模板语法

vscode有一个很强大的模板语法的功能，配置模板之后，可快速生成代码。

ctrl + shift + p 快速打开配置，选择 代码片段：配置用户代码片段

addDialog等都是是之前配置过的模板

配置完之后输入模板名称即可快速生成模板代码

snippet generator

这个网址可以生成vscode的模板语法，将写好的js或者vue文件复制进去可以生成对应的模板，复制到vscode中即可，快捷好用。

快捷键

vscode的快捷键，因为配置可能会改，需要自行查看自己的快捷键。

ctrl+shift+k 删除当前行

ctrl + k   ctrl + 数字键  组合键，需要先按下ctrl + k 再按下 ctrl + 数字键，数字是几就是折叠第几层级，比较适合复杂项目分层级查看。

ctrl + w 关闭当前页面

这两篇文章写的比较全，详细学习可跳转查看。

https://www.cnblogs.com/awkflf11/p/9412344.html

最大化窗口快捷键_计算机快捷键大全（最全篇）-CSDN博客

电脑快捷键还是比较好用的功能，摆脱鼠标控制不错的工具。

结语

水平有限，欢迎交流，经验受限，暂止于此。之后会时常更新，有问题欢迎交流，之后也会做补充，希望可以共同进步。