vscode | 开发神器vscode必备优秀插件

Visual Studio Code简写为vscode，是一个轻量级但功能强大的源代码编辑器。已经成为我们工作中必备之神器。工欲善其事,必先利其器。其中插件对于我们提高效率有着举足轻重的地位。就个人而言，比较推荐vscode必备优秀插件大概如下：

• koroFileHeader
• Markdown Preview Enhanced
• filesize
• Project Manager
• Live Server
• Bookmarks
• Image preview
• Chinese (Simplified) (简体中文) Language
• vscode-icons
• Winter is Coming Theme
• Old Winter is Coming Light Theme
• Peacock

一、koroFileHeader

用于生成文件头部注释和函数注释的插件，支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！

1.1 使用方法

• ctrl+win+t：生成函数注释信息
• ctrl+win+t：生成文件头部注释信息

1.2 配置推荐

// 头部注释
"fileheader.customMade": {
    // Author字段是文件的创建者 可以在specialOptions中更改特殊属性
    // 公司项目和个人项目可以配置不同的用户名与邮箱 搜索: gitconfig includeIf  比如: https://ayase.moe/2021/03/09/customized-git-config/
    // 自动提取当前git config中的: 用户名、邮箱
    "Author": "qiu", // 同时获取用户名与邮箱
    // "Author": "git config user.name", // 仅获取用户名
    // "Author": "git config user.email", // 仅获取邮箱
    // "Author": "OBKoro1", // 写死的固定值 不从git config中获取
    "Date": "Do not edit", // 文件创建时间(不变)
    // LastEditors、LastEditTime、FilePath将会自动更新 如果觉得时间更新的太频繁可以使用throttleTime(默认为1分钟)配置更改更新时间。
    "LastEditors": "qiu", // 文件最后编辑者 与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 qiu, All Rights Reserved. "
    // "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by 写死的公司名/用户名, All Rights Reserved. "
},
// 函数注释
"fileheader.cursorMode": {
    "name":"qiu",
    "date":"",
    "description": "", // 函数注释生成之后，光标移动到这里
    "param": "", // param 开启函数参数自动提取 需要将光标放在函数行或者函数上方的空白行
    "return": "",
},

二、Markdown Preview Enhanced

Markdown Preview Enhanced 是一款为 Atom 以及 Visual Studio Code 编辑器编写的超级强大的 Markdown 插件。 这款插件意在让你拥有飘逸的 Markdown 写作体验。

参考网址：Markdown Preview Enhanced

三、filesize

filesize 插件旨在与 Visual Studio 代码编辑器一起使用，它在编辑器的状态栏中显示焦点文件的大小。

四、Project Manager

Project Manager 插件它可以帮助您轻松访问您的项目，无论它们位于何处。不要再错过那些重要的项目了。

五、Live Server

Live Server 插件启动具有静态和动态页面实时重新加载功能的本地开发服务器。

安装完成之后，在html页面中，右击可以查看到Open with Live Server选项，以后页面就此选项打开。

六、Bookmarks

Bookmarks 为你创建便捷的书签。它可以帮助您在代码中导航，轻松快速地在重要位置之间移动。不再需要搜索代码。它还支持一组选择命令，允许您选择书签行和书签行之间的区域。它对于日志文件分析非常有用。

• 添加书签：ctrl +alt + k

• 默认的颜色为：#157EFB

七、Image preview

通过Image preview 此插件，当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率。

八、Chinese (Simplified) (简体中文) Language

此Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 插件为 VS Code 提供本地化界面。

九、Colorful Comments

默认配置如下：

"colorful-comments.tags": [
        {
            "tag": "!",
            "color": "#FF2D00",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "?",
            "color": "#0076FF",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "//",
            "color": "#474747",
            "strikethrough": true,
            "backgroundColor": "transparent"
        },
        {
            "tag": "^",
            "color": "#EAF622",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "*",
            "color": "#28FF00",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "&",
            "color": "#FF06A0",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "~",
            "color": "#BE00FF",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "todo",
            "color": "#FF8C00",
            "strikethrough": false,
            "backgroundColor": "transparent"
        }
    ]

十、主题相关

关于主题部分，个人一直用的是vscode自带的主题。在多年的使用过程当中，比较推荐大家安装的几个主题相关的插件为：vscode-icons、Winter is Coming Theme、Old Winter is Coming Light Theme、Peacock

9.1 vscode-icons

VSCode-Icons 是一个文件图片插件，可以为项目不同类型的文件赋予不同的图标。让我们更容易区分不同的文件类型。

9.2 Winter is Coming Theme

9.3 Old Winter is Coming Light Theme

Old Winter is Coming Light Theme 主题：为原始的浅色主题（分为斜体和非斜体版本）

9.4 Peacock

Peacock 插件 巧妙地更改 Visual Studio Code 工作区的颜色。当你有多个 VS Code 实例、使用 VS Live Share 或使用 VS Code 的远程功能，并且你想要快速识别编辑器时，这是理想的选择。

使用方式：

• 按下此项可打开命令面板ctrl + shift + p
• 输入：Peacock
• 选择Peacock: Change to a favorite color