vscode: show _templ.go files greyed out?

[jwarlander]

It would be nice if the generated *_templ.go files could be greyed out in the tree view in VS Code, either by default or as an option, just to indicate that one probably doesn't want to edit those, and that it's the .templ files that are important.

Perhaps one could even indicate that _templ.go files are stale by some kind of marker, if they have an older timestamp than the corresponding .templ file..

I'm not super familiar with TypeScript, or how VS Code plugins work in general, but I'm guessing something like how files in .gitignore are handled would be applicable:

https://github.com/microsoft/vscode/blob/4a6ebe0ee5b2d13435e42416640b69d1a1004289/extensions/git/src/decorationProvider.ts#L14-L85

[a-h]

Nice idea. Here's some options.

1. Enable file nesting

By adding this to the package.json of the templ VS Code plugin:

  "contributes": {
    "configurationDefaults": {
      "explorer.fileNesting.enabled": true,
      "explorer.fileNesting.patterns": {
        "*.templ": "${capture}_templ.go"
      }
    },

Nesting is enabled, and you see this:

And you can expand it to:

2. Hide _templ.go files by default

Adding this to package.json simply hides the _templ.go files by default:

  "contributes": {
    "configurationDefaults": {
      "files.exclude": {
        "**/*_templ.go": true
      }
    },

Summary

Can either enable nesting, or hide the _templ.go files by default. I'm not sure which one people would prefer.

[indaco]

Why not allow both the options via plugin settings?

Anyhow, my personal preference would be for option 1

[a-h]

Reasonable. It's also possible to enable commands like "showGeneratedFiles". We do this already for "templ.restartServer"`.

3: Grey out the filename in explorer

Updating the activate function in main.ts:

export async function activate(ctx: vscode.ExtensionContext) {
  try {
    ctx.subscriptions.push(
      vscode.commands.registerCommand(
        "templ.restartServer",
        startLanguageClient
      )
    );

    vscode.window.registerFileDecorationProvider(formatGeneratedFilesInExplorer);

    await startLanguageClient();
  } catch (err) {
    const msg = err && (err as Error) ? (err as Error).message : "unknown";
    vscode.window.showErrorMessage(`error initializing templ LSP: ${msg}`);
  }
}

const formatGeneratedFilesInExplorer: vscode.FileDecorationProvider = {
  provideFileDecoration: async (uri) => {
    if (uri.path.endsWith('_templ.go')) {
      return {
        color: new vscode.ThemeColor('gitDecoration.ignoredResourceForeground')
      };
    }
    return undefined;
  }
};

Produces this effect:

Note how the filename is greyed out.

[joerdav]

Nesting seems the most sensible to me, its the default behavior of the goland plugin too.

[jwarlander]

Either nesting or greyed out files would work quite well, I think, and make it clearer what parts to focus on in the explorer! 🎉

Hiding them completely might be confusing.

[ddelpero]

Options 1 and 2 can be set in the vscode Settings without changing anything in the extension.

Edit: option 2 is really great. It makes it much easier to focus on the templ files and not be distracted by the _templ.go files. Ctrl+p also excludes them so searching for file names shows less results too.

[a-h]

We have consensus on enabling file nesting (option 1)?

I don't think we can realistically do option 2 in that list until #726 and #415 are dealt with.

And option 3 is basically just abusing git decorations. 😁

So, time to implement option 1 for now.

[a-h]

Fixed in templ-go/templ-vscode@913c9b8