DEV Community

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

Posted on • Originally published at zellwk.com

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": [
    "javascript",
    "javascriptreact"
  ]
}

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.

Discussion (4)

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

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

Collapse
yougotwill profile image
William Grant

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

Collapse
zellwk profile image
Zell Liew πŸ€— Author

Dank Mono: dank.sh