介紹幾個程式碼實際開發中很實用的工具

itclanCoder發表於2020-03-09

前言

您看完本文後,將會學習到這些實際開發中常用的騷操作

vscode中快速生成頭部註釋以及函式註釋(koroFileHeader)
不知道如何命名,開啟這個codeIf網站(對於有的小夥伴可能有用)，分別在sublime以及vscode中實現
遇到翻譯問題,你或許習慣了百度翻譯或者有道翻譯,甚至特意的安裝翻譯軟體,其實在編輯器裡就能解決,翻譯外掛(Yao-Translate)以及Translate,Translate-CN分別在(vscode,sublime,IDEA)的使用

KoroFileHeader註釋

快速給檔案新增頭部註釋或者函式註釋 * 點選vscode中左側工具欄的應用商店的圖示,直接搜尋koroFileHeader安裝 vscode中新增koroFileHeader.png * 檢視koroFileHeader的使用文件（這個很重要,其他類似外掛使用也是如此）找到koraFileHeader使用文件.png * 個性化頭部配置自己想要的資訊,單擊外掛,進入配置,配置擴充設定（進入的該方式有兩種,如下所示）找到外掛進行配置擴充設定.png * 如果你的vscode是英文版的,英文閱讀上覺得有障礙,也可以商店裡下載chinese這個外掛擴充，按照文件操作漢化即可 vscode漢化.png * ctrl+shift+p--->config--->配置顯示語言--->選擇自己要顯示的語言 vscode漢化選擇對應的語言.png vscode漢化選擇對應的語言-重啟vscode就會生效了的.png * 頭部註釋與函式註釋的個性化配置,在FileHeader Cursor Mode與custom Made中,點選settings.json，可分別對頭部檔案註釋和函式註釋進行頭部註釋與函式註釋的配置.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": {  //此為函式註釋
        "description":"函式功能詳細描述",
        "param": "",
        "return": "",
        "author":"itclanCoder"
    }
```

分別在在程式碼編輯區裡ctrl+alt+i(生成頭部註釋),ctrl+alt+t(生成函式註釋) ctrl+6就會翻譯出來.gif

sublimeText3快速生成註釋

對於一個愛折騰編輯器的小夥伴來說,在沒有出現vscode之前,sublimeText是一個非常輕量的工具,非常酷的程式碼編輯器

同樣怎麼生成頭部註釋

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開啟相應的檔案進行更改,例如: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
```

當你完成上面的操作之後,新建xxx.js時,頭部檔案就會生成給定的註釋

關於sublimeText更多內容,可以戳連結sublimeText3之碼上有愛

codeIf變數命名神器

codeif是一個變數命名網站,當你輸入中文或者英文時,該網站都會給出一些示例,供你命名參考,這個網站或許對於一些感覺命名頭疼的小夥伴來說有些用

https://unbug.github.io/codelf/ * 如果你記不住網站的名稱,每次都得開啟這個網站覺得很麻煩,在vscode以及sublimeText中都有對應的解決方案,前者可以在外掛市場中安裝codeIf,後者雖然沒有提供外掛的線上安裝,但是可以本地安裝的 vscode中codeIf外掛.png * 在sublimeText中,進入packages資料夾中下載好安裝包壓縮重新命名為codeIf然後就可以使用了 sublimeText中使用codeIf.gif