前言
您看完本文后,將會學(xué)習(xí)到這些實際開發(fā)中常用的騷操作
vscode中快速生成頭部注釋以及函數(shù)注釋(koroFileHeader)
不知道如何命名,打開這個codeIf網(wǎng)站(對于有的小伙伴可能有用),分別在sublime以及vscode中實現(xiàn)
遇到翻譯問題,你或許習(xí)慣了百度翻譯或者有道翻譯,甚至特意的安裝翻譯軟件,其實在編輯器里就能解決,翻譯插件(Yao-Translate)以及Translate,Translate-CN分別在(vscode,sublime,IDEA)的使用
KoroFileHeader注釋
快速給文件添加頭部注釋或者函數(shù)注釋
?
-
點擊vscode中左側(cè)工具欄的應(yīng)用商店的圖標(biāo),直接搜索koroFileHeader安裝
vscode中添加koroFileHeader.png -
查看koroFileHeader的使用文檔(這個很重要,其他類似插件使用也是如此)
找到koraFileHeader使用文檔.png -
個性化頭部配置自己想要的信息,單擊插件,進入配置,配置拓展設(shè)置(進入的該方式有兩種,如下所示)
找到插件進行配置拓展設(shè)置.png
找到插件進行配置拓展設(shè)置.png -
如果你的vscode是英文版的,英文閱讀上覺得有障礙,也可以商店里下載chinese這個插件拓展,按照文檔操作漢化即可
vscode漢化.png -
ctrl+shift+p--->config--->配置顯示語言--->選擇自己要顯示的語言
vscode漢化選擇對應(yīng)的語言.png
vscode漢化選擇對應(yīng)的語言-重啟vscode就會生效了的.png - 頭部注釋與函數(shù)注釋的個性化配置,在
FileHeader Cursor Mode與custom Made中,點擊settings.json,可分別對頭部文件注釋和函數(shù)注釋進行
頭部注釋與函數(shù)注釋的配置.png
分別把下面的fileheader.customMade與fileheader.cursorMode,配置到你的配置里,進行個性化配置
"fileheader.customMade": { //此為頭部注釋
"LineStart": "-------------------------------------------",
"Copyright": "? 2020, itclanCoder. All rights reserved.",
"LineEnd": "----------------------------------------------",
"Product": "",
"Mode Name": "",
"Autor": "vxPublic:itclanCoder",
"Date": "Do not edit",
"Version": "xxx.v1.0",
"LastEditors": "川川",
"LastEditTime": "",
"Description": "",
?
},
"fileheader.cursorMode": { //此為函數(shù)注釋
"description":"函數(shù)功能詳細描述",
"param": "",
"return": "",
"author":"itclanCoder"
}
分別在在代碼編輯區(qū)里ctrl+alt+i(生成頭部注釋),ctrl+alt+t(生成函數(shù)注釋)

sublimeText3快速生成注釋
對于一個愛折騰編輯器的小伙伴來說,在沒有出現(xiàn)vscode之前,sublimeText是一個非常輕量的工具,非??岬拇a編輯器
同樣怎么生成頭部注釋
-
ctrl+shift+p---->install Package--->DocBlockr
sublimeTmpl(建各種模板)
-
preferences--->package settings--->sublimeTmpl--->setting default
將下面的添加到你的編輯器即可,自己進行個性化配置就好
"attr": {
"LineStart":"-------------------------------------------",
"Copyright": "? 2020, itclanCoder. All rights reserved.",
"LineEnd":"----------------------------------------------",
"Product":"",
"ModeName":"",
"Version": "",
"author": "vxPublic:itclanCoder",
"LastEditors": "川川",
"email": "itclanCode@163.com",
"link": "http://example.org",
"Description":""
}
對你自己想要新增的字段進行添加,然后再菜單欄中Browse Packages找到SublimeTmpl打開相應(yīng)的文件進行更改,例如:js.tmpl
/**
* ${1:}
* @LineStart ${LineStart}
* @Copyright ${Copyright}
* @Product ${Product}
* @ModeName ${ModeName}
* @authors ${author} (${email})
* @date ${date}
* @version \$Id\$
* @link ${link}
* @LastEditors ${LastEditors}
* @Description ${Description}
*/
?
$0
?當(dāng)你完成上面的操作之后,新建xxx.js時,頭部文件就會生成給定的注釋
關(guān)于sublimeText更多內(nèi)容,可以戳鏈接sublimeText3之碼上有愛
?codeIf變量命名神器
codeif是一個變量命名網(wǎng)站,當(dāng)你輸入中文或者英文時,該網(wǎng)站都會給出一些示例,供你命名參考,這個網(wǎng)站或許對于一些感覺命名頭疼的小伙伴來說有些用
https://unbug.github.io/codelf/

- 如果你記不住網(wǎng)站的名稱,每次都得打開這個網(wǎng)站覺得很麻煩,在
vscode以及sublimeText中都有對應(yīng)的解決方案,前者可以在插件市場中安裝codeIf,后者雖然沒有提供插件的在線安裝,但是可以本地安裝的
vscode中codeIf插件.png - 在
sublimeText中,進入packages文件夾中下載好安裝包壓縮重命名為codeIf然后就可以使用了
sublimeText中使用codeIf.gif
Yao-Translate與Translate翻譯插件
?無論是在閱讀代碼還是在對變量的命名,一旦涉及到英文,你可能習(xí)慣性的去有道翻譯,或者百度翻譯,甚至電腦安裝個翻譯工具,打開翻譯一下,在或者借助瀏覽器翻譯插件
這些方法的確可以解決,但是更快更直接的方式是在代碼編輯器中就可以完成,要知道,在多個進程之間切來切去是很消耗時間和精力的
Translate翻譯插件
-
vscode中安裝Translate(使用這個需要到有道智云里面獲取密鑰進行配置一下)
vscode安裝translate.png
找到translate然后進入配置.png -
進入translate的配置設(shè)置,你會發(fā)現(xiàn)你需要填入密鑰,這個密鑰去http://ai.youdao.com,這個網(wǎng)站注冊獲取密鑰
找到translate然后填入密鑰.png -
打開有道智云官方網(wǎng)站,注冊一個賬號,進入管理后臺獲取密鑰
進入有道智云的后臺創(chuàng)建應(yīng)用.png

-
在vscode中選中中文或者英文,直接ctrl+6,在控制臺下看是否有翻譯結(jié)果,有則安裝完成,正確,無論中英文都能能互譯
ctrl+6就會翻譯出來.gif
不要覺得上面的配置很麻煩,麻煩一次,簡直是一勞永逸,在也不用下載什么翻譯軟件工具或者打開百度翻譯,有道翻譯了的,直接在代碼編輯器里就可以互譯
Yao-Translate
vscode之所以受人歡迎,很大程度上就是因為它豐富的第三方開源的插件,安裝簡單方便,文檔使用齊全,想不愛它都不行,可以多試試一些輔助插件
Yao-Translate這個翻譯插件也很有用

- 選中文本,按
ctrl+shift+T是翻譯,選中文本按ctrl+shift+R是互譯并替換,有時候你在替換翻譯一些字段時候,這個很有用
使用Yao-Translate.gif
sublimeText中的翻譯插件
- 在
sublimeText3中在線安裝Translate-CN就可以的
選中的英文單詞,然后右鍵Translate-CN--current Text/input Text

IDEA中的翻譯插件
?有時候,對于一些前端項目需要依賴啟動一些后臺服務(wù)才能跑起來,而IDEA這個工具對于搞java的同學(xué)來說,是不陌生的,這個工具也是相當(dāng)強大
更多的IDEA使用可以百度百科,可以單獨寫好幾篇了的,這里只介紹一個實時的翻譯
-
點擊文件File然后進入設(shè)置
16-點擊文件進入setting設(shè)置.png -
找到plugins,然后瀏覽插件,搜索Translation進行安裝
17-IEDA翻譯插件.png - 在
Tools下的Translation中進行密鑰的設(shè)置,然后重啟IDEA
IDEA中填入密鑰.png -
點擊IDEA菜單欄右側(cè)的翻譯圖標(biāo),非常方便,無論中英文都可以實時翻譯
IEDA中翻譯插件的檢測.gif
結(jié)語
本小節(jié)主要介紹了在實際開發(fā)中能用到的一些工具,工具還是要多用,原始的工具也要會,高級工具也要接觸,有時候去多多的嘗試,就會給自己很多意外當(dāng)自己發(fā)現(xiàn)效率很低,有沒有一種更好更快的方式解決當(dāng)下問題時
比如:很多小伙伴遇到命名頭疼問題,那么codeIf似乎給你更好的參考,當(dāng)你需要翻譯的時候,有的小伙伴習(xí)慣百度翻譯或者去有道翻譯,甚至電腦特意的安裝一個翻譯軟件
這些原始操作的確是能解決問題,但是你會發(fā)現(xiàn),在各個應(yīng)用程序之間切來切去,其實是一件很消耗精力的事情
那么在當(dāng)今這些牛逼的代碼編輯器里,肯定有牛人解決了這個問題,而各個編輯器肯定也有類似的解決方案
嘗試著一種新的方式去工作,有時候就會發(fā)現(xiàn)原來,還可以這么搞的
希望以上分享的內(nèi)容對一些小伙伴有用~




















