Code format, style, and TypeScript issue

[JosefBredereck]

Link to reproduction

https://github.com/payloadcms/payload

To Reproduce

1. Checkout the project with your desired IDE
2. Open any file
3. Hit format and see what happens!

Describe the Bug

While I was working on the code to contribute, I stumbled upon, an issue.

My IDE automatically reformats files when I save so that I do not have to rely on maintaining spaces and line breaks by myself.
Therefore, I looked into the codebase which settings you follow, but I couldn't grasp which format is preferred.

The contribution guidelines do not state any info regarding this topic.

Types:

They come in three different formats, like the ones below.

payload/src/types/index.ts

Lines 26 to 30 in 51c2ab1

	export type Where = {
	[key: string]: WhereField | Where[];
	or?: Where[];
	and?: Where[];
	};

payload/src/auth/operations/login.ts

Lines 17 to 21 in 51c2ab1

	export type Result = {
	user?: User,
	token?: string,
	exp?: number,
	}

payload/src/uploads/types.ts

Lines 91 to 96 in 51c2ab1

	export type File = {
	data: Buffer
	mimetype: string
	name: string
	size: number
	}

Occasionally, they even come in all three versions in the same file https://github.com/payloadcms/payload/blob/master/src/uploads/types.ts

Function definitions

Functions can be written as function declaration and as arrow function. I have seen both possibilities used to my feeling random.

Is there any preferred style, or can I use what I think fits the purpose?

Exports and imports

When I want to add new functionality and want to expose it to the other parts of the code base, do you prefer :

Default exports/imports

// export
export default async function resizeAndSave(...)

// import 
import whateverYouLikeFn from './imageResizer';

Named exports/imports

// export
export async function resizeAndSave(...)

// import 
import { resizeAndSave } from './imageResizer';

Code Format

There are those two rules defined for the entire codebase.

indent_style = space
indent_size = 2

What about the other possible formats?

• Do I use single quotes?
• Do I add a semicolon at the end?
• Do I add trailing commas?
• What about the print width?

Typescript code checks

Furthermore, worth noting. If you have a type configured and there are properties that can be either a value or null/undefined typescript will not notice if you are using something wrong.

Since you have "strict": false in the compiler options, the types will always be converted to the non nullish types. And this is by far the biggest issue in the whole codebase because TypeScript will not tell you if you need to use optional chaining or if a type guard is missing!

[jmikrut]

Hey @JosefBredereck — these are all good things to note.

We are working on adopting the exact suggested settings from the ESLint and Prettier authors, and there is a PR in the works to do so. At that time, we will be solidifying our formatting style guide, and I'll make sure that the team addresses these items in our contributing guide.

I will convert this to a discussion because optimizing our formatting / style guide options is more of a feature request than an issue, but as a heads-up - - this is very important and I do see the value in clearly documenting all of this very soon. @AlessioGr is working on that as we speak.

Good to have you in our community. The team and I are impressed with the work you're already contributing and we hope to continue to see you around! You are very clearly a talented engineer.

[SimYunSup]

Bump for ESLint breaking changes.

The ESLint team announced with version 8.53.0 that they deprecated configuration via .eslintrc. Therefore, they announced plans to eslint.config.js the default configuration method starting from version 9.0, and to remove support for .eslintrc in version 10.0.

Therefore, I believe it would be beneficial for eslint-config-payload to support eslint.config.js configuration before adding any additional ESLint configuration.

So, payload team want to migrate .eslintrc to eslint.config.js, I want to create PR for migration to eslint.config.js.