prettier-plugin-space-before-function-paren

prettier-plugin-space-before-function-paren

A prettier plugin to add a space before function parentheses for function definitions (but not function calls) in JS and TS. Requires Prettier 3.0.0 or later.

Installation

npm install -D prettier prettier-plugin-space-before-function-paren

Configuration

There are no config options for this plugin. All you need to do is actually include it in your Prettier config:

{
	"plugins": ["prettier-plugin-space-before-function-paren"]
}

[!IMPORTANT] Due to Prettier limitations, to use this plugin with other plugins formatting JS/TS code, install the prettier-plugin-merge plugin and add it to the end of your plugins array. This plugin will be used last and preserve changes made by the previous plugins.

What this plugin changes in JavaScript

Function declarations

function test(a, b) {
	return a + b;
}

becomes:

function test (a, b) {
	return a + b;
}

Async function declarations

async function test(a, b) {
	return a + b;
}

becomes:

async function test (a, b) {
	return a + b;
}

Object methods

const foo = {
	method(a, b) {
		return a + b;
	}
};

becomes:

const foo = {
	method (a, b) {
		return a + b;
	}
};

Async object methods

const foo = {
	async method(a, b) {
		return a + b;
	}
};

becomes:

const foo = {
	async method (a, b) {
		return a + b;
	}
};

Object getters

const foo = {
	get foo() {
		return true;
	}
};

becomes:

const foo = {
	get foo () {
		return true;
	}
};

Object setters

const foo = {
	set foo(value) {
		this._foo = value;
	}
};

becomes:

const foo = {
	set foo (value) {
		this._foo = value;
	}
};

Class constructors

class Foo {
	constructor(a, b) {
		this.a = a;
		this.b = b;
	}
}

becomes:

class Foo {
	constructor (a, b) {
		this.a = a;
		this.b = b;
	}
}

Class methods

class Foo {
	method(a, b) {
		return a + b;
	}
}

becomes:

class Foo {
	method (a, b) {
		return a + b;
	}
}

Async class methods

class Foo {
	async method(a, b) {
		return a + b;
	}
}

becomes:

class Foo {
	async method (a, b) {
		return a + b;
	}
}

Static class methods

class Foo {
	static method(a, b) {
		return a + b;
	}
}

becomes:

class Foo {
	static method (a, b) {
		return a + b;
	}
}

Class getters

class Foo {
	get foo() {
		return true;
	}
}

becomes:

class Foo {
	get foo () {
		return true;
	}
}

Class setters

class Foo {
	set foo(value) {
		this._foo = value;
	}
}

becomes:

class Foo {
	set foo (value) {
		this._foo = value;
	}
}

Generator functions

function* test() {
	yield 1;
}

becomes:

function* test () {
	yield 1;
}

What remains unchanged in JavaScript

Function calls

test(1, 2);

becomes:

test(1, 2);

Arrow functions

const add = (a, b) => a + b;

becomes:

const add = (a, b) => a + b;

Anonymous functions

Prettier already handles this case.

const add = function(a, b) {
	return a + b;
};

becomes:

const add = function (a, b) {
	return a + b;
};

What this plugin changes in TypeScript

Function declarations

function test(a: number, b: number): number {
	return a + b;
}

becomes:

function test (a: number, b: number): number {
	return a + b;
}

Async function declarations

async function test(a: number, b: number): Promise<number> {
	return a + b;
}

becomes:

async function test (a: number, b: number): Promise<number> {
	return a + b;
}

Object methods

const foo = {
	method(a: number, b: number): number {
		return a + b;
	}
};

becomes:

const foo = {
	method (a: number, b: number): number {
		return a + b;
	}
};

Async object methods

const foo = {
	async method(a: number, b: number): Promise<number> {
		return a + b;
	}
};

becomes:

const foo = {
	async method (a: number, b: number): Promise<number> {
		return a + b;
	}
};

Object getters

const foo = {
	get foo(): boolean {
		return true;
	}
};

becomes:

const foo = {
	get foo (): boolean {
		return true;
	}
};

Object setters

const foo = {
	set foo(value: boolean) {
		this._foo = value;
	}
};

becomes:

const foo = {
	set foo (value: boolean) {
		this._foo = value;
	}
};

Class constructors

class Foo {
	constructor(a: number, b: number) {
		this.a = a;
		this.b = b;
	}
}

becomes:

class Foo {
	constructor (a: number, b: number) {
		this.a = a;
		this.b = b;
	}
}

Class methods

class Foo {
	method(a: number, b: number): number {
		return a + b;
	}
}

becomes:

class Foo {
	method (a: number, b: number): number {
		return a + b;
	}
}

Async class methods

class Foo {
	async method(a: number, b: number): Promise<number> {
		return a + b;
	}
}

becomes:

class Foo {
	async method (a: number, b: number): Promise<number> {
		return a + b;
	}
}

Static class methods

class Foo {
	static method(a: number, b: number): number {
		return a + b;
	}
}

becomes:

class Foo {
	static method (a: number, b: number): number {
		return a + b;
	}
}

Class getters

class Foo {
	get foo(): boolean {
		return true;
	}
}

becomes:

class Foo {
	get foo (): boolean {
		return true;
	}
}

Class setters

class Foo {
	set foo(value: boolean) {
		this._foo = value;
	}
}

becomes:

class Foo {
	set foo (value: boolean) {
		this._foo = value;
	}
}

Generator functions

function* test(): Generator<number> {
	yield 1;
}

becomes:

function* test (): Generator<number> {
	yield 1;
}

Interface methods

interface Foo {
	method(a: number, b: number): number;
}

becomes:

interface Foo {
	method (a: number, b: number): number;
}

What remains unchanged in TypeScript

Function calls

test<number>(1, 2);

becomes:

test<number>(1, 2);

Arrow functions

const add = (a: number, b: number): number => a + b;

becomes:

const add = (a: number, b: number): number => a + b;

Anonymous functions

Prettier already handles this case.

const add = function(a: number, b: number): number {
	return a + b;
};

becomes:

const add = function (a: number, b: number): number {
	return a + b;
};

Type aliases

type NumberCallback = (x: number) => number;

becomes:

type NumberCallback = (x: number) => number;

Function types

type Func = { (a: string): number };

becomes:

type Func = { (a: string): number };

Status

Current version is a proof of concept, please try it out and give feedback!

Things not handled yet:

• Function with type parameters (a.k.a. generic functions)