关于React项目在vscode中如何配置显示头部注释，保存的时候可以更新保存信息。以及一些其他项目常用的配置，全面的设置settings.json。

在 VSCode 中，配置 React 项目以显示头部注释并在保存时自动更新诸如最后编辑时间等信息，可以通过安装一个名为 "File Header Comment" 的插件（例如 koroFileHeader）来实现。

以下是详细步骤：

1. 安装 koroFileHeader 插件

1. 打开 VSCode，进入扩展商店（Extensions）。
2. 搜索并安装 koroFileHeader 插件。

3. 

2. 配置 koroFileHeader

安装完成后，你需要在 settings.json 中配置这个插件的行为。以下是你需要做的配置步骤：

2.1 修改 settings.json 文件

打开 VSCode 的设置，点击右上角的齿轮图标 -> Settings -> 搜索 settings.json，然后选择 Edit in settings.json。也可以直接搜索（快捷键crtl + T）如下图。

然后在文件中添加下面的代码：

{
  "editor.fontSize": 20,
  "fileheader.configObj": {
    "createFileTime": true,
    "language": {
      "languagetest": {
        "head": "/$$",
        "middle": " $ @",
        "end": " $/",
        "functionSymbol": {
          "head": "/** ",
          "middle": " * @",
          "end": " */"
        },
        "functionParams": "js"
      }
    },
    "autoAdd": true,
    "autoAddLine": 100,
    "autoAlready": true,
    "annotationStr": {
      "head": "/*",
      "middle": " * @",
      "end": " */",
      "use": false
    },
    "headInsertLine": {
      "php": 2,
      "sh": 2
    },
    "beforeAnnotation": {
      "文件后缀": "该文件后缀的头部注释之前添加某些内容"
    },
    "afterAnnotation": {
      "文件后缀": "该文件后缀的头部注释之后添加某些内容"
    },
    "specialOptions": {
      "特殊字段": "自定义比如LastEditTime/LastEditors"
    },
    "switch": {
      "newlineAddAnnotation": true
    },
    "supportAutoLanguage": [],
    "prohibitAutoAdd": ["json"],
    "folderBlacklist": ["node_modules", "文件夹禁止自动添加头部注释"],
    "prohibitItemAutoAdd": [
      "项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"
    ],
    "moveCursor": true,
    "dateFormat": "YYYY-MM-DD HH:mm:ss",
    "atSymbol": [
      "", //"@"设置头部注释信息
      "@"
    ],
    "atSymbolObj": {
      "文件后缀": ["头部注释@符号", "函数注释@符号"]
    },
    "colon": [": ", ": "],
    "colonObj": {
      "文件后缀": ["头部注释冒号", "函数注释冒号"]
    },
    "filePathColon": "路径分隔符替换",
    "showErrorMessage": false,
    "writeLog": false,
    "wideSame": false,
    "wideNum": 13,
    "functionWideNum": 0,
    "CheckFileChange": false,
    "createHeader": false,
    "useWorker": false,
    "designAddHead": false,
    "headDesignName": "random",
    "headDesign": false,
    "cursorModeInternalAll": {},
    "openFunctionParamsCheck": true,
    "functionParamsShape": ["{", "}"],
    "functionBlankSpaceAll": {},
    "functionTypeSymbol": "*",
    "typeParamOrder": "type param",
    "customHasHeadEnd": {},
    "throttleTime": 60000,
    "functionParamAddStr": "",
    "NoMatchParams": "no show param"
  },
  "fileheader.cursorMode": {},
  // 头部注释
  "fileheader.customMade": {
    // Author字段是文件的创建者 可以在specialOptions中更改特殊属性
    // 公司项目和个人项目可以配置不同的用户名与邮箱 
    // 自动提取当前git config中的: 用户名、邮箱
    "Author": "test", // 同时获取用户名与邮箱
    // "Author": "git config user.name", // 仅获取用户名
    // "Author": "git config user.email", // 仅获取邮箱
    // "Author": "", // 写死的固定值 不从git config中获取
    "Date": "Do not edit", // 文件创建时间(不变)
    // LastEditors、LastEditTime、FilePath将会自动更新 如果觉得时间更新的太频繁可以使用throttleTime(默认为1分钟)配置更改更新时间。
    "LastEditors": "Gavin.wang", // 文件最后编辑者 与Author字段一致
    // 由于编辑文件就会变更最后编辑时间，多人协作中合并的时候会导致merge
    // 可以将时间颗粒度改为周、或者月，这样冲突就减少很多。搜索变更时间格式: dateFormat
    "LastEditTime": "Do not edit", // 文件最后编辑时间
    // 输出相对路径，类似: /文件夹名称/src/index.js
    "FilePath": "Do not edit", // 文件在项目中的相对路径 自动更新
    // 插件会自动将光标移动到Description选项中 方便输入 Description字段可以在specialOptions更改
    "Description": "" // 介绍文件的作用、文件的入参、出参。
    // "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. "
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,//保存时自动格式化，结合了 editor.defaultFormatter 设置为 Prettier，确保代码格式统一。
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.settings.applyToAllProfiles": ["prettier.configPath"],
  "editor.fontLigatures": false,
  "eslint.format.enable": true,
  "prettier.requireConfig": true,
  "editor.tabCompletion": "on",
  "workbench.colorTheme": "Default Dark+",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "workbench.tree.indent": 16,
  "workbench.iconTheme": "material-icon-theme",
  "editor.hover.delay": 2000,
  "editor.minimap.enabled": false,
  "window.zoomLevel": -1,
  "git.autofetch": true
}

主要配置项分析

1. 编辑器字体与布局：

   • editor.fontSize: 设置了字体大小为20，非常适合需要较大字体以提高可读性。
   • editor.tabSize 和 editor.insertSpaces: 这些设置保证了代码缩进一致性。

2. 格式化设置：

   • editor.formatOnSave: 保存时自动格式化，结合了 editor.defaultFormatter 设置为 Prettier，确保代码格式统一。
   • 对于多种语言（如 JavaScript、CSS、JSON 等）都设置了 Prettier 作为默认格式化工具。

3. 头部注释配置：

   • fileheader.configObj: 这个配置块允许你自定义文件头部的注释样式和内容，包括自动添加创建时间、作者信息等。
   • Author 字段自动提取 git 配置中的用户名和邮箱，这对团队协作非常有用。

4. 版本控制相关设置：

   • git.autofetch: 启用自动拉取更新，确保你的代码库是最新的。

5. 额外功能：

   • eslint.format.enable: 启用 ESLint 格式化，这样可以在使用 ESLint 的同时确保代码符合 Prettier 的格式。
   • prettier.requireConfig: 确保只有在项目中存在 Prettier 配置文件时才会运行 Prettier，有助于避免不必要的格式化。

 

 也可以简单如下面配置：

{
  "fileheader.customMade": {
    "Author": "你的名字",  // 可从 git config 自动提取，或填写固定的作者名
    "Date": "Do not edit",  // 文件创建时间，不会自动修改
    "LastEditors": "你的名字",  // 保存时自动更新最后编辑者
    "LastEditTime": "Do not edit",  // 保存时自动更新最后编辑时间
    "FilePath": "Do not edit",  // 文件路径，保存时自动更新
    "Description": ""  // 可用于描述文件功能
  },
  "fileheader.configObj": {
    "createFileTime": true,  // 是否显示创建时间
    "autoAdd": true,  // 创建文件时自动添加头部注释
    "autoAddLine": 100,  // 设置在哪一行添加注释，0 表示在顶部
    "specialOptions": {},  // 可以根据需要配置特殊字段
    "dateFormat": "YYYY-MM-DD HH:mm:ss",  // 时间格式
    "moveCursor": true,  // 保存时将光标自动移到注释的 Description 部分
    "prohibitAutoAdd": ["json"],  // 禁止在某些类型的文件中自动添加注释
    "folderBlacklist": ["node_modules"]  // 禁止在某些文件夹中自动添加注释
  }
}

3. 自定义头部注释模板

如果想要修改注释模板，可以在 settings.json 文件中进一步定制。你可以在 fileheader.configObj.annotationStr 中修改注释的结构。例如：

"annotationStr": {
  "head": "/*",
  "middle": " * @",
  "end": " */"
}

 

这样，VSCode 会根据你保存文件的时间自动更新相关信息，确保每次修改的时间记录准确。