Vscode实现一个提示css Token的插件

9 min read Sep 30, 2024

VSCode 实现一个提示 CSS Token 的插件

想让你的 CSS 代码编写更加高效吗？想要在写 CSS 代码时获得更智能的代码提示？那就试试自己动手实现一个 VSCode 插件来提示 CSS Token 吧！

什么是 CSS Token？

CSS Token 指的是 CSS 代码中的各种标记，例如属性名、属性值、选择器等等。例如，在 background-color: #f00; 这行代码中，background-color 和 #f00 就是 CSS Token。

为什么需要一个提示 CSS Token 的插件？

在编写 CSS 代码时，你可能会遇到以下问题：

忘记 CSS 属性名或值： 你可能想不起 background-color 的正确写法，或者想不起有哪些颜色值可以使用。
输入错误的语法： 如果你输入了错误的 CSS 语法，例如 backgroud-color，编译器可能无法识别，导致错误。
重复输入相同的代码： 如果你需要在多个地方使用相同的 CSS 样式，你需要重复输入相同的代码，非常浪费时间。

如何实现一个提示 CSS Token 的插件？

VSCode 提供了强大的扩展 API，可以用来创建各种插件，其中包括提示 CSS Token 的插件。以下是实现步骤：

创建插件项目： 使用 VS Code 打开一个新的文件夹，然后执行以下命令：
```
yo code
```
这个命令会创建一个新的 VS Code 插件项目，包含基本的代码结构和配置文件。

编写插件代码： 打开 src/extension.ts 文件，编写插件的代码。你需要使用 VS Code 的 vscode.languages API 来实现代码提示功能。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    const provider = new CSSCompletionItemProvider();
    context.subscriptions.push(vscode.languages.registerCompletionItemProvider(
        'css', // 注册的语言类型
        provider, 
        '.' // 触发代码提示的触发器
    ));
}

class CSSCompletionItemProvider implements vscode.CompletionItemProvider {
    provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): vscode.ProviderResult {
        // 获取当前光标位置的文本
        const line = document.lineAt(position.line).text;
        const prefix = line.substring(0, position.character);

        // 根据输入内容获取 CSS Token
        const tokens = this.getCSSTokens(prefix);

        // 生成 CompletionItem
        const completionItems = tokens.map(token => {
            const item = new vscode.CompletionItem(token);
            item.kind = vscode.CompletionItemKind.Property;
            return item;
        });

        return completionItems;
    }

    // 获取 CSS Token
    getCSSTokens(prefix: string): string[] {
        // 你可以根据你的需求获取 CSS Token，例如从本地文件或网络 API 获取
        // 这里只是一个简单的示例，返回一些常见的 CSS 属性名
        if (prefix === 'back') {
            return ['background-color', 'background-image'];
        } else if (prefix === 'font') {
            return ['font-family', 'font-size', 'font-weight'];
        } else if (prefix === 'color') {
            return ['color', 'border-color'];
        }
        return [];
    }
}

打包插件： 执行以下命令打包插件：
```
vsce package
```
这个命令会生成一个 .vsix 文件，你可以将这个文件安装到 VS Code 中。
安装插件： 在 VS Code 中打开扩展面板，点击 Install from VSIX... 按钮，选择生成的 .vsix 文件进行安装。

使用插件：

安装插件后，在编写 CSS 代码时，VS Code 会自动提示你可能的 CSS Token。例如，当你输入 back 时，插件会提示你 background-color 和 background-image 等属性名。

示例：

假设你正在编写以下 CSS 代码：

.container {
  back
}

当你输入 back 并按下 . 键时，插件会弹出一个提示框，提示你 background-color 和 background-image 这两个属性名。你可以选择其中一个属性名，插件会自动帮你填写完整的属性名。

其他提示：

你可以根据需要调整插件的代码，例如添加更多 CSS Token 或更改提示的触发器。
你可以使用第三方库来帮助你获取 CSS Token，例如 css-parser 或 postcss-selector-parser。
你可以参考 VS Code 的官方文档了解更多关于插件开发的信息。

总结：

开发一个提示 CSS Token 的插件可以帮助你更高效地编写 CSS 代码，减少错误，提高代码质量。你可以根据自己的需要定制插件的功能，例如添加更多 CSS Token 或更改提示的触发器。

希望这篇文章对你有所帮助！

Vscode实现一个提示css Token的插件

VSCode 实现一个提示 CSS Token 的插件

Featured Posts