VS Code - space before function parentheses

Is there a way to disable removing space before parentheses when editing a function in VS Code?

Lets say I have a function

function render () {
    // some code here
}

When I start editing it, VS Code removes the space before parentheses and transforms this code to:

function render() {
    // some code here
}

Is there a way to disable this behavior?

1. In VS Code open File -> Preferences -> Settings
2. Add to your JSON config:

"javascript.format.insertSpaceBeforeFunctionParenthesis": true

function render () {
    // some code here
}

"javascript.format.insertSpaceBeforeFunctionParenthesis": false

function render() {
    // some code here
}

3. Now you can continue using your auto format option "editor.formatOnType": true

I had opposite problem with anonymous functions. We use prettier extension. Auto-correct inserts a space before parenthesis. And then prettier complains about it.

var anonfunc = function() {
    // Expected syntax. 
}

var autocorrected = function () {
    // Auto-correct inserts a space
}

There is similar code option, which solves my problem:

"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false

By default it is true. Took me some time, until I was tired correcting auto-correct.

I had a similar issue with VSCode removing spaces after a constructor and ESLint complaining because there wasn't a space.

• Go to File -> Preferences -> Settings
• Search for constructor
• Add a check next to JavaScript › Format: Insert Space After Constructor

I'm on the VSCode team. As of VSCode 1.8, this formatting option is not supported out of the box, but we are tracking the feature: https://github.com/Microsoft/vscode/issues/15386, https://github.com/Microsoft/TypeScript/issues/12234

As a workaround, try the following:

• Install the eslint extension: ext install eslint

• Add "eslint.autoFixOnSave": true to your workspace or user settings

• In the root of your project, create an .eslintrc.json with:

    {
        ...
        "rules": {
            ...
            "space-before-function-paren": "error"
        }
    }
  

  The eslint extension can create a starter .eslintrc.json for you with the create .eslintrc.json command.

This will automatically format functions to have a space after them when you save the file.

In my case, I wanted the normal indenting/formatting behavior of VS Code, so I disabled the eslint warning:

In the .eslintrc.js file I typed inside the rules:

 'rules': {
    ....

    //disable rule of space before function parentheses 
    "space-before-function-paren": 0
  }

Also adding to Yan's answer, you can just hit the Command + , on Mac or CTRL + , on your keyboard then, add the following lines in your settings.json

"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false

The second entry also disables the space for anonymous functions, on format e.g

var anon = function() {
   // do something..
}

I found out I had "editor.formatOnType": true setting enabled. This is what makes the editor auto-format the code when you type. Disabling it helped to resolve the issue.

Go to Preferences, and search for insertSpaceBeforeFunctionParenthesis in the search bar at top.

Now, select the checkbox which says: JavaScript: Format: Insert Space Before Function Parenthesis

In my case I had to explicitly enable ESLint on my Vue.js project even though I had a .eslintrc.js file that should have been implementing:

extends: ['plugin:vue/exxential', '@vue/standard']

To do that I pressed CTRL+Shift+P and searched for "ESLint: Enable ESLint"

Problem:

My issue was in package.json

My project was using [email protected] which did not have the space after the function keyword or arrowParens: 'always' as default configuration.

One of the maintainers upgraded prettier to version 2 [email protected], which had these two as default config. These were among the breaking changes in prettier version 2.

https://prettier.io/blog/2020/03/21/2.0.0.html#always-add-a-space-after-the-function-keyword-3903

https://prettier.io/blog/2020/03/21/2.0.0.html#change-default-value-for-arrowparens-to-always-7430

Solution:

npm ci - just installed the npm packages again.

npm install will also work. npm ci will install exact versions from package-lock.json, while npm install would install latest versions with minor changes.