Visual Studio Code and Trimming Whitespace

Have you noticed that eslint doesn’t like trailing whitespace. It has a rule for it: the no-trailing-spaces rule.

Normally, this wouldn’t be a problem. I’m normally using Visual Studio 2015. Visual Studio takes care of it. Firstly, when you are typing JavaScript, the editor properly indents and doesn’t give you blank lines with spaces on it. Secondly, I have a plug-in called the Trailing Spaces Visualizer – it’s an extension that highlights trailing spaces.

This is all well and good, but I’m using Visual Studio Code now since it actually supports ECMAScript 2015. When you hit enter twice (to create a blank line), the blank line has spaces up to the indent level of the prior line and eslint complains of trailing spaces.

Fortunately, there are a good couple of options here. Option 1 is to trim the lines. Press Ctrl + Shift + X in the editor and the current buffer will be trimmed. You can rebind this to something else by editing your keybindings.json to something like this:

[{ 
  "key": "shift+f12",
  "command": "editor.action.trimTrailingWhitespace",
  "when": "editorTextFocus"
}]

You can open up your personal keybindings.json using File -> Preferences -> Keyboard Shortcuts.

Option 2 is to automatically trim the white space on save. Do this by editing your user preferences (under File -> Preferences -> User Settings). Add the following to the file:

{
  "files.trimTrailingWhitespace": true
}

Your final option is to disable the rule in question. You can do this on a per-file basis or via the .eslintrc file in your top level directory, like this:

{
  "env": {
    "node": true,
    "es6": true
  },
  "ecmaFeatures": {
    "modules": true
  },
  "rules": {
    "no-trailing-spaces": 0,
    "global-strict": 0,
    "strict": [ 2, "global" ]
  }
}

If you are coding in ECMAScript 2015, don’t forget to also configure VS Code to recognize the new language constructs. You can do this by creating a jsconfig.json file in your project root. It should have the following contents:

{
	"compilerOptions": {
		"target": "ES6",
		"module": "commonjs"
	}
}

Once you have created the file and saved it, restart VS Code and the new language constructs will be recognized.