VSCode Indent Rainbow 插件使用教程

VSCode Indent Rainbow 插件使用教程

vscode-indent-rainbowExtension which shows indentation with a faint rainbow colored background to make them more readable项目地址:https://gitcode.com/gh_mirrors/vs/vscode-indent-rainbow

1. 项目的目录结构及介绍

VSCode Indent Rainbow 插件的目录结构如下：

vscode-indent-rainbow/
├── .github/
│   └── workflows/
│       └── ci.yml
├── assets/
│   └── icon.png
├── src/
│   ├── commands/
│   │   └── index.ts
│   ├── configuration/
│   │   └── index.ts
│   ├── extension.ts
│   ├── indentRainbow.ts
│   ├── test/
│   │   └── extension.test.ts
│   └── utils/
│       └── index.ts
├── .gitignore
├── .vscodeignore
├── CHANGELOG.md
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

• .github/workflows/: 包含GitHub Actions的CI配置文件。
• assets/: 包含插件的图标文件。
• src/: 包含插件的主要源代码。
  • commands/: 包含命令相关的代码。
  • configuration/: 包含配置相关的代码。
  • extension.ts: 插件的入口文件。
  • indentRainbow.ts: 插件的核心逻辑文件。
  • test/: 包含测试代码。
  • utils/: 包含工具函数。
• .gitignore: Git忽略文件配置。
• .vscodeignore: VSCode忽略文件配置。
• CHANGELOG.md: 更新日志。
• package.json: 插件的元数据和依赖管理。
• README.md: 插件的说明文档。
• tsconfig.json: TypeScript配置文件。

2. 项目的启动文件介绍

插件的启动文件是 src/extension.ts。这个文件是插件的入口点，负责初始化插件并注册命令。

启动文件内容概览

import * as vscode from 'vscode';
import { IndentRainbow } from './indentRainbow';

export function activate(context: vscode.ExtensionContext) {
    const indentRainbow = new IndentRainbow();
    context.subscriptions.push(indentRainbow);
}

export function deactivate() {
    // 插件停用时的清理工作
}

启动文件功能介绍

• activate函数: 当插件被激活时调用，初始化 IndentRainbow 实例并将其添加到上下文订阅中。
• deactivate函数: 当插件被停用时调用，进行必要的清理工作。

3. 项目的配置文件介绍

插件的配置文件主要是 package.json，这个文件包含了插件的元数据、命令、配置项等信息。

package.json 内容概览

{
    "name": "indent-rainbow",
    "displayName": "Indent Rainbow",
    "description": "Makes indentation easier to read",
    "version": "8.3.0",
    "publisher": "oderwat",
    "engines": {
        "vscode": "^1.50.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onStartupFinished"
    ],
    "main": "./out/extension.js",
    "contributes": {
        "configuration": {
            "type": "object",
            "title": "Indent Rainbow",
            "properties": {
                "indentRainbow.includedLanguages": {
                    "type": "array",
                    "default": [],
                    "description": "For which languages indent-rainbow should be activated (if empty it means all)"
                },
                "indentRainbow.excludedLanguages": {
                    "type": "array",
                    "default": ["plaintext"],
                    "description": "For which languages indent-rainbow should be deactivated (if empty it means none)"
                },
                "indentRainbow.updateDelay": {
                    "type": "number",
                    "default": 100,
                    "description": "The delay in ms until the editor gets updated"
                }
            }
        }
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",

vscode-indent-rainbowExtension which shows indentation with a faint rainbow colored background to make them more readable项目地址:https://gitcode.com/gh_mirrors/vs/vscode-indent-rainbow