DEV Community

Zell Liew πŸ€—
Zell Liew πŸ€—

Posted on • Originally published at

Using Standard with VSCode

I use Visual Studio Code as my text editor. When I write JavaScript, I follow JavaScript Standard Style.

There's an easy way to integrate Standard in VS Codeβ€”with the vscode-standardjs plugin. I made a video for this some time ago if you're interested in setting it up.

But, if you follow the instructions in the video (or on vscode-standardjs's readme file), you'll come to notice there's one small detail that needs to be ironed out.

Try writing a function the old way, and save it repeatedly. VS code will toggle between having and not having a space before the left-parenthesis of the function.

VS code toggles between having and not having a space before '('.

You get the same problem when you write methods with the ES6 method shorthands:

Same problem happens when you create methods with ES6 method shorthands.

There's a quick way to fix this issue.

What you need to do is set javascript.format.enable to false. This disables VS Code's default Javascript formatter (and lets vscode-standandjs does the formatting work).

So the minimum configuration you need to get Standard and VS Code to work together is:

  // Prevents VS Code from formatting JavaScript with the default linter
  "javascript.format.enable": false,

  // Prevents VS Code linting JavaScript with the default linter
  "javascript.validate.enable": false,

  // Lints with Standard JS
  "standard.enable": true,

  // Format files with Standard whenever you save the file
  "standard.autoFixOnSave": true,

  // Files to validate with Standard JS
  "standard.validate": [
Enter fullscreen mode Exit fullscreen mode

Thanks for reading. This article was originally posted on my blog. Sign up for my newsletter if you want more articles to help you become a better frontend developer.

Top comments (4)

naquiuddin profile image
Khaja Naquiuddin

This is good. I can use this for projects I do.

However for big projects, I use combination of Eslint and Prettier. Prettier automatically formats the code.

Thanks for sharing.

elanandkumar profile image
Anand Kumar

I do like auto format on save but with eslint and prettier configured.
This saves lot of time and make code look more clean across team.

yougotwill profile image
Will G

@Zell! Nice article. One question, what font are you using in those gifs?

zellwk profile image
Zell Liew πŸ€—

Dank Mono: