介紹幾個代碼實際開發(fā)中很實用的工具

前言

您看完本文后,將會學(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 Modecustom Made中,點擊settings.json,可分別對頭部文件注釋和函數(shù)注釋進行
    頭部注釋與函數(shù)注釋的配置.png

    分別把下面的fileheader.customMadefileheader.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ù)注釋)

ctrl+6就會翻譯出來.gif

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/

codeIf.png

  • 如果你記不住網(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
找到密鑰.png
  • 在vscode中選中中文或者英文,直接ctrl+6,在控制臺下看是否有翻譯結(jié)果,有則安裝完成,正確,無論中英文都能能互譯


    ctrl+6就會翻譯出來.gif

    不要覺得上面的配置很麻煩,麻煩一次,簡直是一勞永逸,在也不用下載什么翻譯軟件工具或者打開百度翻譯,有道翻譯了的,直接在代碼編輯器里就可以互譯

Yao-Translate

vscode之所以受人歡迎,很大程度上就是因為它豐富的第三方開源的插件,安裝簡單方便,文檔使用齊全,想不愛它都不行,可以多試試一些輔助插件

Yao-Translate這個翻譯插件也很有用


Yao-Translate.png
  • 選中文本,按ctrl+shift+T是翻譯,選中文本按ctrl+shift+R是互譯并替換,有時候你在替換翻譯一些字段時候,這個很有用
    使用Yao-Translate.gif

sublimeText中的翻譯插件

  • sublimeText3中在線安裝Translate-CN就可以的

選中的英文單詞,然后右鍵Translate-CN--current Text/input Text

sublimeText翻譯插件.gif

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)容對一些小伙伴有用~


更多內(nèi)容盡在微信itclancoder公眾號.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容