使用 VS Code 写 Shaderlab

发表于 更新于 分类于 阅读次数：

Unity3D 开发中，我们一般使用 VS 写代码，但是对于写 Shader，VS 还不如自带的 MonoDeveloper 强大，而且目前我还没有发现对 Shaderlab支持比较好的 VS 扩展插件。自从试用过 VS Code 后我把电脑上的 Sublime Text 给卸载了，换成了 VS Code 一直用到现在，而且越用越觉得强大，毕竟有微软这个爸爸，发展势头还是很猛的。言归正传，这篇博客打算记录一下我使用 VS Code 写 Shaderlab 的一些经验。

安装插件

首先得安装 VS Code，这个是肯定的，没啥好说的。安装好 VS Code 后，在插件页搜索 ShaderlabVSCodeFree 扩展，然后安装重启。装好插件后，使用 VS Code 打开 Shaderlab 文件，就可以愉快的写 Shader 了。该插件支持.shader、.cginc、.glslinc、.compute四种格式的 Shaderlab 文件，同时，还支持语法高亮、基础代码补全、签名帮助 三大功能，基础代码补全这个功能用了一下感觉非常赞，要是再能支持自动格式化就完美了，不过对于免费版来说，已经非常良心了。该插件还有个收费的 ShaderlabVSCode Beta 版，支持的功能更多，也支持代码格式化，插件作者是中国的 Unity3D 开发者，所以，如果大家手头富裕的话，请支持一下作者，去AssetStore购买 ShaderlabVSCode Beta 版。

添加代码片段

为了写代码的方便，常用的 Shaderlab 代码块可以通过 File -> Preferences -> User Snippets 选项，然后找到 Shaderlab 语言，添加进 Json 配置文件，我放两个常用的代码片段：

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
{
/*
	// Place your snippets for Shaderlab here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
*/

	"Unity3D Shaderlab": {
		"prefix": "shaderlab",
		"body": [
			"Shader \"${1:New Shader}\"",
			"{",
				"\tProperties",
				"\t{",
					"\t\t_MainTex (\"Texture\", 2D) = \"white\" {}",
				"\t}",
				"\tSubShader",
				"\t{",
					"\t\tTags { \"RenderType\"=\"${2:Opaque}\" }\n",
					"\t\tPass",
					"\t\t{",
					"\t\t\t$3",	
					"\t\t}",
				"\t}",
			"}"
		],
		"description": "Unity3D Shaderlab"
	},

	"CGPROGRAM": {
		"prefix": "cg",
		"body": [
			"CGPROGRAM",
			"#pragma vertex vert",
			"#pragma fragment frag\n",
			"#include \"UnityCG.cginc\"\n",
			"struct appdata",
			"{",
				"\tfloat4 vertex : POSITION;",
				"\tfloat2 uv : TEXCOORD0;",
			"};\n",
			"struct v2f",
			"{",
				"\tfloat2 uv : TEXCOORD0;",
				"\tfloat4 vertex : SV_POSITION;",
			"};\n",
			"sampler2D _MainTex;\n",
			"v2f vert(appdata v)",
			"{",
				"\tv2f o;",
				"\to.vertex = UnityObjectToClipPos(v.vertex);",
				"\to.uv = TRANSFORM_TEX(v.uv, _MainTex);\n",
			
				"\treturn o;",
			"}\n",
			
			"fixed4 frag(v2f i) : SV_Target",
			"{",
				"\t// sample the texture",
				"\tfixed4 col = tex2D(_MainTex, i.uv);",
				"\treturn col;",
			"}",
			"ENDCG"
		],
		"description": "Unity3D Shaderlab CGPROGRAM"
	}
}

保存后，可以新建一个扩展名为 .shader 的文本文件，然后输入shaderlab后回车就会自动生成一个标准的 Shaderlab 结构代码块。输入cg后回车就会生成一段 CGPROGRAM 代码块，赶快试试吧！
刚开始使用VS Code 写 Shader 先放上两个代码片段，后期再增加其他代码片段。