美文网首页
Javascript 注释规范化+自动生成注释

Javascript 注释规范化+自动生成注释

作者: 暴躁程序员 | 来源:发表于2023-12-17 15:58 被阅读0次

    一、文件注释规范化

    1. 单行注释
    // 状态信息
    const STATUS = true;
    
    1. 多行注释
    /**
     * @type {boolean}
     * @description 状态信息
     */
    let STATUS;
    
    1. 文件注释
    /**
     * @file 文件说明
     * @author  文件创建人信息
     * @createDate  文件创建时间
     * @lastEditors  最后一个修改人信息
     * @lastEditTime  最后一次修改时间
     * @filePath  文件所在路径
     * @description  文件描述
     * @todo 接下来要做的事情,可不写
     * @version 0.0.1 版本号和版本描述
     */
    
    1. 函数注释
    /**
     * @method sum
     * @description 求和
     * @param {number} 参数1
     * @param {number} 参数2
     * @return {number} 求和的值
     * @todo 接下来要做的事情,可不写
     * @callback 描述回调函数 回调函数说明
     * @example sum(100,100) 示例说明
     */
    function sum(a,b) {
      return a + b 
    }
    

    二、vscode 编辑器使用 KoroFileHeader 插件实现生成多行注释

    1. 安装 KoroFileHeader 插件

    在 vscode 插件市场安装 KoroFileHeader 注释插件

    2. 多行注释快捷键
    1. 头部注释
      前提是鼠标的光标位于当前文件内
    ctrl + win + i; // windows 系统
    ctrl + cmd + i; // mac 系统
    

    自动生成注释如下:

    /*
     * @Author: xxx xxx@qq.com
     * @Date: 2023-12-18 09:32:56
     * @LastEditors: xxx xxx@qq.com
     * @LastEditTime: 2023-12-18 15:49:30
     * @FilePath: \js\index.js
     * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
     */
    
    1. 函数注释
      前提是鼠标的光标放在函数声明所在行,或者放在上一行
    ctrl + win + t; // windows 系统
    ctrl + cmd + t; // mac 系统
    

    自动生成注释如下:

    /**
     * @description: 
     * @param {*} a
     * @param {*} b
     * @return {*}
     */
    function sum(a,b) {
      return a + b 
    }
    
    1. 图案注释
      前提是鼠标的光标位于当前文件内,随机图案
    ctrl + win + j; // windows 系统
    ctrl + cmd + j; // mac 系统
    

    三、配置 KoroFileHeader 插件(自定义配置)

    打开 KoroFileHeader 插件 --> 点击右下角齿轮图标 --> 扩展设置 --> 在 settings.json 中编辑

    1. 以下是默认配置
    // 头部注释
    "fileheader.customMade": {
        // Author字段是文件的创建者 可以在specialOptions中更改特殊属性
        // 公司项目和个人项目可以配置不同的用户名与邮箱 搜索: gitconfig includeIf  比如: https://ayase.moe/2021/03/09/customized-git-config/
        // 自动提取当前git config中的: 用户名、邮箱
        "Author": "git config user.name && git config user.email", // 同时获取用户名与邮箱
        // "Author": "git config user.name", // 仅获取用户名
        // "Author": "git config user.email", // 仅获取邮箱
        // "Author": "OBKoro1", // 写死的固定值 不从git config中获取
        "Date": "Do not edit", // 文件创建时间(不变)
        // LastEditors、LastEditTime、FilePath将会自动更新 如果觉得时间更新的太频繁可以使用throttleTime(默认为1分钟)配置更改更新时间。
        "LastEditors": "git config user.name && git config user.email", // 文件最后编辑者 与Author字段一致
        // 由于编辑文件就会变更最后编辑时间,多人协作中合并的时候会导致merge
        // 可以将时间颗粒度改为周、或者月,这样冲突就减少很多。搜索变更时间格式: dateFormat
        "LastEditTime": "Do not edit", // 文件最后编辑时间
        // 输出相对路径,类似: /文件夹名称/src/index.js
        "FilePath": "Do not edit", // 文件在项目中的相对路径 自动更新
        // 插件会自动将光标移动到Description选项中 方便输入 Description字段可以在specialOptions更改
        "Description": "", // 介绍文件的作用、文件的入参、出参。
        // custom_string_obkoro1~custom_string_obkoro100都可以输出自定义信息
        // 可以设置多条自定义信息 设置个性签名、留下QQ、微信联系方式、输入空行等
        "custom_string_obkoro1": "",
        // 版权声明 保留文件所有权利 自动替换年份 获取git配置的用户名和邮箱
        // 版权声明获取git配置, 与Author字段一致: ${git_name} ${git_email} ${git_name_email}
        "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by ${git_name_email}, All Rights Reserved. "
        // "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by 写死的公司名/用户名, All Rights Reserved. "
    },
    // 函数注释
    "fileheader.cursorMode": {
        "description": "", // 函数注释生成之后,光标移动到这里
        "param": "", // param 开启函数参数自动提取 需要将光标放在函数行或者函数上方的空白行
        "return": "",
    }
    
    2. 修改默认配置说明
    // 头部注释
    "fileheader.customMade": {
        // 头部注释默认字段
        "Author": "your name",
        "Date": "Do not edit", // 设置后默认设置文件生成时间
        "LastEditTime": "Do not edit", // 设置后,保存文件更改默认更新最后编辑时间
        "LastEditors": "your name", // 设置后,保存文件更改默认更新最后编辑人
        "Description": "",
        "FilePath": "Do not edit", // 设置后,默认生成文件相对于项目的路径
        "custom_string_obkoro1": "可以输入预定的版权声明、个性签名、空行等"
    },
    // 函数注释
    "fileheader.cursorMode": {
      // 默认字段
      "description":"",
      "param":"",
      "return":""
    },
    // 插件配置项
    "fileheader.configObj": {
        "autoAdd": true, // 检测文件没有头部注释,自动添加文件头部注释
        "autoAddLine": 100, // 文件超过多少行数 不再自动添加头部注释
        "autoAlready": true, // 只添加插件支持的语言以及用户通过`language`选项自定义的注释
        "supportAutoLanguage": [], // 设置之后,在数组内的文件才支持自动添加
       // 自动添加头部注释黑名单
       "prohibitAutoAdd": [
          "json"
        ],
       "prohibitItemAutoAdd": [ "项目的全称禁止项目自动添加头部注释, 使用快捷键自行添加" ],
       "folderBlacklist": [ "node_modules" ], // 文件夹或文件名禁止自动添加头部注释
       "wideSame": false, // 头部注释等宽设置
       "wideNum": 13,  // 头部注释字段长度 默认为13
        "functionWideNum": 0, // 函数注释等宽设置 设为0 即为关闭
       // 头部注释第几行插入
        "headInsertLine": {
          "php": 2 // php文件 插入到第二行
        },
        "beforeAnnotation": {}, // 头部注释之前插入内容
        "afterAnnotation": {}, // 头部注释之后插入内容
        "specialOptions": {}, // 特殊字段自定义
        "switch": {
          "newlineAddAnnotation": true // 默认遇到换行符(\r\n \n \r)添加注释符号
        },
        "moveCursor": true, // 自动移动光标到Description所在行
        "dateFormat": "YYYY-MM-DD HH:mm:ss",
        "atSymbol": ["@", "@"], // 更改所有文件的自定义注释中的@符号
        "atSymbolObj": {}, //  更改单独语言/文件的@
        "colon": [": ", ": "], // 更改所有文件的注释冒号
        "colonObj": {}, //  更改单独语言/文件的冒号
        "filePathColon": "路径分隔符替换", // 默认值: mac: / window是: \
        "showErrorMessage": false, // 是否显示插件错误通知 用于debugger
        "writeLog": false, // 错误日志生成
        "CheckFileChange": false, // 单个文件保存时进行diff检查
        "createHeader": true, // 新建文件自动添加头部注释
        "useWorker": false, // 是否使用工作区设置
        "designAddHead": false, // 添加注释图案时添加头部注释
        "headDesignName": "random", // 图案注释使用哪个图案
        "headDesign": false, // 是否使用图案注释替换头部注释
        // 自定义配置是否在函数内生成注释 不同文件类型和语言类型
        "cursorModeInternalAll": {}, // 默认为false 在函数外生成函数注释
        "openFunctionParamsCheck": true, // 开启关闭自动提取添加函数参数
        "functionParamsShape": ["{", "}"], // 函数参数外形自定义
        // "functionParamsShape": "no type" 函数参数不需要类型
        "functionBlankSpaceAll": {}, // 函数注释空格缩进 默认为空对象 默认值为0 不缩进
        "functionTypeSymbol": "*", // 参数没有类型时的默认值
        "typeParamOrder": "type param", // 参数类型 和 参数的位置自定义
        // 自定义语言注释,自定义取消 head、end 部分
        // 不设置自定义配置language无效 默认都有head、end
        "customHasHeadEnd": {}, // "cancel head and function" | "cancel head" | "cancel function"
        "throttleTime": 60000, // 对同一个文件 需要过1分钟再次修改文件并保存才会更新注释
         // 自定义语言注释符号,覆盖插件的注释格式
        "language": {
            // js后缀文件
            "js": {
                "head": "/$$",
                "middle": " $ @",
                "end": " $/",
                // 函数自定义注释符号:如果有此配置 会默认使用
                "functionSymbol": {
                  "head": "/******* ", // 统一增加几个*号
                  "middle": " * @",
                  "end": " */"
                },
                "functionParams": "typescript" // 函数注释使用ts语言的解析逻辑
            },
           // 一次匹配多种文件后缀文件 不用重复设置
           "h/hpp/cpp": {
              "head": "/*** ", // 统一增加几个*号
              "middle": " * @",
              "end": " */"
            },
            // 针对有特殊要求的文件如:test.blade.php
            "blade.php":{
              "head": "<!--",
              "middle": " * @",
              "end": "-->",
            }
        },
     // 默认注释  没有匹配到注释符号的时候使用。
     "annotationStr": {
          "head": "/*",
          "middle": " * @",
          "end": " */",
          "use": false
        },
    }
    
    3. 如果想要使用图案注释,比如佛祖,可以在 fileheader.configObj 属性中修改配置
    "fileheader.configObj": {
       "headDesignName": "buddhalImg" // 默认为随机图案 random, 可修改 buddhalImg 代表佛祖
    }
    
    // 其他图案参数
    // 'random', // 随机
    // 'buddhalImg', // 佛祖
    // 'buddhalImgSay', // 佛祖+佛曰
    // 'buddhalSay', // 佛曰
    // 'totemDragon', // 龙图腾
    // 'belle', // 美女
    // 'coderSong', // 程序员之歌
    // 'loitumaGirl', // 甩葱少女
    // 'keyboardAll', // 全键盘
    // 'keyboardSmall', // 小键盘
    // 'totemWestDragon', // 喷火龙
    // 'jesus', // 耶稣
    // 'dog', // 狗
    // 'totemBat', // 蝙蝠
    

    相关文章

      网友评论

          本文标题:Javascript 注释规范化+自动生成注释

          本文链接:https://www.haomeiwen.com/subject/llsogdtx.html