Removes spaces in template literal strings (JS/TS)

[lolmaus]

Please fill-in this template.

• I have a question that is specific to this extension; thus, inappropriate for the main EditorConfig issue tracker.
• I tried running code --disable-extensions and the issue did NOT present itself.

Delete the following condition if it doesn't apply to your case:

Issue

	Visual Studio Code	editorconfig-vscode
Version	1.85.0 2023-12-06	last updated 2021-11-09

Root .editorconfig File

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true


[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2

[*.hbs]
insert_final_newline = false

[*.{diff,md}]
trim_trailing_whitespace = false

Are there any other relevant .editorconfig files in your project? Yes / No

Visual Studio Code Setting	Default	User	Workspace
editor.insertSpaces	true	____	____
editor.tabSize	4	2	_
editor.trimAutoWhitespace	true	____	____
files.autoSave	"off"	"___"	"___"
files.insertFinalNewline	false	_____	_____
files.trimTrailingWhitespace	false	_____	_____

File opened

        expectTranspiled('templates/application.hbs').equalsCode(`          
          import { precompileTemplate } from "@ember/template-compilation";
          import helloWorld_ from "#embroider_compat/components/hello-world";
          import firstTarget_ from "#embroider_compat/components/first-target";
          import secondTarget_ from "#embroider_compat/components/second-target";
          export default precompileTemplate("<helloWorld_ @iAmAComponent={{firstTarget_}} /><helloWorld_ @iAmAComponent={{secondTarget_}} />", {
            moduleName: "my-app/templates/application.hbs",
            scope: () => ({
              helloWorld_,
              firstTarget_,
              secondTarget_,
            }),
          });
        `);

Expected behavior

The white space at the end of the first line is meaningful, i. e. it is part of a template literal string.

Actual behavior

The EditorConfig for VS Code extension removes trailing spaces on the first line on save, polluting the diff and breaking test cases.

[nicomouss]

@lolmaus Same here, I've just hit this issue (vscode 1.102.3, EditorConfig for VS Code 0.17.4) while using inline snapshots in some Vitest test cases. If those snapshots contains meaningful trailing spaces, then the test cases fall appart because vscode unexpectedly removes the trailing spaces whenever the document is saved.

I am sharing below what I have came up with regarding the issue.

Having a project with a .editorconfig file containing a trim_trailing_whitespace = true instruction:

• Interestingly, if using prettier formatter in the project (having a "editor.defaultFormatter": "esbenp.prettier-vscode" entry in the vscode settings), then when formatting the document (Option-Shift-F on Mac), the template literal trailing spaces are not removed. Prettier is ok here, this should be the right behavior indeed.
• The problem only occurs when saving the document (Command-S on Mac): that's when vscode removes the template literal trailing spaces. This happens even if you set "editor.formatOnSave": false, in your vscode settings. And even if you have configured vscode to use prettier to format on document save (see provided settings.json example below). Vscode basically disreguards everything and remove the trailing spaces.

This stuff is already described within prettier documentation: https://prettier.io/docs/configuration#editorconfig

Caveat: Prettier won’t trim trailing whitespace inside template strings, but your editor might.

Anyway if that can be of any help fixing the issue, here is my .editorconfig:

root = true

[*]
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 4

And my local vscode settings (.vscode/settings.json):

{
  ...
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.prettier": "always"
  },
  ...
}

[SunsetTechuila]

This extension uses the VSCode API to trim trailing whitespace when the document is active, so the issue is mostly with VSCode

[SunsetTechuila]

Prettier is ok here

Prettier parses code into an AST, not treating it as plain text, so it can recognize spaces as part of the template literal

[nicomouss]

@SunsetTechuila Thanks for your feedback !

This extension uses the VSCode API to trim trailing whitespace when the document is active, so the issue is mostly with VSCode

Sure. Is this issue been raised on vscode-side somewhere ?

Prettier is ok here

Prettier parses code into an AST, not treating it as plain text, so it can recognize spaces as part of the template literal

It is surely easier for prettier and other AST-designed formatter to deal with those cases. I mean whatever technique each tool uses under the hood to do its job, AST or whatever, end-users don't really care about those internal details. They just expect the tool not to tweak strings anyhow (being literal strings, or template literal strings, or whatever).

It's just an edge case obviously, but very sneaky one when it occurs on a codebase.

[SunsetTechuila]

Is this issue been raised on vscode-side somewhere ?

Probably. I couldn't find any related issues in the VSCode repo

[nicomouss]

After a bit more thinking on this. While I still think vscode should not tweak the content of a string even with trim_trailing_whitespace set to true, I guess a much sturdy solution is just to write a TS/JS codebase that is itself preventing such potential issues.

So in TS/JS, instead of writing code like so (aka a string with multiple lines, each ending with two whitespace characters):

const message = `my  
text  
with  
line  
endings  `;

we might want to prefer this (using a backslash to explicitly indicate the string continuation on the next line. Note that you also have to explicitly indicate the line jump \n character in that case):

const message = `my  \n\
text  \n\
with  \n\
line  \n\
endings  `;

or this:

const message = "my  \n\
text  \n\
with  \n\
line  \n\
endings  ";

That's a bit uglier visually speaking, but the \ is now acting as a safeguard against the code editor potentially trimming trailing whitespaces.

I posted an issue on vitest repo regarding this, suggesting the modification when snapshots are inlined as strings within the codebase.

Hope this helps, for those hitting this issue.

[stefnotch]

I don't see this as being a VSCode bug. trim_trailing_whitespace doesn't specify whether it's aware of the language specific rules or not. In fact, judging from how other editorconfig extensions are implemented, it seems like this rule is very much not language aware https://github.com/editorconfig/editorconfig-vim/blob/13b86c5c691785ffbf2d6508c621dabb08e93df0/plugin/editorconfig.vim#L505

So this is working as intended?

As a more practical suggestion: I think it's easiest to not set the trim_trailing_whitespace and instead use a more classical formatter for Javascript, such as Prettier, Deno fmt or oxfmt.