项目背景：

在现有项目的开发中（小程序原生开发）常常在编写样式的时候会有那么一个问题困扰着我、当我在wxml 写好页面结构返回css 文件去编写样式的时候常常因为记不住当时自己写的类名而导致我还需要切回wxml去查看一下、反反复复我就厌烦了、冒出一个想法表示如果有个插件能够实时提醒我当前页面的class名称那就不用老切文件了还能提高效率！要是还能通过class名称点击进入到相对应的css文件位置那就更太好啦！大致的效果如下

vscode文档

安装vscode插件包

  1. npm install -g yo generator-code
  2. yo code //然后根据提示填写一些项目的基本信息和自己的编码习惯、喜欢typescript的可以选择他！

把项目run起来

把项目拖入到vscode开发工具里面、然后按F5启动项目
windows用户按住shift+Ctrl+p 、mac按住command + p 启动命令输入行、然后输入hello World后回车、然后vscode正常会在右下角提醒Hello World from xxx 字样、那恭喜你你已经学会vscode的第一个插件了😀

理解项目的目录结构

package.json

  1. {
  2.       "name": "css-remind",
  3.     "displayName": "css-remind",
  4.     "description": "css提醒",
  5.     "version": "0.0.1",
  6.     "engines": { "vscode": "^1.54.0" },
  7.     "categories": [ "Other" ],
  8.     // 插件被激活的规则
  9.     "activationEvents": [ "onCommand:css" ],
  10.     //入口
  11.     "main": "./out/extension.js",
  12.     //扩展名的对象
  13.     "contributes": {
  14.         //命令
  15.         "commands": [
  16.             { "command": "css", "title": "get class" }, 
  17.                         { "command": "html", "title": "get html" }
  18.         ]
  19.     },
  20.     //用于搜索插件的关键字
  21.     "keywords":[
  22.         "css",
  23.         "css-"
  24.     ],
  25.     //脚本
  26.     "scripts": {
  27.         "vscode:prepublish": "yarn run compile",
  28.         "compile": "tsc -p ./",
  29.         "watch": "tsc -watch -p ./",
  30.         "pretest": "yarn run compile && yarn run lint",
  31.         "lint": "eslint src --ext ts",
  32.         "test": "node ./out/test/runTest.js"
  33.     },
  34.         //开发依赖
  35.     "devDependencies": {
  36.         "@types/vscode": "^1.54.0",
  37.         "@types/glob": "^7.1.3",
  38.         "@types/mocha": "^8.0.4",
  39.         "@types/node": "^12.11.7",
  40.         "eslint": "^7.19.0",
  41.         "@typescript-eslint/eslint-plugin": "^4.14.1",
  42.         "@typescript-eslint/parser": "^4.14.1",
  43.         "glob": "^7.1.6",
  44.         "mocha": "^8.2.1",
  45.         "typescript": "^4.1.3",
  46.         "vscode-test": "^1.5.0"
  47.     }
  48. }

extension.ts

  2. import * as vscode from 'vscode';
  3. /**
  4.  * 插件被激活时触发，所有代码总入口
  5.  * @param {*} context 插件上下文
  6.  */
  7. export function activate(context: vscode.ExtensionContext) {
  8.     let disposable = vscode.commands.registerCommand('css', () => {
  9.         vscode.window.showInformationMessage('css');
  10.     });
  11.     let disposable1 = vscode.commands.registerCommand('html', () => {
  12.         vscode.window.showInformationMessage('html');
  13.     });
  14.     // 注册命令
  15.     context.subscriptions.push(disposable,disposable1);
  16. }
  18. //插件被释放时触发
  19. export function deactivate() {
  20.     console.log('事件执行销毁！')
  21. }

流程：在contributes.commands里面注册两个html css的命令、并在extension.js中去实现了它、还需要在activationEvents添加上onCommand:xxx用来告诉vscode，当用户执行了这个命令操作时我们定义的指令方法内容
现在我们对整个项目有个一个大概的认识、如果还想掌握更多的配置解读下方有vscode的文档介绍
activationEvents
Extension
API

下面开始我们上方的GIF功能开发、如果不想看思路的直接拉到最低下方有GitHub仓库地址

功能分析

  1. 1、捕获在css、或者其他样式文件里面输入 . 然后匹配同级文件夹下的html里面所有的class名称
  2. 2、获取当前文件夹路径、读取路径下所有的文件并筛选出html文件路径（有可能没有html)
  3. 3、获取路径后读取html文件内容、并匹配出所有的class名称
  4. 4、当用户触发事件规则把筛选好的class名称提示出去

功能开发

  1.     //先认识一个vscode自动补全的api https://code.visualstudio.com/api/references/vscode-api#CompletionItemProvider
  2.     vscode.languages.registerCompletionItemProvider
  3.     export function activate(context: vscode.ExtensionContext) {
  4.       context.subscriptions.push(
  5.         //在当前文件内触发事件
  6.         vscode.languages.registerCompletionItemProvider(
  7.             [
  8.                 { scheme: "file", language: "css" },
  9.                 { scheme: "file", language: "less" },
  10.                 { scheme: "file", language: "scss" },
  11.                 { scheme: "file", language: "sass" },
  12.                 { scheme: "file", language: "stylus" },
  13.                 { scheme: "file", language: "vue" },
  14.             ],
  15.             {
  16.                 provideCompletionItems,
  17.                 resolveCompletionItem,
  18.             },
  19.             //在上面这些文件输入 . 后触发事件
  20.             "."
  21.         ),
  22.         //文件跳转部分
  23.         vscode.languages.registerDefinitionProvider(
  24.             .....
  25.         );
  26.     }
  28. const extensionArray: string[] = ["htm", "html", "jsx", "tsx","wxml"];
  29. const htmMatchRegex: RegExp = /class="[\w- ]+"/g;
  30. const sxMatchRegex: RegExp = /className="[\w- ]+"/g;
  32. function provideCompletionItems(
  33.   document: vscode.TextDocument,
  34.   position: vscode.Position,
  35.   _token: vscode.CancellationToken,
  36.   _context: vscode.CompletionContext
  37. ) {
  38.   const typeText = document
  39.     .lineAt(position)
  40.     .text.substring(position.character - 1, position.character);
  41.   if (typeText !== ".") { return; }
  42.   // 获取当前文件路径
  43.   const filePath: string = document.fileName;
  44.   let classNames: string[] = [];
  45.   // 在vue文件触发
  46.   if (document.languageId === "vue") {
  47.     // 读取当前文件
  48.     classNames = getClass(filePath);
  49.   }
  50.   // 在css类文件触发
  51.   else {
  52.     // 获取当前文件夹路径
  53.     const dir: string = path.dirname(filePath);
  54.     // 读取当前文件夹下的文件名
  55.     const files: string[] = fs.readdirSync(dir);
  56.     // 筛选目标文件
  57.     const target: string[] = files.filter((item: string) =>
  58.       extensionArray.includes(item.split(".")[1])
  59.     );
  60.     // 读取目标文件，获取class
  61.     target.forEach((item: string) => {
  62.       const filePath: string = `${dir}/${item}`;
  63.       classNames = getClass(filePath);
  64.     });
  65.   }
  67.   classNames = classNames.reduce((arr, ele) => {
  68.     const className: string = ele.split("=")[1];
  69.     // 去掉引号
  70.     const field: string = className.slice(1, className.length - 1);
  71.     // 处理多class情况
  72.     if (ele.includes(" ")) {
  73.       return arr.concat(field.split(" "));
  74.     } else {
  75.       arr.push(field);
  76.       return arr;
  77.     }
  78.   }, [] as string[]);
  80.   return classNames.map( (ele: string) => {
  81.     return new vscode.CompletionItem(
  82.       // 提示内容要带上触发字符，https://github.com/Microsoft/vscode/issues/71662
  83.       document.languageId === "vue" ? `${ele}` : `.${ele}`,
  84.       vscode.CompletionItemKind.Text
  85.     );
  86.   });
  87. }

这样我们就完成了一个自动补全的vscode插件、剩下的点击html跳转到css文件指定name名称在我的GitHub仓库、有兴趣的可以去看看！

仓库地址