extension.js 4.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. const vscode = require('vscode');
  2. const path = require('path');
  3. // 组件列表
  4. // components list
  5. const componentList = require('./componentList');
  6. function activate(context) {
  7. // 如果没有设置,返回undefined
  8. // If not set, return undefined
  9. const result = vscode.workspace.getConfiguration().get('STDF');
  10. // 获取插件语言
  11. // Get plugin language
  12. const isZh = result.English ? false : true;
  13. // 读取当前工程的 package.json 文件
  14. // Read the package.json file of the current project
  15. const packageJson = require(path.join(vscode.workspace.rootPath, 'package.json'));
  16. // 判断当前工程是否引入了 stdf 组件库
  17. // Determine whether the current project has introduced the stdf component library
  18. const isImportStdf = packageJson?.dependencies?.stdf || packageJson?.devDependencies?.stdf ? true : false;
  19. // 当前文件是 .svelte 文件时且 isImportStdf 为 true 时,才注册悬浮提示
  20. // When the current file is a .svelte file and isImportStdf is true, register the hover prompt
  21. if (vscode.window.activeTextEditor.document.languageId === 'svelte' && isImportStdf) {
  22. vscode.languages.registerHoverProvider('svelte', {
  23. provideHover(document, position, token) {
  24. // 获取当前悬浮的单词
  25. // Get the word currently hovering
  26. const word = document.getText(document.getWordRangeAtPosition(position));
  27. // 将单词首字母小写
  28. // Lowercase the first letter of the word
  29. const wordLower = word.charAt(0).toLowerCase() + word.slice(1);
  30. // 如果单词为 components 数组中的一项,则显示提示信息,内容为 ../../doc/components/${componentspaths}/api.md 文件的内容
  31. // If the word is an item in the components array, the prompt information is displayed, and the content is the content of the ../../doc/components/${componentspaths}/api.md file
  32. if (componentList.includes(word)) {
  33. // 获取对应组件的 api.md 文件的路径
  34. // Get the path of the api.md file of the corresponding component
  35. const apiPath = path.join(__dirname, `./doc/components/${wordLower}/api${isZh ? '' : '_en'}.md`);
  36. // 读取 api.md 文件的内容
  37. // Read the contents of the api.md file
  38. const apiContent = require('fs').readFileSync(apiPath, 'utf-8');
  39. // 在 apiContent 后面添加示例、API、指南、组件源码的链接
  40. // Add links to examples, API, guides, and component source code after apiContent
  41. const baseUrl = 'https://stdf.design/#/components?nav=';
  42. const baseUrlCode = 'https://github.com/dufu1991/stdf/blob/main/packages/stdf/components/';
  43. const baseUrlCodeGitee = 'https://gitee.com/dufu1991/stdf/blob/main/packages/stdf/components/';
  44. const addContent = `**[${isZh ? '示例' : 'Demo'}](${baseUrl}${wordLower}&tab=0&lang=${
  45. isZh ? 'zh_CN' : 'en_US'
  46. })   [API](${baseUrl}${wordLower}&tab=1&lang=${isZh ? 'zh_CN' : 'en_US'})   [${
  47. isZh ? '指南' : 'Guide'
  48. }](${baseUrl}${wordLower}&tab=2&lang=${isZh ? 'zh_CN' : 'en_US'})   [${
  49. isZh ? '源码(GitHub)' : 'Source code(GitHub)'
  50. }](${baseUrlCode}${wordLower}/${word}.svelte)   [${
  51. isZh ? '源码(Gitee)' : 'Source code(Gitee)'
  52. }](${baseUrlCodeGitee}${wordLower}/${word}.svelte)**`;
  53. const allContent = apiContent + '\n\n' + '---' + '\n\n' + addContent;
  54. // 返回提示信息
  55. // Return prompt information
  56. return new vscode.Hover(allContent);
  57. }
  58. },
  59. });
  60. }
  61. }
  62. function deactivate() {}
  63. module.exports = {
  64. activate,
  65. deactivate,
  66. };