Style: Switch from ESLint Prettier formatting to Stylistic rules (1. part)

[literat]

Description

Migration from Prettier formatting of JS files to Stylistic rules

What has been done:

• prepared configuration with stylistic rules (will be changing in the future)
• prepared configuration with prettier rules
• root eslint configuration switched from prettier to stylistic rules
• individual packages still using prettier styling

What is planned:

• in the future, we can now migrate packages one by one, by switching them from prettier to style and altering the styling or rules
• the stylistic and prettier rules can be part of the Code Quality Tools in the future

Why this change:

• we have repeated problems with the max length of prettier and the opinionated style of the code
• this is also a prerequisite for ESLint v9 migration

What to discuss:

• are names like style.js and prettier.js ok, or would it be more convenient to use stylistic.js and prettier.js; both solve only code style
• stylistic rules are based on https://github.com/strvcom/code-quality-tools/blob/master/packages/eslint-config-base/style.mjs and can be discussed and altered; will be part of the discussion with every package migrated to these rules

Additional context

• https://www.npmjs.com/package/@stylistic/eslint-plugin/
• https://antfu.me/posts/why-not-prettier

I am still considering Prettier as a good tool for formatting, but it looks like the stylistic rules are providing a more precise type of format configuration, and they let us format the code as we wish when we are under the max length limit.

Issue reference

[netlify]

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	5d89b88
🔍 Latest deploy log	https://app.netlify.com/projects/spirit-design-system-storybook/deploys/6938230e6bf4d000085f4217

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	5d89b88
🔍 Latest deploy log	https://app.netlify.com/projects/spirit-design-system/deploys/6938230e4b535b000836207f
😎 Deploy Preview	https://deploy-preview-2153--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 90 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull Request Overview

This PR migrates from ESLint Prettier formatting to Stylistic rules as a first step in the transition from Prettier to a more configurable code formatting solution. The change introduces a new @stylistic/eslint-plugin configuration while maintaining backward compatibility by keeping both stylistic and prettier configurations available.

Key Changes:

• Created new stylistic and prettier rule configurations in eslint-config-spirit
• Updated root ESLint configuration to use stylistic rules instead of prettier
• Individual packages still use prettier rules during this transition phase

Reviewed Changes

Copilot reviewed 38 out of 40 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
scripts/lts-schedule/lib/index.js	Applied stylistic formatting fixes including improved variable naming and better line breaks
Various package.json files	Added eslint-config-spirit dependency to enable new linting configurations
Various .eslintrc.js files	Updated to extend prettier config from eslint-config-spirit/prettier
configs/eslint-config-spirit/style.js	New stylistic rules configuration file
configs/eslint-config-spirit/prettier.js	New prettier rules configuration file
.eslintrc.js	Updated root config to use stylistic rules
.prettierignore	Expanded to ignore additional JS/TS file types

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[coveralls]

coverage: 96.923%. remained the same
when pulling 8478a97 on style/from-prettier-to-stylistic
into a543965 on main.

[adamkudrna]

If my assumption about moving this config and README to CQT is correct, maybe we could show here the main differences between the two tools? From what I can see in this PR:

• dangling commas,
• multi-line comments starting with /*!,
• line length limit for single-line comments,
• single-/multi-character variable names.

[literat]

I think I can mention here a few examples, but for the full list of the configuration, you must see the style.js rules. And rewriting them all will be a lot of work.

[adamkudrna]

No no, of course not everything. Just the major differences so the users can decide better.