Home  >  Article  >  Development Tools  >  A super practical plug-in to improve development efficiency in VSCode (share)

A super practical plug-in to improve development efficiency in VSCode (share)

青灯夜游
青灯夜游forward
2021-06-22 11:28:292801browse

This article recommends some super practical VSCode plug-ins that greatly improve the development efficiency of Chinese people. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

A super practical plug-in to improve development efficiency in VSCode (share)

I believe that many students who are not good at English often encounter words they don’t understand when coding. I also believe that many students forget the interface of the framework when writing projects. If you need to read documents online, ask questions for help online, and refer to examples from other projects, if you have encountered this kind of problem before, I believe this VS Code plug-in can greatly help you. It allows you to perform tasks in the code. Online/offline search, or translated.

[Recommended learning: "vscode tutorial"]

Use

Introducing the simple usage process, you can Search Search/Translate Hero in VS Code and click to install. You can also download it here:

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

A super practical plug-in to improve development efficiency in VSCode (share)

If you are using the domestic Hbuider editor, you can click here to download:

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

Search

First of all, the first and most important function is search. As developers, we must be inseparable from searching when we code every day. When you encounter a library you don’t understand during the process of writing code, such as: require('react'), you can edit it In the browser, select the corresponding keyword react in the code, then right-click the mouse and select the Search Online menu item in the menu panel that appears. The plug-in will automatically open the default browser for you. , and search for corresponding keywords and display search results.

Of course, you can also select the corresponding keyword and use the shortcut keys cmd enter(mac) / ctrl enter(win) to open the browser and search. This will be more efficient. You no longer need to switch the screen to the browser every time, enter the search URL, type in keywords and then search.

2-A super practical plug-in to improve development efficiency in VSCode (share)

Translation

Good news for students who are not good at English. When you encounter words you don’t understand in the code, you can In the editor, select the corresponding keyword in the code, then right-click the mouse and select the Traslate Online menu item in the menu panel that appears. The plug-in will automatically open the default browser for you and enter Google Translate. Search, search for translation results of corresponding keywords.

Similarly, you can also select the corresponding keyword and use the shortcut keys cmd shift enter(mac) / ctrl shift enter(win) to open the browser for translation.

3-A super practical plug-in to improve development efficiency in VSCode (share)

The offline dictionary library provided in the Offline English-Chinese Dictionary plug-in is also used here, so the search for offline dictionaries is supported, which is the same as above. Operation, select the keywords in the code, and the translation results will appear in the lower right corner of the bottom bar. Simple translation does not require frequent consultation with Baidu and Google Translate. The results are displayed at the bottom, which is convenient and clear. If you want to view more detailed translation results, You can click on the Chinese translation result in the lower right corner of the bottom bar, and your default browser will open for online translation.

A super practical plug-in to improve development efficiency in VSCode (share)

Switch search engine

If you have other special needs, you can switch to different search engines, just click on Edit Search Engine on the right side of the bottom bar of the browser, and then select the search engine you need in the pop-up window options to switch.

5-A super practical plug-in to improve development efficiency in VSCode (share)

You can also select the Search Online By Switch Engine menu item in the right-click menu bar to directly switch to the corresponding search engine for search.

6-A super practical plug-in to improve development efficiency in VSCode (share)

If the default search engine address cannot meet your needs, you can manually update the search engine address and enter the Extesion Settings of the plug-in to set it. Can.

A super practical plug-in to improve development efficiency in VSCode (share)

The default address format of each search engine is as follows:

Note: Use %SELECTION% to replace the search engine selection Keywords

##GoogleBingGithubBaiduNpmYahoo##Wikiwikipedia.org/wiki/%SELEC…Duckduckduckgo.com/?q=%SELECTI…Code Pencodepen .io/search/pens…Code Sandboxcodesandbox.io/search?quer…For example, you can enter a search engine of
Engine Url
www.google.com/search?q=%S…
www.bing.com/search?q=% S…
www.github.com/search?q=%S…
www.baidu.com/search?q=%S…
www.npmjs.com/search?q=%S…
search.yahoo.com/search?p =%S…
色网站

, and you can enter a wave of sage mode at any time by typing the code (manual funny). Hmph, you can also set the default search engine by modifying the

.vscode/setting.json

file, such as modifying the configuration of search-online.search-engine If the parameter is Bing, you can use Bing as the default search engine to search. <pre class="brush:js;toolbar:false;">{ &quot;search-online.search-engine&quot;: &quot;Bing&quot; }</pre>Additional search engines can be added by changing the

search-online.add-search-engine

configuration parameters of the .vscode/setting.json file. <pre class="brush:js;toolbar:false;">{ &quot;search-online.add-search-engine&quot;: [ { &quot;name&quot;: &quot;Visual Studio Marketplace&quot;, &quot;url&quot;: &quot;https://marketplace.visualstudio.com/search?term=%SELECTION%&amp;target=VSCode&quot; }, { &quot;name&quot;: &quot;Pypi&quot;, &quot;url&quot;: &quot;https://pypi.org/search/?q=%SELECTION%&quot; } ] }</pre> If you find the above operations too troublesome, you can also add search engines through the visual interface. Click

➕ Add Search Engine

at the bottom of the panel to switch engines, and then it will appear Fill in the two input boxes with the following content respectively to add a search engine↓

name: Visual Studio Marketplace

url: https:// marketplace.visualstudio.com/search?term=%SELECTION%&target=VSCode

A super practical plug-in to improve development efficiency in VSCode (share) With these, you can search for relevant code on Github with one click, in Search related tool libraries with Npm, search professional terms in Wiki, leave your secrets in Duck Duck Go, and paste a few small pieces of code back in Code Pen. In short, it is unreasonable and has no moral integrity.

Switch translation engine

Generally, you can change the language that needs to be translated in the settings panel. The default setting is to translate English into Chinese.

A super practical plug-in to improve development efficiency in VSCode (share)But if you encounter the second general situation, such as encountering codes and comments written by Russians, and you want to translate them, then you can switch the translation engine to Russian and translate into Chinese settings, here supports online translation of most languages ​​​​in the world. Google Translate is a good thing. Support for Baidu translation engine will be added in the future. Please contribute~

More programming-related knowledge, Please visit:

Programming Teaching

! !

The above is the detailed content of A super practical plug-in to improve development efficiency in VSCode (share). For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete