写了个能提升一点点Cocos开发体验的VS Code插件

Creator 3.x
#1

前言

最近我自己用了一段时间的Rider写Unity的项目，用过了才知道，Rider对Unity的适配程度非常高，真是究极无敌人性化，各种小细节让编码体验极佳。然后又想了想VS Code写Cocos项目的体验，相较之下各方面真的有很大落差，于是就想依赖VS Code插件去实现（抄）一些Rider的功能。

项目地址

GitHub: https://github.com/LeeYip/cocos-toolbox
VS Code扩展商店搜索 Cocos Toolbox

功能

自动同步meta

  • 在VS Code中修改（如重命名、移动、删除）项目文件与目录时，同步修改对应的meta文件
  • VS Code设置 - CocosToolbox.enableMeta

一般情况下我们都会在VS Code中屏蔽meta文件的显示，导致每次想重命名或者移动文件的时候，不方便直接在VS Code中将文件和对应的meta同步修改。
为了防止文件的引用丢失，每次都要切到CocosCreator中改，但是项目稍微大一些，经常出现切CocosCreator就卡半天的情况，非常难受。
现在这个插件可以让这些操作全都留在VS Code中进行，也方便重命名脚本时让VS Code自动修改脚本import。

颜色预览&选择

  • 对文件中形如#9648ff和color(255, 90, 0)格式的内容旁显示对应的颜色色块
  • 鼠标悬停在以上格式的颜色值时，在悬浮窗上展示颜色选择器
  • 可在设置 - CocosToolbox.colorLanguages中配置支持颜色预览的文件类型，默认支持类型为javascript、typescript、json
  • 可在设置 - CocosToolbox.enableColor中开关
    color_token
    color_token754×671 36.4 KB

快速查找所有引用当前脚本的资源文件（场景和预制体）

插件设置

Snipaste_2024-08-04_10-01-59
Snipaste_2024-08-04_10-01-59943×769 43.7 KB

PS：感谢 @1226085293 的帮助，让我把颜色悬停内容改成了颜色选择器

10赞
Cocos 自动同步 .meta 修改的 IDE 工具，意见征集
#2

你听说了吗？我爱你

#3

t1

1赞
#4

你这个插件和我的相似度90% :rofl:

https://store.cocos.com/app/detail/4516

#5

另外你的 color 部分代码可以用 registerColorProvider，你可以借鉴下

/** 添加 color 支持 */
function addColorSupport(context: vscode.ExtensionContext): void {
	// cc.color 颜色提示
	const colorProvider = vscode.languages.registerColorProvider(
		config.languageSS,
		{
			provideDocumentColors(
				document: vscode.TextDocument,
				token: vscode.CancellationToken
			): vscode.ColorInformation[] {
				let resultAS: vscode.ColorInformation[] = [];

				for (let kN = 0, lenN = document.lineCount; kN < lenN; ++kN) {
					let lineS = document.lineAt(kN).text;

					for (let v2 of lineS.matchAll(/color\([\d ,]+\)/g)) {
						let rgbaNS = v2[0]
							.slice(6, v2[0].length - 1)
							.split(",")
							.map((vS) => Number(vS.trim()) / 255);

						resultAS.push({
							color: new vscode.Color(
								rgbaNS[0],
								rgbaNS[1],
								rgbaNS[2],
								rgbaNS[3] ?? 0
							),
							range: new vscode.Range(
								new vscode.Position(kN, v2.index!),
								new vscode.Position(kN, v2.index! + v2[0].length)
							),
						});
					}
				}
				return resultAS;
			},
			provideColorPresentations(
				color: vscode.Color,
				context: { document: vscode.TextDocument; range: vscode.Range },
				token: vscode.CancellationToken
			): vscode.ColorPresentation[] {
				return [
					{
						label: `color(${Math.round(color.red * 255)}, ${Math.round(
							color.green * 255
						)}, ${Math.round(color.blue * 255)}, ${Math.round(
							color.alpha * 255
						)})`,
					},
				];
			},
		}
	);

	context.subscriptions.push(colorProvider);
}

其他部分功能就不贴了

1赞
#6

:kissing_smiling_eyes:确实差不多，回头我就把颜色这段改一下，vscode的文档实在太难看了，找功能很不方便，我本以为要自己绘制一个，但发现悬浮窗对html的支持又很弱。

#7

mark!

#8

我觉得快闪编辑器就很不错啊，一个快闪编辑器，一个快闪标签Tab标签王，一直在用

#9

用过一段时间，还是不行，就一个最基础的 tsconfig 都不支持，例如 tsconfig 中的定义的 d.ts 文件路径都不能读取

#10

用 Rider/WebStorm 写 cocos 也能达到这个效果

#11

WebStorm不知道，但Rider + cocos是真没这个体验…它都不会同步meta，而且拿这个写js/ts又太重了，内存占用比vscode大几倍

#12

内存占用改成 256 MB 就可以了

#13

但它并不适配Cocos啊…

#14

真不错
顺带问问，在Unity开发上。Rider 真的比Visual Studio（非Code）好用吗？ 好像听说了好几个人说好，啥时候去试试看。不知道有哪些细节比较方便的？

#15

只论Unity开发的适配程度，Visual Studio、VS Code、Rider我都用了一段时间，Rider我个人感觉真的远超前两。

下面列一下我现在能想到的Rider做的更好的小细节：

  • 专门适配了Unity的文件目录视图
  • 引擎资源文件在Rider内打开会提示不应手动编辑
  • 代码里给相对耗性能的Unity api加下划线
  • 搜索component引用的时候，会把绑定了此component的预制体/场景列出来，能从Rider直接跳转打开Unity，定位到具体的预制体/场景
  • meta自动同步
  • Color相关api颜色预览
  • Unity Console输出的内容，Rider内也会显示
  • 调试体验也比VS那两好
1赞
#16

反正C#相关的代码，我都是通过rider去写的

#17

3.6.3 可以找到脚本依赖的场景
3.8.3 却无法

Snipaste_2024-08-06_13-39-41
Snipaste_2024-08-06_13-39-413024×1742 728 KB

更正 ：與 Cocos 版本無關，VSCode setting.json 不可以设置隐藏场景档 “**/*.scene”: true

#18

能给我一个可复现的测试工程吗，刚刚我自己在3.8.3简单测试后没能复现

#19

知道原因了，VSCode setting.json 不可以设置隐藏场景档 “**/*.scene”: true
我刚好两个专案不同环境

Snipaste_2024-08-06_13-59-09
Snipaste_2024-08-06_13-59-091930×1090 229 KB

#20

非常强 下载试了一下很好用 佩服开源 完全可以卖钱