用 VS Code 写个插件，和 vh, vw 单位相关

2023-11-11 08:26:26

大家好，我是[你的名字]，一名资深的前端工程师。今天，我将和大家分享一个使用 VS Code 开发插件的经验。

在我们的团队中，我们最近开始使用 vh 和 vw 单位来进行前端开发。这是一种相对较新的单位，它可以根据设备的视窗大小来调整元素的大小。

一开始，团队中的成员们都对这种单位感到非常陌生，经常需要使用计算器来进行单位转换。为了提高开发效率，我决定开发一个 VS Code 插件，帮助大家快速地进行单位转换。

这个插件的功能很简单，它可以在用户输入 CSS 代码时，自动将 vh 和 vw 单位转换为 px 单位。这样，开发人员就可以直接看到元素的实际大小，而不用再使用计算器进行转换了。

下面，我将详细介绍如何开发这个插件。

首先，我们需要创建一个 VS Code 插件项目。我们可以使用 VS Code 自带的命令行工具 Yeoman 来创建项目。

yo code

接下来，我们需要选择一个插件模板。这里，我们选择 "Empty Extension" 模板。

然后，我们就可以看到一个新的插件项目被创建出来了。在项目目录中，我们可以看到一些文件，其中最重要的就是 package.json 文件。

在 package.json 文件中，我们需要配置插件的一些基本信息，比如插件的名称、版本、作者等。

接下来，我们需要开发插件的核心逻辑。插件的核心逻辑主要在 src/extension.js 文件中。

在这个文件中，我们需要使用 VS Code 提供的 CompletionItemProvider 方法来实现自动转换的功能。

const vscode = require('vscode');

function activate(context) {
  // 注册自动转换提供程序
  vscode.languages.registerCompletionItemProvider('css', {
    provideCompletionItems(document, position) {
      // 获取当前输入的代码
      const text = document.getText();

      // 检查当前输入的代码是否包含 vh 或 vw 单位
      if (text.includes('vh') || text.includes('vw')) {
        // 如果包含，则自动转换为 px 单位
        const range = new vscode.Range(position.line, position.character, position.line, position.character);
        const completionItem = new vscode.CompletionItem('px', vscode.CompletionItemKind.Unit);
        completionItem.range = range;
        return [completionItem];
      }

      // 如果不包含，则不进行转换
      return [];
    }
  });
}

function deactivate() {}

module.exports = {
  activate,
  deactivate
};