介绍几个代码实际开发中很实用的工具

2020/3/20 11:01:50

编程Tag： javascript 前端框架

本文主要是介绍介绍几个代码实际开发中很实用的工具，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

您看完本文后,将会学习到这些实际开发中常用的骚操作

vscode中快速生成头部注释以及函数注释(koroFileHeader)
不知道如何命名,打开这个codeIf网站(对于有的小伙伴可能有用)，分别在sublime以及vscode中实现
遇到翻译问题,你或许习惯了百度翻译或者有道翻译,甚至特意的安装翻译软件,其实在编辑器里就能解决,翻译插件(Yao-Translate)以及Translate,Translate-CN分别在(vscode,sublime,IDEA)的使用

KoroFileHeader注释

快速给文件添加头部注释或者函数注释

点击vscode中左侧工具栏的应用商店的图标,直接搜索koroFileHeader安装
查看koroFileHeader的使用文档（这个很重要,其他类似插件使用也是如此）
个性化头部配置自己想要的信息,单击插件,进入配置,配置拓展设置（进入的该方式有两种,如下所示）
如果你的vscode是英文版的,英文阅读上觉得有障碍,也可以商店里下载chinese这个插件拓展，按照文档操作汉化即可
ctrl+shift+p--->config--->配置显示语言--->选择自己要显示的语言
头部注释与函数注释的个性化配置,在FileHeader Cursor Mode与custom Made中,点击settings.json，可分别对头部文件注释和函数注释进行
分别把下面的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(生成函数注释)

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是一个变量命名网站,当你输入中文或者英文时,该网站都会给出一些示例,供你命名参考,这个网站或许对于一些感觉命名头疼的小伙伴来说有些用

unbug.github.io/codelf/

如果你记不住网站的名称,每次都得打开这个网站觉得很麻烦,在vscode以及sublimeText中都有对应的解决方案,前者可以在插件市场中安装codeIf,后者虽然没有提供插件的在线安装,但是可以本地安装的
在sublimeText中,进入packages文件夹中下载好安装包压缩重命名为codeIf然后就可以使用了