85

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?

11 Answers 11

73
  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
  • 13
    For typescript, you can use the setting "typescript.format.insertSpaceBeforeFunctionParenthesis": true Commented Feb 26, 2019 at 4:25
68

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
    Commented 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. Commented Apr 25, 2021 at 14:57
16

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

9

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. Commented Dec 15, 2016 at 6:44
7

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
    Commented Nov 20, 2020 at 15:36
4

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 Commented Oct 7, 2020 at 18:21
3

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.

2

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.

3
  • 1
    In my case was "editor.formatOnSave": true setting enabled. (I was having the issue when I was saving the file).
    – mayo
    Commented Aug 23, 2019 at 15:49
  • this just disables autoformatting, It doesn't fix the formatting to format as exptected
    – Batavia
    Commented Jul 2, 2020 at 17:08
  • Can we remove that checkmark from that answer? That's a horrible advice. This only solves his issue because he hasn't set "editor.formatOnSave": true (generally spoken he doesn't use the linter anymore now) Well, uninstalling the linter will solve linter issues ok, I give him that. I also agree that formatOnType is a bit much, if you save here and then the formatOnSave is good enough (at least my practice) Commented Feb 11 at 19:45
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

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"

0

Depending on project settings, it will vary a bit.

e.g. if you have env.es5 set the problem may arise. This is my setup (I use eslint-config-google additionally & TS, just omit TS lines if JS only)

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": ["eslint:recommended", "google"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"]
}

I did not set anything to VSCode settings about formatting rules but I'm using auto format on save, check:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },

  "editor.formatOnPaste": true,
  "editor.formatOnSave": true
}

So instead of proposed ideas like overrriding rules or bypass the whole formatting you simply have to make sure the linter knows what environment it's in and apply those rules.

Prettier isn't the issue here, but if you like to get a .prettierrc config I've just created a helper package here:

https://github.com/artiphishle/prettierrc

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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