首頁  >  文章  >  開發工具  >  提高開發效率的 VSCode 外掛程式(極力推薦!)

提高開發效率的 VSCode 外掛程式(極力推薦!)

青灯夜游
青灯夜游轉載
2020-12-09 17:40:123718瀏覽

提高開發效率的 VSCode 外掛程式(極力推薦!)

相關推薦:《vscode教學

#相信好多英文不好的同學在打代碼的時候,常常會遇到不懂的單詞,也相信好多時候同學寫項目時候忘記框架的接口,需要網上翻閱文檔,線上提問求助,參考其他項目的示例,那麼如果你都過遇到這類問題,那麼相信這款VS Code 插件能極大的幫助到你,它能讓您在程式碼中進行線上/線下搜索,或翻譯的。

使用

介紹下簡單的使用過程,你可以在VS Code 中搜尋Search/Translate Hero 然後點選安裝,也可以在這裡進行下載:

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

如果你使用的是國產Hbuider 編輯器,你可以點擊這裡進行下載:

  • https://ext.dcloud.net.cn/plugin?id=355提高開發效率的 VSCode 外掛程式(極力推薦!)

搜尋

首先,第一個最重要的功能就是搜索,作為開發者,我們每天打程式碼肯定都離不開搜索,當你在寫程式碼的過程中遇到不明白的函式庫,例如:require('react'),你就可以在編輯器中,選取程式碼中對應的關鍵字react,然後點擊滑鼠右鍵,在出現的選單面板中選擇Search Online 選單項,外掛程式會自動幫你開啟預設瀏覽器,並蒐索對應的關鍵字和顯示搜尋結果。

當然你還可以選取對應的關鍵字後,使用快捷鍵cmd enter(mac) / ctrl enter(win) 去開啟瀏覽器進行搜索,這樣會更有效率,再也無需每次切換螢幕到瀏覽器,輸入搜尋網址鍵入關鍵字然後進行搜尋囉。

翻譯

#英文不好的同學的福音,當你在程式碼中遇到不懂的單字,你可以在編輯器中,選取程式碼中對應的關鍵字,然後點擊滑鼠右鍵,在出現的選單面板中選擇Traslate Online 選單項,外掛程式會自動幫你開啟預設瀏覽器,並進入谷歌翻譯搜索,搜索對應的關鍵字的翻譯結果。

同樣你還可以選取對應的關鍵字後,使用快速鍵 cmd shift enter(mac) / ctrl shift enter(win) 去開啟瀏覽器進行翻譯。

這裡也使用了離線英漢字典(https://github.com/program-in-chinese/vscode_english_chinese_dictionary)外掛程式中提供的離線字典庫,所以支援了離線字典的搜索,也是跟上面一樣相同的操作,選中代碼中的關鍵詞,翻譯結果會出現在底部欄右下角,簡單的翻譯無需頻繁地諮詢百度和谷歌翻譯,在底部展示結果,方便也清晰,如果你想查看更詳細的翻譯結果,可以點擊底部欄右下角的中文翻譯結果,此時會打開你的預設瀏覽器進行線上翻譯。

切換搜尋引擎

#如果你有其他特別需要,你可以切換不同的搜尋引擎,只需要點擊在編輯器底部欄右側Search Engine,然後在彈跳窗選項中選擇你需要的搜尋引擎即可切換。

你也可以在右鍵選單列中選擇 Search Online By Switch Engine選單項,直接切換對應的搜尋引擎進行搜尋。

如果預設的搜尋引擎位址不能滿足你的使用,你可以手動更新搜尋引擎位址,進入外掛程式的Extesion Settings 裡設定即可。

預設的各搜尋引擎位址格式如下:

#注意:使用%SELECTION% 來取代搜尋引擎選中的關鍵字

##https://www.npmjs. com/search?q=%SELECTION%Yahoohttps://search.yahoo.com/search?p=%SELECTION%#Wikihttps://wikipedia.org/wiki/%SELECTION%Duckhttps:// duckduckgo.com/?q=%SELECTION%Code Penhttps://codepen.io/search/pens?q=%SELECTION%Code Sandboxhttps://codesandbox.io/search?query=%SELECTION%
Engine Url
Google https: //www.google.com/search?q=%SELECTION%
Bing https://www.bing.com/search?q=%SELECTION %
Github https://www.github.com/search?q=%SELECTION%
Baidu https://www.baidu.com/search?q=%SELECTION%
#Npm
例如,你可以鍵入一個

顏色網站的搜尋引擎,以後打著打著程式碼就可以隨時進入一波賢者模式了(手動滑稽)。

提高開發效率的 VSCode 外掛程式(極力推薦!)

哼,你也可以透過修改

.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.visualstudio.com/ search?term=%SELECTION%&target=VSCode

有了這些,你可以一鍵在Github 上搜尋相關程式碼,在Npm 搜尋相關的工具庫,在Wiki 檢索專業得詞條,在Duck Duck Go 留下你不可告人的小秘密,在Code Pen 粘貼幾段小代碼回來,總之就是不講道理,毫無武德。

提高開發效率的 VSCode 外掛程式(極力推薦!)

切換翻譯引擎

#一般情況,你可以在設定面板上改變需要翻譯的語言,預設設定是英文翻譯成中文。

但如果遇到二般情況,例如遇上俄國人寫的程式碼和註釋,你想翻譯一下,那麼你可以把翻譯引擎切換到俄文翻譯成中文的設置,這裡支持世界上大部分語言的線上翻譯,谷歌翻譯是個好東西,後續會增加百度翻譯引擎的支持,請大家多多資瓷啦~

更多編程相關知識,請造訪:

程式設計影片! !

以上是提高開發效率的 VSCode 外掛程式(極力推薦!)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除