Cocos Shader
A readable formatter for Cocos Creator .effect files (YAML + GLSL hybrid).
Takes over the standard Format Document command (Shift+Alt+F / Ctrl+Shift+F) for any .effect file so you can format directly in the editor.
Features
- YAML section preserved verbatim. Cocos Creator accepts any legal YAML indentation, and different
.effect files in the wild use different styles (2-space vs 4-space, mixed sub-indent). A normalizer here would corrupt files, so this extension never touches YAML.
- GLSL section normalized — the source is scanned to detect the current indent step (2 or 4 spaces), then rescaled to your configured target.
- Consistent operator spacing that reads well and never breaks the code:
- Binary
+ - * / == != >= <= > < && || spaced on both sides
- Ternary
? spaced on both sides
- Scientific notation
1e-6 / 2.5E+10 left untouched
- Unary
- 0.5 / + 3 (following , ( [ = etc.) tightened to -0.5 / +3
i ++ / j ++ tightened to i++)return / )discard / )col = x split with a space after )}else split to } else#define NAME VALUE collapses excess spaces
- Output is UTF-8 without BOM with LF line endings.
Usage
- Open any
.effect file.
- Run Format Document (
Shift+Alt+F on Windows/Linux, Shift+Option+F on macOS). Ctrl+Shift+F in Cocos Creator's built-in editor triggers the same command.
- The formatter rewrites GLSL sections in place; YAML sections stay byte-identical.
Configuration
| Setting |
Type |
Default |
Description |
cocosShader.indentSize |
2 | 4 |
2 |
Number of spaces per GLSL indentation level. YAML section is always preserved as-is. |
cocosShader.formatOnSave |
boolean |
false |
Automatically format .effect files on save (Ctrl+S). Independent of the global editor.formatOnSave setting — this flag only affects .effect files. |
Manual formatting via Format Document (Ctrl+Shift+F / Shift+Alt+F) is always on and cannot be disabled — it is the plugin's core function. formatOnSave above is an opt-in for the save-time workflow.
Example — 4-space GLSL indent, auto-format on save:
{
"cocosShader.indentSize": 4,
"cocosShader.formatOnSave": true
}
Optional — pin this extension as the default formatter for .effect (relevant if you have multiple formatters installed for the same language):
{
"[cocos-effect]": {
"editor.defaultFormatter": "CometArch.cocos-shader"
}
}
VSCode already ships a global editor.formatOnSave. Both routes work; pick one:
- Plugin-scoped (recommended): set
cocosShader.formatOnSave: true. Only touches .effect files, regardless of your global editor.formatOnSave setting.
- VSCode-native language scope: set
"[cocos-effect]": { "editor.formatOnSave": true } in settings.json. Uses VSCode's built-in save-format pipeline.
If both are set, the plugin defers to the built-in one to avoid formatting twice.
.effect is a YAML + GLSL hybrid. No mainstream formatter understands both languages inside the same file and the CCEffect / CCProgram delimiters, so a custom pass is the only clean way. This extension is a lightweight, deterministic string-rewriter with the rules tuned to match hand-written Cocos shader style.
License
MIT — see LICENSE.
