我不想再翻代码找export了, 所以

写前端, 还是要解决自己需求才好玩。

起因

当我快乐的CRUD的时候,我注意到了一个很没意义的操作:

  1. 当写src/view/xxxx文件时
  2. 总会跑到src/http/api/xxxx 或者 src/tools/xxx 文件, 去看看那个文件 export 的变量名
  3. 然后切回src/view/xxxx 来写 import xxx from ‘xxxx’.
  4. 重复 1-3 N次

我感到疲惫,所以我在想有没有更方便的方式。
比如文件目录中,展示这个文件的exports


然后还能直接拖拽, 拖拽时顺便带上import xxx from xxx


开整

于是我开始研究vscode插件的开发教程, 打开官方文档,霍,很简单嘛,也就两句命令.
code.visualstudio.com/api/get-sta…


接下来就是漫长的调研学习,不得不说vscode插件资料比较少,参考了下面的教程:

学完发现,其实重要的就是两个逻辑:

  1. 遍历文件目录
  2. AST分析脚本

逻辑1就不说了,比较常规(常规到我直接用chatgpt生成), 大致如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
javascript复制代码async getDirectory(message) {
const directory = message.data.path
const entries = await vscode.workspace.fs.readDirectory(vscode.Uri.file(directory))
const resultPromise = entries.map(async ([name, type]) => {
const filePath = path.join(directory, name)

if (this.ignore.check(filePath, message.data.root))
return
const item: FileItem = {
id: filePath,
path: filePath,
title: name,
fileType: type === vscode.FileType.Directory ? 'Directory' : 'File',
leaf: false,
root: message.data.root,
}
if (type === vscode.FileType.File) {
const extname = path.extname(filePath).replace('.', '')
item.fileExt = extname
if (!['js', 'tsx', 'jsx', 'ts'].includes(extname))
return
}
if (type === vscode.FileType.Directory)
item.children = []
return item
})

const results = await Promise.all(resultPromise)
return [0, results.filter(item => item)]
}

核心还是在逻辑2上,想了想可能有两个办法:

  1. 通过动态import,进行运行时分析
  2. 通过Bable的AST进行静态语法分析

哪么选择哪一个逻辑更好呢? (小孩子才做选择,大人我全都要 !)

  • 对于动态 import,经朋友推荐,调研使用了 antfu 大佬开源的 pkg-exports 以及 local-pkg 库。
  • 对于BabelAST,找到了以下资源学习:

大致流程就是先babel.parser,再babel.traverse,最后分析AST就完事:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
js复制代码export async function solveExports(code) {
const ast = parser.parse(code, {
sourceType: 'module',
plugins: ['jsx', 'typescript', 'decorators'],
errorRecovery: true,
})
const exports: any = []
traverse(ast, {
ExportDefaultDeclaration(astPath: any) {
const returnType = solveDetail(astPath)
exports.push({
name: 'default',
type: astPath.node.declaration.type,
returnType: returnType?.type,
children: returnType?.children,
})
},
ExportNamedDeclaration(astPath: any) {
const specifiers = astPath.node?.specifiers || []
specifiers?.forEach((specifier: any) => {
exports.push({ name: specifier.exported?.name, type: specifier.exported?.type })
})
const returnType = solveDetail(astPath)
exports.push({
name: astPath.node?.declaration?.id?.name,
type: astPath.node?.declaration?.type,
returnType: returnType?.type,
children: returnType?.children,
})
},
})
return exports
}
}

最后就是漫长的踩坑,写业务逻辑和业务调试,我后续再依次更新。

  • 比如如何配置工程化
  • 比如如何用solidjs开发webview
  • 比如支持vue,调研学习了vue-compiler
  • 比如分析出export的变量类型,以方便导入import
  • 等等等等

进度

目前感觉初步解决自己的需求,已发布体验版到VSCode商店.

VScode 插件商店搜索 XMouse 即可使用(也可以点击下方链接)

marketplace.visualstudio.com/items?itemN…

image.png

未来

  • 准备进一步分析文件export,以方便更好的使用。
  • 准备集成VSCode原生文件目录的核心功能,就不用来回切换面板。
  • 等等等等,期待建议

最后

我是尘码,曾鹅厂打工5年,现裸辞自由职业家里蹲 ing.

如对 Xmouse 有兴趣,欢迎私聊or提issue

XMouse github link

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%