Migrate from eslint formatting to Prettier #3252

Beerosagos · 2025-03-25T16:59:51Z

Here is a recap of the rules changes in the eslint -> prettier migration

📘 Full ESLint Formatting Rules vs. Prettier

ESLint Rule	Prettier Equivalent	Status / Notes
`brace-style: ['error', '1tbs']`	❌ No config option	Prettier uses 1TBS style internally but not configurable
`comma-spacing: ['error', { before: false, after: true }]`	🛠 Handled automatically	Prettier always formats commas correctly, no config needed
`indent: ['error', 2]`	`tabWidth: 2`	✅ Matched in `.prettierrc`
`jsx-quotes: ['error', 'prefer-double']`	`jsxSingleQuote: false`	✅ Matched in `.prettierrc`
`keyword-spacing: 'error'`	🛠 Handled automatically	Prettier always adds correct space around `if`, `else`, etc.
`no-multi-spaces: 'error'`	🛠 Handled automatically	Prettier removes extra spaces
`no-trailing-spaces: 'error'`	🛠 Handled automatically	Prettier trims trailing spaces
`object-curly-spacing: ['error', 'always']`	`bracketSpacing: true`	✅ Matched in `.prettierrc`
`quotes: ['error', 'single']`	`singleQuote: true`	✅ Matched in `.prettierrc`
`semi: 'error'`	`semi: true`	✅ Matched in `.prettierrc`
`space-before-blocks: ['error', 'always']`	🛠 Handled automatically	Prettier enforces a space before `{`
`space-in-parens: ['error', 'never']`	🛠 Handled automatically	Prettier never adds space inside `()`
`no-extra-semi: 'error'`	🛠 Handled automatically	Prettier removes unnecessary semicolons
`@typescript-eslint/type-annotation-spacing: 'error'`	🛠 Handled automatically	Prettier formats TypeScript annotations correctly
`arrow-spacing: 'error'`	`arrowParens: 'always'`	✅ Closest match; Prettier also handles spacing around `=>`
`space-infix-ops: 'error'`	🛠 Handled automatically	Prettier always spaces around `=`, `+`, etc.
`react/jsx-equals-spacing: ['error', 'never']`	🛠 Handled automatically	Prettier always removes space around `=` in JSX props
`react/jsx-wrap-multilines: {...}`	🛠 Handled automatically	Prettier wraps multiline JSX with `()` by default, not configurable

Before asking for reviews, here is a check list of the most common things you might need to consider:

updating the Changelog
writing unit tests
checking if your changes affect other coins or tokens in unintended ways
testing on multiple environments (Qt, Android, ...)
having an AI review your changes

Eslint formatting rules are deprecated (see https://eslint.org/blog/2023/10/deprecating-formatting-rules/ ). This commit configures the prettier plugin and moves the formatting rules in the new .prettierrc file.

`prettier --write "**/*.{ts,tsx,js,jsx}"` launched from frontend/web/src/ Please note that `hooks/api.ts` has been slightly modified, to keep the `react-hooks/exhaustive-deps` lint disable active.

thisconnect

I haven't checked everything. But I would like to have a look at https://eslint.style/ see comments.

If we go with prettier this PR should add instructions in the README and a task in npm and Makefile

thisconnect · 2025-03-26T06:34:07Z

frontends/web/package.json

    "@walletconnect/jsonrpc-types": "1.0.4",
    "@walletconnect/types": "2.17.2",
-    "@reown/walletkit": "1.2.0",
    "flag-icons": "7.2.3",
    "i18next": "23.11.5",
    "lightweight-charts": "4.1.4",


please add an npm task below under "scripts": { something like:

"format": "prettier --write '**/*.{ts,tsx,js,jsx}'",

thisconnect · 2025-03-26T06:57:21Z

frontends/web/src/utils/qwebchannel.js

@@ -2,447 +2,469 @@
 // Copyright (C) 2016 Klarälvdalens Datakonsult AB, a KDAB Group company, [email protected], author Milian Wolff <[email protected]>
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only



please exclude this file

thisconnect · 2025-03-26T07:08:04Z

frontends/web/src/api/account.ts

+    };
+
+export const getAccountsTotalBalance =
+  (): Promise<TAccountsTotalBalanceResponse> => {


Prettier has some very aggressive newline changes, I dislike having newline after =.

If we slightly increase "printWidth": 90 it would keep this, but change in many other places where we want newlines i.e. function arguments.

We should go with printWidth 100 imho. It's what I use as my default width also for backend code. The default 80 is like from the 80s 😅

I tried 90, 100, 120, but IMO gets even worse with any of those.

I'd like to try eslint.style soon™

thisconnect · 2025-03-26T07:12:22Z

frontends/web/src/api/transactions.ts

-      accountName: string,
-    }
-  ) => void,
+  cb: (meta: { count: number; accountName: string }) => void,


bit: This is a case where I find the aggressive newlines wrapping less readable, but changes overall seem to be an improvement

thisconnect · 2025-03-26T07:35:25Z

frontends/web/src/api/account.ts

-  displayName: string
-}
+  currency: Fiat;
+  displayName: string;


thisconnect · 2025-03-26T07:46:08Z

frontends/web/src/api/coins.ts

-);
+export const subscribeCoinHeaders =
+  (coinCode: CoinCode) => (cb: TSubscriptionCallback<TStatus>) =>
+    subscribeEndpoint(`coins/${coinCode}/headers/status`, cb);


As mentioned before I dislike newlines after = but also after =>

maybe there is still a way in the future to improve or trick prettier by using = ( /* fn goes here */);

frontends/web/src/api/subscribe.ts

thisconnect · 2025-03-26T07:51:32Z

frontends/web/src/app.tsx

@@ -140,8 +145,8 @@ export const App = () => {

    // If a device is newly connected, we route to the settings.
    if (
-      newDeviceIDList.length > 0
-      && newDeviceIDList[0] !== oldDeviceIDList[0]
+      newDeviceIDList.length > 0 &&


I really dislike having the condition at the end.

geebeetee suggested operator-linebreak rule to fix, but seems that this is deprecated
https://eslint.org/docs/latest/rules/operator-linebreak

interestingly they suggest using @stylistic/eslint-plugin-js.

This rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js.

For what it's worth, afaik it's much more common to have the operators at the end of the line from the code I am seeing across many languages.

Imho not worth changing away from the prettier default here.

This is just my personal preference and helps me reading the code. I didn't say it's more common, but it is what we mostly use in our codebase.

thisconnect · 2025-03-26T07:52:17Z

frontends/web/src/app.tsx

+                );
+              }
+              return null;
+            })}


thisconnect · 2025-03-26T07:58:09Z

frontends/web/src/components/amount/conversion-amount.tsx

-            {' '}
-            {conversionUnit}
-          </span>
+          <span className={styles.txUnit}> {conversionUnit}</span>


Whenever we add {' '} there is a reason, I dislike that it just drops.

I think they are equivalent, except for if conversionUnit has leading spaces, which would then collapse to one. I guess this is not the case here.

Or can you think of differences between a regular space and {' '}?

Deepseek:

**Visual Effect:** - Literal space becomes a normal space - `{' '}` becomes ` ` (HTML entity for space) - Both will render a single space before the `conversionUnit` value - Visual difference only occurs in edge cases: - If parent element has `white-space: pre/pre-line` - If using CSS `::before`/`::after` pseudo-elements - If the conversionUnit value contains leading/trailing spaces

so I guess they are not always the same if the above is true. But then it's strange that prettier would default to this transformation if it is not equivalent 🤔

Maybe we can ignore locally (// prettier-ignore ?) for when it actually matters?

space in JSX and {' '} should behave the same.

When I read the code I want to see {' '} so I know it was explicitly added.

Beerosagos changed the title ~~Prettier~~ Migrate from eslint formatting to Prettier Mar 25, 2025

Beerosagos added 2 commits March 25, 2025 18:11

frontend/formatting: move eslint formatting rules to prettier

c997943

Eslint formatting rules are deprecated (see https://eslint.org/blog/2023/10/deprecating-formatting-rules/ ). This commit configures the prettier plugin and moves the formatting rules in the new .prettierrc file.

frontend/formatting: format files with prettier

5a48226

`prettier --write "**/*.{ts,tsx,js,jsx}"` launched from frontend/web/src/ Please note that `hooks/api.ts` has been slightly modified, to keep the `react-hooks/exhaustive-deps` lint disable active.

Beerosagos force-pushed the prettier branch from 77760f5 to 5a48226 Compare March 25, 2025 17:16

thisconnect reviewed Mar 26, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate from eslint formatting to Prettier #3252

Migrate from eslint formatting to Prettier #3252

Beerosagos commented Mar 25, 2025 •

edited

Loading

thisconnect left a comment

thisconnect Mar 26, 2025

thisconnect Mar 26, 2025

thisconnect Mar 26, 2025

benma Mar 26, 2025

thisconnect Mar 26, 2025 •

edited

Loading

thisconnect Mar 26, 2025

thisconnect Mar 26, 2025

thisconnect Mar 26, 2025

thisconnect Mar 26, 2025

benma Mar 26, 2025

thisconnect Mar 26, 2025

thisconnect Mar 26, 2025

thisconnect Mar 26, 2025

benma Mar 26, 2025

benma Mar 26, 2025

thisconnect Mar 26, 2025 •

edited

Loading

		@@ -2,447 +2,469 @@
		// Copyright (C) 2016 Klarälvdalens Datakonsult AB, a KDAB Group company, [email protected], author Milian Wolff <[email protected]>
		// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only

Migrate from eslint formatting to Prettier #3252

Are you sure you want to change the base?

Migrate from eslint formatting to Prettier #3252

Conversation

Beerosagos commented Mar 25, 2025 • edited Loading

📘 Full ESLint Formatting Rules vs. Prettier

thisconnect left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thisconnect Mar 26, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thisconnect Mar 26, 2025 • edited Loading

Choose a reason for hiding this comment

Beerosagos commented Mar 25, 2025 •

edited

Loading

thisconnect Mar 26, 2025 •

edited

Loading

thisconnect Mar 26, 2025 •

edited

Loading