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

Computed object methods

const foo = {
	[methodName]() {
		return 42;
	}
};

becomes:

const foo = {
	[methodName] () {
		return 42;
	}
};

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

Private 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;
	}
}

Private async class methods

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

becomes:

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

Computed class methods

class Foo {
	[methodName]() {
		return 42;
	}
}

becomes:

class Foo {
	[methodName] () {
		return 42;
	}
}

Static class methods

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

becomes:

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

Private 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;
	}
}

Private 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;
	}
}

Private 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;
}

Named exported functions

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

becomes:

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

Default exported functions

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

becomes:

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

Async exported functions

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

becomes:

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

Generator exported functions

export function* test() {
	yield 1;
}

becomes:

export 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 function expressions

Prettier already handles this case.

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

becomes:

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

Anonymous function declarations

Prettier already handles this case.

export default function(a, b) {
	return a + b;
}

becomes:

export default 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;
	}
}

Abstract class methods

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

becomes:

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

Private class methods (access modifier)

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

becomes:

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

Private 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;
	}
}

Protected class methods

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

becomes:

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

Public class methods

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

becomes:

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

Optional 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;
	}
}

Class getters

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

becomes:

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

Private 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;
	}
}

Private class setters

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

becomes:

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

Computed class methods

class Foo {
	[methodName](): void {
		return;
	}
}

becomes:

class Foo {
	[methodName] (): void {
		return;
	}
}

Class methods with type parameters

class Foo {
	method<T>(a: T): T {
		return a;
	}
}

becomes:

class Foo {
	method<T> (a: T): T {
		return a;
	}
}

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

Function with type parameters

function foo<T>(arg: T): T {
	return arg;
}

becomes:

function foo<T> (arg: T): T {
	return arg;
}

Named exported functions

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

becomes:

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

Default exported functions

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

becomes:

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

Async exported functions

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

becomes:

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

Generator exported functions

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

becomes:

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

Exported function in namespace

declare namespace Foo {
	export function test(a: number, b: number): number;
}

becomes:

declare namespace Foo {
	export function test (a: number, b: number): number;
}

Function type aliases

type MethodType = {
	method(): void;
};

becomes:

type MethodType = {
	method (): void;
};

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 function expressions

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

Anonymous function declarations

Prettier already handles this case.

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

becomes:

export default 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 };

Object literal

let a = { value: null, prev: null, next: null as never };

becomes:

let a = { value: null, prev: null, next: null as never };

Status

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

Things not handled yet:

• Computed object method names in TS
• Decorated class methods in TS