73

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?

10 Answers 10

67
  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
}

  1. Now you can continue using your auto format option "editor.formatOnType": true
1
  • 11
    For typescript, you can use the setting "typescript.format.insertSpaceBeforeFunctionParenthesis": true Feb 26, 2019 at 4:25
64

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.

2
  • 3
    For typescript, you can use the setting "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false
    – niklr
    Feb 3, 2020 at 16:20
  • Thanks, exactly what i am looking for, took a while to realize there are different settings for normal and anonymous functions. Looks like for normal function, this is false by default, but for anonymous, I have to set explicitly in settings.json. Apr 25, 2021 at 14:57
14

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

enter image description here

8

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.

1
  • Thank you for telling about this great setting. This is very useful. Until VS Code's settings don't go against these eslint rules. This isn't a workaround for my issue, the editor still formats my functions when I edit them, then eslint highlights the errors and when I save the file everything is right back to normal. This is really annoying and weird. Dec 15, 2016 at 6:44
6

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
  }
1
  • This is simple, and works. BTW this config might be in package.json too.
    – Eric
    Nov 20, 2020 at 15:36
3

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.

2
  • 1
    In my case was "editor.formatOnSave": true setting enabled. (I was having the issue when I was saving the file).
    – mayo
    Aug 23, 2019 at 15:49
  • this just disables autoformatting, It doesn't fix the formatting to format as exptected
    – Batavia
    Jul 2, 2020 at 17:08
3

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

1
  • Awesome, I didnt know about insertSpaceAfterFunctionKeywordForAnonymousFunctions, it was the one I had to change on typescript since it seemed to overwrite the insertSpaceBeforeFunctionParenthesis Oct 7, 2020 at 18:21
2

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

enter image description here

2

Problem:

My issue was in package.json

My project was using prettier@1.18.2 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 prettier@2.3.2, 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.

0

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"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.