add prettier for formatting and remove prettier for linting

[belgattitude]

add prettier for formatting and remove prettier for linting

[bryce-larson]

Cheers, thanks for taking the time to explain the reasoning.

[belgattitude]

Hey @bryce-larson nice that you point this out.

In my experience what makes eslint and prettier fast is actually starting from a warm (or as warm as possible) cache.

But you're right, separating prettier and eslint rather than using the eslint-plugin-prettier and cleanup incompatible rules with eslint-prettier-config will be globally faster.

In that case we'll have to run 2 separate steps (one for prettier, one for eslint) and handle proper caching for 2 tools instead of one... and that's a bit painful

As a "contrived" example:

{
  "scripts": {
    "prettier-check": "run --top-level prettier --check --cache --cache-location=\"../../.cache/prettier/exception.prettiercache\" --config ../../.prettierrc.js --ignore-path ../../.prettierignore \"./**/*.{js,jsx,cjs,mjs,ts,tsx,mts,md,mdx,json,css,scss,less}\"",
    "prettier-fix": "run --top-level prettier --write --cache --cache-location=\"../../.cache/prettier/exception.prettiercache\" --config ../../.prettierrc.js --ignore-path ../../.prettierignore \"./**/*.{js,jsx,cjs,mjs,ts,tsx,mts,md,mdx,json,css,scss,less}\"",
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.mjs,.cjs,.mts,.cts --cache --cache-location ../../.cache/eslint/exception.eslintcache",
    "lint-timing": "cross-env TIMING=1 run lint",
  }
}

Some ci steps:

     
      ## Here an action cache to save the global  .cache folder (will need an invalidation key based on date to
      ## avoid growing over time

      - name: 🔬 Prettier checks
        run: yarn workspaces foreach -tv --from '@httpx/*' --no-private run prettier-check
      - name: 🔬 ESLint checks
        run: yarn workspaces foreach -tv --from '@httpx/*' --no-private run lint

PS: same to add for lint-staged / husky, vscode fix on save, webstorm etc...

That said I use both approaches in multiple repos... and globally I'd say no significant difference in global speed (when cache is in place).

The key is that when using the slower eslint-plugin-prettier approach, the setup part is easier (only one tool).

As this repo is an example, I would keep it simple for now...

If you like, you can have a look to my day to day eslint configs... In that one, you can choose which mode you prefer:

• https://github.com/belgattitude/shared-dx/tree/main/packages/eslint-config-bases#usage

There's also a lot to say regarding caches:

• many tools tried to store their caches in node_modules and reverting back due to monorepo issues (prettier, ...)
• nextjs stores them in .next folder (inluding eslint caches...)... helps also with vercel.
• jest will use the cache from config...

I'm still waiting a bit to see if it's worth to create some tooling to align those difference (ie: eslint flat configs, stylint) and if some idea reduce the setup, I'd gladly isolate prettier and eslint for every project. That would also help covers other file formats (yaml...)

[belgattitude]

Glad to hear

worth to mention: https://antfu.me/posts/why-not-prettier. The author has good points imho. I'm also following the upcoming typescript-eslint v6: https://typescript-eslint.io/blog/announcing-typescript-eslint-v6-beta/. It might help clarify stylistic vs typechecks.