vsCode提高开发效率的小工具

335 阅读3分钟

1650707133(1).jpg

1.0 项目管理器 project-manager[点击跳转]

它可以帮助您轻松访问您的项目,无论它们位于何处。不要再错过那些重要的项目了

您可以定义自己的项目(也称为收藏夹),或选择自动检测GitMercurialSVN存储库、VSCode文件夹或任何其他文件夹。

以下是项目管理器提供的一些功能:

  • 将任何文件夹或工作区另存为项目
  • 自动检测GitMercurialSVN存储库
  • 使用标签组织您的项目****
  • 在同一窗口或新窗口中打开项目
  • 识别已删除/重命名的项目
  • 标识当前项目的状态栏
  • 专用侧边栏

代码片段.jpg

2.0 自定义代码片段 snippet[点击跳转]

ctrl+shift + p 输入snippets

我们在日常的研发过程中,项目中会存在大量的重复代码,我们需要频繁的复制粘贴。但是复制粘贴的这个重复代码又不至于封装成一个基础的组件或业务组件或者是不能封装成组件的代码,那么有没有一种 办法能解决这个问题呢?有,那就是为项目定制代码片段,代码片段,也叫snippets,相信大家都不陌生,就是输入一个很简单的单词然后一回车带出来很多代码。平时大家也可以直接在 vscode 中创建属于自己的snippets。代码片段可以定制自己的私有的代码片段,也可以定制代码片段插件。供整个团队使用。

翻译.jpg

3.0 中英文切换 Comment Translate[点击跳转]

*注 使用时国内要切换到百度翻译 谷歌翻译在国内已下架

ctrl+shift + p 输入commentTranslate切换到百度翻译

许多优秀的项目,都有丰富的注释,使用者可以快速理解代码意图。但是如果使用者并不熟习注释的语言,会带来理解困难。 本插件使用 Google、Bing、Baidu、AliCloud、DeepL等的 Translate API 翻译 VSCode 的编程语言的注释。

树.jpg

3.0 标签树 TODO Tree[点击跳转]

此扩展快速搜索(使用ripgrep)您的工作区以查找 TODO 和 FIXME 等注释标签,并将它们显示在活动栏中的树视图中。可以将视图从活动栏拖到资源管理器窗格中(或您希望的任何其他位置)。

单击树中的 TODO 将打开文件并将光标放在包含 TODO 的行上。

找到的 TODO 也可以在打开的文件中突出显示。

1650725390(1).jpg

4.0 快速生成console.log javascript console utils[点击跳转]

有选择:

  • 突出显示变量(或任何文本)
  • 按 Cmd+Shift+L
  • 输出(在新行上)将是:console.log('variable:', variable);

无选择:

  • 按 Cmd+Shift+L
  • 输出(在同一行)将是:console.log();

要删除 console.logs:

  • 按 Cmd+Shift+D
  • 这将删除当前文档中的所有 console.log 语句

1650727148(1).jpg

5.0 快速定位css class位置 CSS Navigation[点击跳转]

在HTML文档中,选择Go to definition或Peek definition 扩展将搜索当前页面中相关的CSS和SCS及Less选择器 工作区文件夹。也可以在嵌套引用中搜索选择器&。。。 对于Sass&Less。