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

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

文章共3,308字 · 阅读需要大约12分钟

一键AI生成摘要，助你高效阅读

问答

秋堂主

1124人浏览 · 2023-08-24 21:08:43

秋堂主 · 2023-08-24 21:08:43 发布

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"
        }
    ]