how to use separate vert and frag shader sources?

[cyrfer]

How can I use separate shader sources?

I see the shader examples use a single source file and look like this:

// shader.glsl
...common code...
#if defined(VERTEX)
...vertex shader...
#else // FRAGMENT
...fragment shader...
#endif

I do not know how to make Threejs add the VERTEX preprocessor definition for ONLY the vertex shader, so I must separate the shader sources into files like:

1. shader.glsl.vert
2. shader.glsl.frag

When I separate my shader sources, I do not know how to preview their result with this vscode extension.