VS Code - space before function parentheses

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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.

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

Answer 5

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

Answer 6

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

Answer 7

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"

Answer 8

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.

Answer 9

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
  }

Answer 10

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.

Answer 11

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.