VSCode 插件整理与设置

插件

.gitignore Generator

作用：自动生成 .gitignore 文件

使用：ctrl + shift + p 输入 generate .gitignore file

vscode-gitignore-generator

ASCIIDecorator

作用：生成 ASCII 文字

使用：ctrl + shift + p 输入 generate .gitignore file

ASCIIDecorator

background

作用：自定背景

使用：

githubusercontent

Better Comments

作用：更加友好的注释

使用：

better-comments

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{
    // << better-comments 自定义颜色
    "better-comments.tags": [
        {
            "tag": "!",
            "color": "#FF2D00",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "?",
            "color": "#3498DB",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "//",
            "color": "#474747",
            "strikethrough": true,
            "backgroundColor": "transparent"
        },
        {
            "tag": "todo",
            "color": "#FF8C00",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "*",
            "color": "#98C379",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "info",
            "color": "#99FB37",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "<<",
            "color": "#F2D660",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": ">>",
            "color": "#60D6F2",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
    ],
    // >> better-comments
}

Bracket Pair Colorizer 2

作用：更加友好的括号提示

使用：

Bracket-Pair-Colorizer-2

Browser Preview

作用：在 vscode 中打开浏览器

使用：

vscode-browser-preview

Check Updates of NPM Packages

作用：检查 package.json 中的依赖包版本

使用：

打开 package.json 即可

Chinese (Simplified) Language Pack for Visual Studio Code

作用：适用于 VS Code 的中文（简体）语言包

Code Runner

作用：在 vscode 中运行一个文件或者一部分选中的代码

CodeMetrics

作用：在 TypeScript / JavaScript / Lua 文件中计算复杂度。

使用：

codemetrics

Comment Translate

作用：VSCode 注释翻译

Community Material Theme

作用：主题

使用：

Frame

Darcula IntelliJ Theme

作用：主题

使用：

Darcula IntelliJ Theme

dictionary

作用：汉英英汉词典 for vscode

使用：

dictionary

Document This

作用：Document This 方法头

配置：

1
2
3
4
5
6
7
8
{
    // << docthis
    "docthis.includeAuthorTag": true, //出现@Author
    "docthis.authorName": "bubao",
    "docthis.includeDateTag": true,
    "docthis.includeDescriptionTag": true, //出现@Description
    // >> docthis
}

使用：

Document This

vscode-docthis

DotENV

VSCode .env syntax highlighting

DotENV

Draw.io Integration

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.

Draw.io Integration

egg-jump-definition

作用：egg.js 开发工具

使用：

vscode-docthis

Egg.js dev tools

作用：Egg.js dev tools Egg.js 开发辅助插件

eggjs

作用：egg.js 开发工具

vscode-eggjs

Emoji

作用：emoji 输入

使用：

Emoji

ESLint

作用：ES 格式化工具

配置

1
2
3
4
5
6
7
8
9
10
{
    // << eslint
    "eslint.enable": true,
    "eslint.alwaysShowStatus": true,
    // >> eslint
    // << editor
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
}

filesize

作用：文件大小

使用：

filesize

Fix VSCode Checksums

作用：修复 vscode

使用：ctrl + shift + p 输入 Fix Checksums: Apply

Git Emoji Commit 中文版

作用：提交 git 的时候，加上 emoji 前缀！

使用：

git-emoji-zh

Git Graph

作用：view a Git Graph of your repository, and perform Git actions from the graph.

使用：

Git Graph

Git History

作用：View git log, file history, compare branches or commits

使用：

Git History

GitHub Pull Requests and Issues

作用：GitHub 扩展

GitLens — Git supercharged

作用：Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

使用：

gitlens-preview

hexo-one

作用：Making hexo easier to use

Import Cost

作用：导入文件大小

使用：

import-cost

indent-rainbow

作用：indent-rainbow

使用：

indent-rainbow

koroFileHeader

在 vscode 中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言，灵活方便，文档齐全，食用简单！觉得插件不错的话，就给个 Star⭐️吧~

koroFileHeader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
    // << koro 头部注释配置
    "fileheader.customMade": {
        "Description": "",
        "author": "bubao",
        "Date": "Do not edit",
        "LastEditors": "bubao",
        "LastEditTime": "Do not edit",
        // "config": {
        //     "prohibitAutoAdd": [
        //         "json",
        //         "md",
        //         "html"
        //     ]
        // }
    },
    
    "fileheader.configObj": {
        "prohibitAutoAdd": [
            "json"
        ], // 禁止。json 文件，自动添加头部注释
        "prohibitItemAutoAdd": [
            "blog"
        ], // 禁止 blog 项目自动添加头部注释
        "specialOptions": {
            "Date": "date",
            "Author": "author",
            "LastEditTime": "last edit time",
            "LastEditors": "last author",
            "Description": "description",
            "FilePath": "文件相对于项目的路径"
        },
        "language": {
            "js": {
                "head": "/**",
                "middle": " * @",
                "end": " */"
            },
            "vue": {
                "head": "<!--",
                "middle": " * @",
                "end": " -->"
            }
        }
    },
    // >> koro 注释格式配置
}

Kanban

作用：看板

使用：

vscode-kanban

koroFileHeader

作用：在 vscode 中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言，功能强大，灵活方便，文档齐全，食用简单！

使用：

koro1FileHeader

licenser

作用：声明生成器

使用：ctrl + shift + p 输入 licenser: Create LICENSE file

Markdown All in One

作用：Markdown

Markdown All in One

Markdown Checkbox

作用：Markdown Checkbox

Markdown Checkbox

Markdown Preview Enhanced

作用：Markdown Preview Enhanced

Markdown Preview Enhanced

markdownlint

作用：markdownlint 格式化

Material Icon Theme

作用：Theme Icon

vscode-material-icon-theme

Material Theme

作用：Theme

vscode-material-theme

Material Theme Icons

作用：Theme Icon

Material Theme Icons

nginx.conf

作用：nginx.conf 高亮和提示

node-readme

作用：node 模块 readme

Material Theme Icons

Node.js Modules Intellisense

作用：在导入语句中自动完成 Node.js 模块

Node.js Modules Intellisense

npm-import-package-version

作用：导入模块的版本

vscode-npm-import-package-version

One Dark (Sublime Babel)

作用：主题

One-Dark

Pangu-Markdown

作用：md 格式化

Polacode

作用：生成代码图片

Polacode

Rainbow Brackets

作用：彩虹括号

20160509171502

Remote - Containers

作用：远程服务器连接

remote-containers-readme

REST Client

作用：REST 客户端

vscode-restclient

Settings Sync

作用：配置同步

login-with-github

ssz-egg

作用：快速生成 egg 代码

ieyEBd

SVG

作用：svg 查看器

vscode-svg2

TabNine

作用：全语言补全

VSC Netease Music

作用：网易云音乐

使用：按下 F1 或 Ctrl Shift P 打开命令面板

输入命令前缀 网易云音乐 或 NeteaseMusic 开始探索 :D

vscode-hexo-utils

作用：vscode extension for hexo

feature

Weixin Read

作用：微信读书插件

Weixin Read

Word Count CJK

作用：cjk 文字计算，自带计数只支持英文

Zhihu Daily

作用：知乎日报

Zhihu Daily

教程
#vscode
VSCode 插件整理与设置
https://bubao.github.io/posts/99204414.html
作者
一念
发布于
2020年6月8日
许可协议