极大提高国人开发效率超实用的 VS Code 插件

小鱼儿 2022-10-07 03:58 0阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![b584440fe2b7f423fbd6a5e1ed7767b4.png][]

相信好多英语不好的同学在打代码的时候，经常会遇到不懂的单词，也相信好多时候同学写项目时候忘记框架的接口，需要网上翻阅文档，线上提问求助，参考其他项目的示例，那么如果你都过遇到这类问题，那么相信这款 VS Code 插件能极大的帮助到你，它能让您在代码中进行线上/线下搜索，或者翻译的。

# 使用 #

介绍下简单的使用过程，你可以在 VS Code 中搜索 `Search/Translate Hero` 然后点击安装，你也可以在这里进行下载：

*  https://marketplace.visualstudio.com/items?itemName=Wscats.search

![image][] image

如果你使用的是国产 Hbuider 编辑器，你可以点击这里进行下载：

*  https://ext.dcloud.net.cn/plugin?id=3557

## 搜索 ##

首先，第一个最重要的功能就是搜索，作为开发者，我们每天打代码肯定都离不开搜索，当你在写代码的过程中遇到不明白的库，比如：`require('react')`，你就可以在编辑器中，选中代码中对应的关键词 `react`，然后点击鼠标右键，在出现的菜单面板中选择 `Search Online` 菜单项，插件会自动帮你打开默认浏览器，并搜索对应的关键词和显示搜索结果。

当然你还可以选中对应的关键词后，使用快捷键 `cmd+enter(mac)` / `ctrl+enter(win)` 去打开浏览器进行搜索，这样会更高效，再也无需每次切换屏幕到浏览器，输入搜索网址键入关键词然后进行搜索啦。

![image][image 1] image

## 翻译 ##

英文不好的同学的福音，当你在代码中遇到不懂的单词，你可以在编辑器中，选中代码中对应的关键词，然后点击鼠标右键，在出现的菜单面板中选择 `Traslate Online` 菜单项，插件会自动帮你打开默认浏览器，并进入谷歌翻译搜索，搜索对应的关键词的翻译结果。

同样你还可以选中对应的关键词后，使用快捷键 `cmd+shift+enter(mac) / ctrl+shift+enter(win)` 去打开浏览器进行翻译。

![image][image 2] image

这里还使用了离线英汉词典插件中提供的离线词典库，所以支持了离线词典的搜索，也是跟上面一样相同的操作，选中代码中的关键词，翻译结果会出现在底部栏右下角，简单的翻译无需频繁地咨询百度和谷歌翻译，在底部展示结果，方便也清晰，如果你想查看更详细的翻译结果，可以点击底部栏右下角的中文翻译结果，此时会打开你的默认浏览器进行线上翻译。

![image][image 3] image

# 切换搜索引擎 #

如果你有其他特别需要，你可以切换不同的搜索引擎，只需要点击在编辑器底部栏右侧 `Search Engine`，然后在弹窗选项中选择你需要的搜索引擎即可切换。

![image][image 4] image

你还可以在右键菜单栏中选择 `Search Online By Switch Engine`菜单项，直接切换对应的搜索引擎进行搜索。

![image][image 5] image

如果预设的搜索引擎地址不能满足你的使用，你可以手动更新搜索引擎地址，进入插件的 `Extesion Settings` 里设置即可。

![image][image 6] image

默认的各搜索引擎地址格式如下：

> 注意：使用 `%SELECTION%` 来替换搜索引擎选中的关键词

<table> 
 <thead> 
  <tr> 
   <th>Engine</th> 
   <th>Url</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Google</td> 
   <td>https://www.google.com/search...</td> 
  </tr> 
  <tr> 
   <td>Bing</td> 
   <td>https://www.bing.com/search?q...</td> 
  </tr> 
  <tr> 
   <td>Github</td> 
   <td>https://www.github.com/search...</td> 
  </tr> 
  <tr> 
   <td>Baidu</td> 
   <td>https://www.baidu.com/search?...</td> 
  </tr> 
  <tr> 
   <td>Npm</td> 
   <td>https://www.npmjs.com/search?...</td> 
  </tr> 
  <tr> 
   <td>Yahoo</td> 
   <td>https://search.yahoo.com/sear...</td> 
  </tr> 
  <tr> 
   <td>Wiki</td> 
   <td>https://wikipedia.org/wiki/%S...</td> 
  </tr> 
  <tr> 
   <td>Duck</td> 
   <td>https://duckduckgo.com/?q=%SE...</td> 
  </tr> 
  <tr> 
   <td>Code Pen</td> 
   <td>https://codepen.io/search/pen...</td> 
  </tr> 
  <tr> 
   <td>Code Sandbox</td> 
   <td>https://codesandbox.io/search...</td> 
  </tr> 
 </tbody> 
</table>

比如，你可以键入一个**颜色网站**的搜索引擎，以后打着打着代码就可以随时进入一波贤者模式了(手动滑稽)。

![6ba535e8d69f68a5988177c7036dc554.gif][] image

哼，你还可以通过修改 `.vscode/setting.json` 文件，来设置默认搜索引擎，例如修改 `search-online.search-engine` 的配置参数为 `Bing`，即可使用 `Bing` 作为默认搜索引擎来搜索。

{
      "search-online.search-engine": "Bing"
    }

通过更改 `.vscode/setting.json` 文件的 `search-online.add-search-engine` 的配置参数，可以添加额外的搜索引擎。

{
      "search-online.add-search-engine": [
        {
          "name": "Visual Studio Marketplace",
          "url": "https://marketplace.visualstudio.com/search?term=%SELECTION%&target=VSCode"
        },
        {
          "name": "Pypi",
          "url": "https://pypi.org/search/?q=%SELECTION%"
        }
      ]
    }

如果你嫌上面的操作都很麻烦，那你还可以通过可视化界面来增加搜索引擎，在切换引擎的面板底部点击 `➕ Add Search Engine`，然后会出现两次输入框，分别填入如以下内容，即可增加搜索引擎↓

> name: Visual Studio Marketplace
> 
> url: https://marketplace.visualstu...

![image][image 7] image

有了这些，你可以一键在 Github 上搜索相关代码，在 Npm 搜索相关的工具库，在 Wiki 检索专业得词条，在 Duck Duck Go 留下你不可告人的小秘密，在 Code Pen 粘贴几段小代码回来，总之就是不讲道理，毫无武德。

![image][image 8] image

# 切换翻译引擎 #

一般情况，你可以在设置面板更改需要翻译的语言，默认设置是英文翻译成中文。

![image][image 9] image

但是如果遇到二般情况，比如遇上俄国人写的代码和注释，你想翻译一下，那么你可以把翻译引擎切换到俄语翻译成中文的设置，这里支持世界上大部分语言的线上翻译，谷歌翻译是个好东西，后续会增加百度翻译引擎的支持，请大家多多资瓷啦~

# 感谢 #

最后如果插件对您有帮助，恳请您在 **插件商城** 中给我们一个五星好评，您的鼓励是我前进的最大动力！

如果您有任何问题和建议，您可以进入 **反馈链接** 留言，我会尽快回复您。

关于本文

来源：Eno\_Yao

https://segmentfault.com/a/1190000038349224

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[b584440fe2b7f423fbd6a5e1ed7767b4.png]: /images/20221005/7f097551ddb64275988f43251004afb6.png
[image]: /images/20221005/64cbfa961889401999edf8bb2c9cf404.png
[image 1]: /images/20221005/43df8ff738004896a60538d2314d09d8.png
[image 2]: /images/20221005/df9025c14b364ce68c5644e0fe48d0da.png
[image 3]: /images/20221005/182e9b5e2d2940f493d864469d4a0811.png
[image 4]: /images/20221005/5be46ce7fc074297b0fc6c7785b451de.png
[image 5]: /images/20221005/b56af936855a40fc96129a9f682b1956.png
[image 6]: /images/20221005/5a55d70e1455488ea368734bd6cd99a8.png
[6ba535e8d69f68a5988177c7036dc554.gif]: /images/20221005/7b4db8441b4f4085937a4ff25815186e.png
[image 7]: /images/20221005/acab713e20444f1ab5f85913afb00d39.png
[image 8]: /images/20221005/044f258021e24e0ba2a3bcf972de2a9e.png
[image 9]: /images/20221005/f97308dc86d3450980fa841aab1fec44.png