- 1. Better Comments(多色彩注释)
- 2. koroFileHeader(注释助手)
- 3. Simple React Snippets(react快捷生成代码块)
- 4. Bracket Pair Colorizer/Bracket Pair Colorizer 2 - (括号多颜色)
- 5. Auto RenameTag(自动重命名标签)
- 6. GitLens(使用git的必备)
- 7. Path Intellisense(路径查找)
- 8. Npm Intellisense(node必备)
- 9. Import Cost (导入包的成本)
- 10. Toggle Quotes(引号切换)
- 11. IntelliSense for CSS Class Names in HTML(类名提示)
- 12. any-rule(正则大全)
- 13. ax-reg-collect(常见正则收集)
- 14. 别名路径跳转
- 15. TabNice(代码智能提示,Copilot 的平替插件)
- 16. Live Server
- 17、path-alias(一个可以解决路径别名提示,跳转的vscode插件)
- 18、Template String Converter(普通字符串转模板字符)
- 19、vue-component(Vue开发)
- 20、echarts-enhanced-completion(Echars 智能提示插件)
- 21、CSS Initial Value(css属性提示)
工作中使用到的那些能提效的vscode插件,个人都体验过!!!
1. Better Comments(多色彩注释)
多彩注释,根据不同的注释符号,显示不同的注释颜色
2. koroFileHeader(注释助手)
用于一键生成 文件头部注释和函数注释 支持一键添加佛祖保佑永无BUG、神兽护体等注释图案 文件头部注释自动更新最后编辑人和编辑时间,函数注释自动生成和参数提取。 支持的语言众多,插件可以帮助用户养成良好的编码习惯,规范整个团队风格。
3. Simple React Snippets(react快捷生成代码块)
如果你每次新建 react 文件的时候还需要手动的编写导入、导出相关组件那么推荐你使用这个插件,可以快速生成 react 基础模板代码。 与vscode中在html文件中使用“ ! ”一个原理
例如:
//在新建的js文件中输入 ccc 弹出提示按回车即可class | extends Component {constructor(props) {super(props);this.state = { | };}render() {return ( | );}}export default |;
4. Bracket Pair Colorizer/Bracket Pair Colorizer 2 - (括号多颜色)
给对应的代码块或小括号的开始与闭合括号添加对应的颜色。 当前问更新时(2022年8月2日15:56:17),最新的vscode 会提示该组件不再维护,但是作者还在维护更新中,所以可以放心使用
5. Auto RenameTag(自动重命名标签)
会自动个替换对应标签的名称
6. GitLens(使用git的必备)
方便查看git日志,git 重度使用者必备 可以精确查看某一行的更改记录、更改时间、更改人
7. Path Intellisense(路径查找)
自动提示文件路径,支持各种快速引入文件
8. Npm Intellisense(node必备)
require 时的包提示
9. Import Cost (导入包的成本)
Import Cost 可以显示咱们在VS代码编辑器中导入的程序包的大小。 尝试过,无法在复杂的引入环境中使用

10. Toggle Quotes(引号切换)
Toggle Quotes是一个有趣的实用工具扩展,它允许咱们在引号之间进行切换。当需要在使用字符串插入时切换到反引号时,它就派上用场了。 简单的引号切换器,循环通过 “ ‘ 和 `
使用的时候,选中的字符串外面必须得包裹着一层引号!!!!
快捷键:MAC: cmd+' Win\Linux: ctrl+'
11. IntelliSense for CSS Class Names in HTML(类名提示)
基于在工作空间中找到的定义性,并提供了CSS 类名补全。 自动获取 项目里 声明过得 class 类目 在 template 或者 jsx 中 就会读取到 有智能提示效果 再也不用担心自己写的类名太长而记不住了 适合 喜欢用原子类名 的 以及 组件库开发者
12. any-rule(正则大全)
常用正则大全, 支持web / vscode / idea / Alfred Workflow多平台
13. ax-reg-collect(常见正则收集)
这个插件只是更新了两版,2020年11月就没再更新 但是里面的正则表达式还是可以使用的 已收集的正则均来自于fee-helper的正则小组件
14. 别名路径跳转
别名路径跳转插件,支持任何项目,可以自由配置映射规则,自由配置可缺省后缀名列表
15. TabNice(代码智能提示,Copilot 的平替插件)
基于深度学习的代码提示插件,官方号称是最好的代码提示插件。可以支持任意语言 而且不像
Copilot那样喧宾夺主,只是在输入的时候,进行只能提示。不会替换你已经输入的代码。
16. Live Server
可以在本地临时起一个本地服务,以当前文件夹为根目录
17、path-alias(一个可以解决路径别名提示,跳转的vscode插件)
在导入组件的时候,使用别名路径没用提示时👇 (可和别名路径跳转同时使用, 无冲突)
18、Template String Converter(普通字符串转模板字符)
在字符串中输入$触发,将字符串转换为模板字符串 适合在一段字符中需要拼接动态变量的场景
19、vue-component(Vue开发)
功能:输入组件名称自动导入找到的组件,自动导入路径和组件 选中后自动输入组件名(包含必填属性)、import语句、components属性(如果有需要)。 标签内输入p-提示属性,输入e-提示事件,选中后自动输入。
20、echarts-enhanced-completion(Echars 智能提示插件)
这是一个用于编辑
echarts的配置项时进行补全提示的vscode的扩展。 安装并启用插件后,在你需要用作echarts配置项的对象的上一行添加一行注释:/** @type EChartsOption */(输入echartsoption可以使用代码片段),用于定义该对象为配置项对象。 现在,在配置项对象中按下Enter键时,插件会显示你可能需要的配置项的列表,并且提示中有对该配置项的详细说明。
21、CSS Initial Value(css属性提示)
显示每个
CSS属性的初始值,当光标停留在CSS属性时CSS、Less、Sass、Scss这些文件都支持

















