编程工具: VSCode

vsCode编辑器相关的拓展插件extension…

一、编码相关

参考文章1 参考文章2

1.编码能力

Auto Close Tag：自动闭合HTML/XML标签
Auto Rename Tag：自动完成另一侧标签的同步修改
Beautify：格式化代码，支持自定义格式化代码规则, 默认格式化代码按键为cmd+b
ESLint: js语法纠错，可以自定义配置，配置较为复杂，建议使用网上一些广泛使用的eslint配置
HTML Snippets: 智能提示HTML标签，以及标签含义
HTML CSS Support: 智能提示CSS类名以及id
Vetur: Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件
ESLint
- Rules
- eslint-config-google
TypeScript Vue Plugin (Volar)

2.`3D`相关

glTF Tools v2.3.16: Tools for glTF and GLB 3D models

二、拓展工具

1.`Git`相关

git log

Git History: VS Code 自带的扩展程序，用于查看和浏览基础的 Git 提交历史记录
GitLens: 功能强大，提供丰富图形表示 Git 历史记录和历史修改人，包括时间线视图、分支图和提交详细信息

2.`LeetCode`

常见的两个配置问题：

登陆问题：国外版已经切换，目前国内版还处于正常状态。若出现问题，选择第三方登录或cookie登录。
leetcode配置
- 配置代码存放的文件路径: 配置名为leetcode.workspaceFolder，默认的路径是$HOME/.leetcode。可通过终端echo $HOME查看$HOME路径
- 编辑器的快捷方式：leetcode调试页一般会有两个按钮Submit和Test。另外，可通过leetcode.editor.shortcuts配置，增加Solution查看当前最高赞的代码和Description显示问题描述

参考: 常见配置和使用

3.`Markdown All in One`

内容较长的markdown文件不便阅读，GitHub又不能通过 toc标签自动生成，所以我们只能通过该插件在vscode生成添加toc目录后再上传。注意：若修改标题结构，则需删除生成的旧目录，【重新生成】。

在VSCode中安装Markdown All in One插件
按下Command+Shift+P，输入toc，选择创建目录（Markdown All in One: Create Table of Contents），会自动为markdown文件生成目录。

参考：在VSCode中为markdown文件自动生成目录

4.`Markdown Preview Mermaid Support`

使用文档相关，可搜素Mermaid查看。mermaid: cloud_notes

5.`koroFileHeader`

用于生成文件头部注释和函数注释的VSCode插件，包括作者、日期、文件路径等信息，支持所有主流语言。

以下是使用 koroFileHeader 插件的基本步骤：

1.安装完成后，依次点击VSCode的左下角设置图标 -> "扩展" -> koroFileHeader插件 -> 配置Icon -> 扩展配置 -> Fileheader: Custom Mode(在setting.json里配置)。配置的具体选项可以在插件的文档中找到。

"fileheader.customMade": {
    "Author": "lianpf",
    "Date": "${currentYear}-${currentMonth}-${currentDate}",
    "LastEditors": "${username}", // 你的系统名称
    "LastEditTime": "${currentYear}-${currentMonth}-${currentDate} ${currentHour}:${currentMinute}:${currentSecond}",
    "Description": "Your Description",
    "FilePath": "${relativeFileDir}" // 插入当前文件的相对路径

  }

2.配置后，会在你的文件顶部，插入一行类似以下的注释块：

  <!--
    * @Author: your name
    * @Date: 2023-08-29 09:32:43
    * @LastEditors: your name
    * @LastEditTime: 2023-08-29 15:05:06
    * @FilePath: your file path
    * @Description: your description
    -->

当你新增/修改文件内容时，保存文件后插件会根据你的设置自动更新注释块中的 LastEditors 和 LastEditTime 等信息。

3.手动触发：如果插件配置正确但仍未自动生效，你可以在编辑器中，尝试使用快捷键Ctrl + Command + I手动触发文件头的生成。

4.如果想让 koroFileHeader 插件忽略某些文件，决定哪些文件不需要生成文件头。可在项目根目录下创建一个 .koroignore 文件，列出想要忽略的文件或文件夹的规则。

以下是一个示例 .koroignore 文件的内容：

# 忽略所有 .txt 文件
*.txt

# 忽略 assets 文件夹
/assets/

# 忽略特定文件
ignore_this_file.js

最后，希望大家早日实现：成为编程高手的伟大梦想！
欢迎交流~

本文版权归原作者曜灵所有！未经允许，严禁转载！对非法转载者, 原作者保留采用法律手段追究的权利！
若需转载，请联系微信公众号：连先生有猫病，可获取作者联系方式！

一、编码相关#

1.编码能力#

2.3D相关#

二、拓展工具#

1.Git相关#

2.LeetCode#

3.Markdown All in One#

4.Markdown Preview Mermaid Support#

5.koroFileHeader#