您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

组件库设计 | 让你的React组件获得代码补全和属性提示功能

• 写在前面
• 需求来源
• 生成项目
• 代码补全(snippets)
• 智能提示
• 打包发布
• • 1.第一步，全局安装vscode打包工具
  • 2.第二步，创建vscode账号
  • 3.第三步，创建组织令牌
  • 4.第四步，创建publisher
  • 配置
  • 自动更新README.md
  • 自动升级package.json版本
• 总结

写在前面

React组件库Concis在大量募集小伙伴一起参与开源项目开发，目前仍有很多计划需要去实施，包含PC端组件扩充、移动端组件开发、Concis生态插件开发等等，具体可以看此文：

React组件库Concis,寻求社区有兴趣的小伙伴加入…

Concis组件库相关链接，希望大家多多鼓励支持、多多Star，给作者更多的动力

Github
线上文档

需求来源

博主在开发组件库以及实际项目测试过程中，突然发现Concis的组件都需要去手写，而回想以前使用antd/el组件库时都是可以自动生成代码块的，并且移到标签中可以看到对应的一些提示信息，于是博主开始探索Vscode插件的开发了。

生成项目

首先全局安装vscode脚手架

npm install -g yo generator-code

安装完成后在命令行输入

yo code

在提示中直接选择New Extension，生成一个vscode插件工程，下面几项是vscode所提供单独功能开发的脚手架，可以理解成小插件，由于这里是具体化到整个Concis工程，因此选择第一个。

接下来输入一些插件的命名即可生成项目，经过处理后的项目目录是这样的：

这里后续会讲到自定义打包的一些配置。

代码补全(snippets)

代码补全功能相对简单，只需在项目中创建snippets.json文件，在里面配置snippets就可以。
有一个网站可以帮助我们快速的创建 code snippet https://snippet-generator.app/

把对应的snippet生成，复制到snippets.json中即可，就像这样：

同时在package.json中配置contributes，指定插件所生效的文件，博主是React组件库，因此定了js/ts/jsx/tsx四种文件类型

很简单，不需要你动脑筋写一行代码，自动补全的功能实现了。

智能提示

提示的话就需要我们入门一下，写一写vscode的api啦，打开项目生成的extension.ts文件，将代码写成这样：

import * as vscode from 'vscode'const compileFiles = ['react', 'typescript', 'javascript', 'javascriptreact', 'typescriptreact'];function providerHover(document: vscode.TextDocument, position: vscode.Position) {}export function activate(context: vscode.ExtensionContext) {context.subscriptions.push(vscode.languages.registerHoverProvider(compileFiles, {provideHover,}),);
}export function deactivate() {}

上面代码我们通过vscode.languages.registerHoverProvider注册了鼠标移入事件，并通过compileFiles指定了文件类型，而插件所要实现的业务功能就在provideHover中实现。

function provideHover(document: vscode.TextDocument, position: vscode.Position) {//移入Concis组件Dom，出现介绍const line = document.lineAt(position);let isConcisComponentDom = false;let matchComponent = '';for (let i = 0; i < componentList.length; i++) {const component = componentList[i];if (line.text.includes(`<${component}`)) {isConcisComponentDom = true;matchComponent = component;}}if (isConcisComponentDom) {const isCN = vscode.env.language === 'zh-cn';let componentDocPath = '';for (let i = 0; i < matchComponent.length; i++) {const str = matchComponent[i];if (i !== 0 && str.charCodeAt(0) >= 65 && str.charCodeAt(0) <= 90) {componentDocPath += '-';}componentDocPath += str;}let text = isCN? `查看${matchComponent}组件官方文档\n
Concis -> http://react-view-ui.com:92/#/common/${componentDocPath.toLowerCase()}`: `View the official documentation of the Button component\n
Concis -> http://react-view-ui.com:92/#/common/${componentDocPath.toLowerCase()}`;return new vscode.Hover(text);}
}

接下来我们解读一下这里面的功能：

1. 首先，通过document.lineAt获取代码行，判断Concis组件关键词是否出现在代码内容line.text中；
2. 对满足条件的情况，获取组件线上文档地址，编辑提示的内容信息，对应代码段中的text；
3. 将text通过new vscode.Hover返回；

至此，代码自动补全+智能提示功能完成了，来看一下效果吧：

打包发布

1.第一步，全局安装vscode打包工具

npm i -g vsce

2.第二步，创建vscode账号

首先访问 https://login.live.com/ 登录你的Microsoft账号，没有的先注册一个，然后访问： https://aka.ms/SignupAzureDevOps，如果你从来没有使用过Azure，那么就要先创建一个Azure DevOps 组织，默认会创建一个以邮箱前缀为名的组织。

3.第三步，创建组织令牌

点击右上角的用户设置，点击创建新的个人访问令牌。

这里请选择All accessible organizations 否则会无法部署插件。

创建完毕会出现一个token，请手动记录下来这个token，因为官方不会为你保存，并且这个token在发布时会用到。

4.第四步，创建publisher

前往插件市场https://marketplace.visualstudio.com/创建一个publisher，并在package.json中添加
publisher字段，名字保持一致。

配置

好了，到这里你已经完成了准备工作。

博主通过rollup将代码打包后再使用vscode内置的打包发布，因此打包流程如下：

1. rollup打包
2. vsce打包
3. vsce发布

rollup.config.js配置如下：

import typescript from 'rollup-plugin-typescript2';
import clear from 'rollup-plugin-clear';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import { uglify } from 'rollup-plugin-uglify';export default {input: ['./src/extension.ts'],output: [{file: 'dist/extension.js',format: 'cjs',name: 'cjs.js',},],plugins: [typescript(), // 会自动读取 文件tsconfig.json配置clear({targets: ['dist'],}),resolve(),commonjs(),terser(),uglify(),],external: ['react', 'react-dom'],
};

在package.json中配置一下命令行，让我们的打包发布过程像如下所说的顺序：

	"scripts": {"upgrade": "node ../../scripts/replace-version-in-vscode.ts",					//升级package.json中版本"compile": "rollup -c ./rollup.config.js",										//rollup打包														"build": "vsce package",														//vsce打包									"generate:readme": "node ../../scripts/vscode/generate-vscode-snippet.ts",		//生成README.md内容"publish": "npm run compile && npm run build && vsce publish"					//部署},

这里upgrade和generate:readme是博主针对于Concis组件库自己加的两个脚本，我们看一下publish，可以看到按上述所讲的顺序进行打包构建，这样代码层面的配置已经做完了。

执行npm run publish，输入之前创建保存的token，这样就发布成功了。

看到这里，你已经掌握了开发一个vscode工程并打包发布的内容了，博主针对组件库的需求进行的扩展，也就是上面所提到的两个命令：

npm run upgrade				//升级package.json中版本
npm run generate:readme		//根据组件项目目录，自动生成README.md

从Concis-snippets插件的介绍可以看到，下面有一段表格，表格介绍了每个snippet对应的介绍，看到这你应该想象到了吧？此时博主又开发了两个组件，但是不想手动去更新README.md，这时就需要自定义脚本了。

自动更新README.md

//根据项目目录写入vscode-snippets README.md
const fs = require('fs-extra');
const path = require('path');const baseTemplate = fs.readFileSync(path.join(__dirname, 'base-template.md'), 'utf-8');
const componentList = fs.readdirSync(path.join(__dirname, '../../packages/concis-react/src'));let tableTemplate = '';componentList.forEach((f) => {if (f[0].charCodeAt(0) >= 65 && f[0].charCodeAt(0) <= 90) {//组件tableTemplate += `|c${f.toLowerCase()}|snippet a Concis ${f} Component|\n`;}
});const fileContent = `${baseTemplate}${tableTemplate}`;
console.log(fileContent);fs.writeFile(path.resolve(__dirname, '../../packages/concis-vscode-snippets/README.md'),fileContent,'utf-8',
).then(() => {console.log('生成concis-vscode-snippets 成功'); // eslint-disable-line
});

这里我们有一个基础模板，放着README.md上部分一直不会变的内容，对应代码中base-template.md，然后读取了组件目录，将基础模板和表格内容拼接起来，就可以了。

自动升级package.json版本

//更新concis-vscode-snippets/package.json中的版本
const fs = require('fs-extra');
const path = require('path');
const { version } = require('../packages/concis-vscode-snippets/package.json');const fileText = fs.readFileSync(path.join(__dirname, '../packages/concis-vscode-snippets/package.json'),'utf-8',
);const replacedVersion = fileText.split('\n').map((t) => {if (/"version":/.test(t)) {let newVersion = version.split('.');let [first, secord, third] = newVersion;if (third >= 10 || secord >= 10) {if (third >= 10) {third = 0;secord = Number(secord) + 1;}if (secord >= 10) {third = 0;secord = 0;first = Number(first) + 1;}} else {third = Number(third) + 1;}newVersion[newVersion.length - 1] = Number(newVersion[newVersion.length - 1]) + 1;console.log(`"version": "${first}.${secord}.${third}"`);return `  "version": "${first}.${secord}.${third}",`;}return t;
});fs.outputFile(path.resolve(__dirname, '../packages/concis-vscode-snippets/package.json'),replacedVersion.join('\n'),
).then(() => {console.log('替换 package.json 中的 version 成功！'); // eslint-disable-line
});

代码实现了一个替换package.json文件中版本的功能，有了这两个自动脚本的支持，我们就可以把publish改成这样：

"scripts": {"upgrade": "node ../../scripts/replace-version-in-vscode.ts",								"compile": "rollup -c ./rollup.config.js",																"build": "vsce package",																										"generate:readme": "node ../../scripts/vscode/generate-vscode-snippet.ts",		"publish": "npm run upgrade && npm run generate:readme && npm run compile && npm run build && vsce publish"								
}					

总结

本文通过博主对于Concis实际案例，讲解了开发一个vscode插件从准备工作到功能实现最后打包发布的全过程，如果文章有用，希望多多支持。

Concis组件库地址

Concis组件库线上链接：http://react-view-ui.com:92
github：https://github.com/fengxinhhh/Concis
npm：https://www.npmjs.com/package/concis

开源不易，欢迎学习和体验，喜欢请多多支持，有问题请留言，如果此文对你有帮助，博主需要你的支持，感谢。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！