vscode: show _templ.go files greyed out?

[jwarlander]

vscode: show _templ.go files greyed out?

[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

[joerdav]

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

[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.

[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.