VS Code - space before function parentheses - visual-studio-code

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

In VS Code open File -> Preferences -> Settings
Add to your JSON config:
"javascript.format.insertSpaceBeforeFunctionParenthesis": true
function render () {
// some code here
}
"javascript.format.insertSpaceBeforeFunctionParenthesis": false
function render() {
// some code here
}
Now you can continue using your auto format option "editor.formatOnType": true

Answer 2

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 3

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 4

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.

Answer 5

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 6

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 7

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 8

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 9

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 10

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"