Separate eslint and prettier

- Dan Abramov did it: bluesky-social/social-app#3373
- Prettier recommends it: https://prettier.io/docs/en/comparison
- Eslint has deprecated its formatting rules: https://eslint.org/blog/2023/10/deprecating-formatting-rules/
- This person wrote a blog post about it: https://www.joshuakgoldberg.com/blog/you-probably-dont-need-eslint-config-prettier-or-eslint-plugin-prettier/

Author: ahuth

.eslintrc.cjs

@@ -8,12 +8,10 @@ module.exports = {
       version: 29,
     },
   },
-  plugins: ['prettier'],
   extends: [
     '@remix-run/eslint-config',
     '@remix-run/eslint-config/node',
     'plugin:jsx-a11y/recommended',
-    'plugin:prettier/recommended',
   ],
   reportUnusedDisableDirectives: true,
   ignorePatterns: ['build/'],

.github/workflows/build.yml

@@ -8,7 +8,7 @@ concurrency:
 
 jobs:
   lint:
-    name: 👖 ESLint
+    name: 👖 Lint
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo
@@ -27,8 +27,11 @@ jobs:
       - name: 👖 Lint
         run: npm run lint
 
-  typecheck:
-    name: 🔎 TypeScript
+      - name: 💄 Prettier
+        run: npm run prettier
+
+  types:
+    name: 🔎 Types
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo

.prettierignore

@@ -3,10 +3,17 @@ postgres-data
 
 /build
 /playwright-report
-/playwright/.cache
 /public/build
 /storybook-static
 /test-results
 
-.env
-*.md
+# Ignore everything except JS/TS files.
+# Based on https://stackoverflow.com/a/70715829/458193
+*
+!*.cjs
+!*.js
+!*.jsx
+!*.mjs
+!*.ts
+!*.tsx
+!*/

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "bradlc.vscode-tailwindcss"]
+  "recommendations": [
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
 }

.vscode/settings.json

@@ -2,5 +2,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
   "eslint.run": "onSave"
 }

package-lock.json

@@ -10,6 +10,7 @@
     "docker": "docker compose up --detach",
     "docker:down": "docker compose down",
     "lint": "eslint --max-warnings 0 .",
+    "prettier": "prettier . --cache --check",
     "prod": "NODE_ENV=production node --enable-source-maps ./build/server.js",
     "routes": "remix routes",
     "setup": "prisma generate && prisma migrate deploy && prisma db seed",
@@ -22,7 +23,7 @@
     "test:axeOnly": "axe-storybook --build-dir ./storybook-static",
     "test:e2e": "npm run setup:e2e && DATABASE_URL=postgresql://postgres:postgres@localhost:5432/test npx playwright test",
     "types": "tsc --noEmit",
-    "validate": "run-p \"test -- --run\" lint types"
+    "validate": "run-p \"test -- --run\" lint prettier types"
   },
   "eslintIgnore": [
     "/build",
@@ -88,8 +89,6 @@
     "dotenv": "^16.4.5",
     "esbuild": "^0.20.1",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
     "happy-dom": "^13.6.2",
     "npm-run-all": "^4.1.5",
     "null-loader": "^4.0.1",