[{"_1":2,"_92":-5,"_93":-5},"loaderData",{"_3":4,"_30":31,"_72":73,"_91":-5},"routes/_main",{"_5":6},"socialMedia",[7,12,15,18,21,24,27],{"_8":9,"_10":11},"link","mailto:cedar.onyxes0q@icloud.com","icon","mail",{"_8":13,"_10":14},"https://github.com/sjdonado","github",{"_8":16,"_10":17},"rss.xml","rss",{"_8":19,"_10":20},"https://linkedin.com/in/sjdonado","linkedin",{"_8":22,"_10":23},"https://slides.com/sjdonado","presentation",{"_8":25,"_10":26},"https://stackoverflow.com/users/8108856/juan-rodriguez","layers",{"_8":28,"_10":29},"https://vsco.co/sjdonado/gallery","camera","routes/_main.posts",{"_32":33},"tags",[34,39,42,45,48,51,54,57,60,63,66,69],{"_35":36,"_37":38},"id",18,"name","ai",{"_35":40,"_37":41},29,"backend",{"_35":43,"_37":44},31,"bun",{"_35":46,"_37":47},30,"cloud",{"_35":49,"_37":50},25,"databases",{"_35":52,"_37":53},33,"frontend",{"_35":55,"_37":56},6,"life",{"_35":58,"_37":59},13,"performance",{"_35":61,"_37":62},32,"remix",{"_35":64,"_37":65},24,"self-hosted",{"_35":67,"_37":68},15,"sqlite",{"_35":70,"_37":71},14,"tooling","routes/_main.posts._index",{"_74":75,"_90":71},"posts",[76],{"_35":77,"_78":79,"_80":81,"_82":83,"_8":84,"_32":85,"_86":87},103,"title","Migrate remix eslint-config to ESLint v9","date","3/2/2025","description","Custom ESLint v9 flat config for Remix from scratch.","/posts/migrate-remix-eslint-config-to-eslint-v9",[53,62,71],"content",{"_88":89},"rendered","\n

This weekend I finally found time to upgrade the old deprecated @remix-run/eslint-config in my Remix projects (not yet migrated to React Router v7).

\n\n\n\n

I first attempted to remove the package entirely and adopt the recommended configuration from the official Remix template (https://github.com/remix-run/remix/blob/main/templates/remix/.eslintrc.cjs). However, after running the ESLint migration tool (https://eslint.org/docs/latest/use/getting-started) npm init @eslint/migrate-config, the output was problematic. This was likely because some dependencies weren’t yet compatible with ESLint’s new flat configuration system.

\n\n\n\n

Instead, I opted for a manual approach, installing and configuring each plugin individually. Here’s the outcome:

\n\n\n\n

Install new dependencies

\n\n\n\n

npm install --save-dev @eslint/js @remix-run/dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react eslint-plugin-simple-import-sort eslint-plugin-tailwindcss globals tailwindcss typescript-eslint

\n\n\n\n

Changes in the dev dependencies should look similar to these:

\n\n\n\n

   \"devDependencies\": {\n+    \"@eslint/js\": \"^9.20.0\",\n-    \"@remix-run/dev\": \"^2.13.1\",\n-    \"@remix-run/eslint-config\": \"^2.13.1\",\n+    \"@remix-run/dev\": \"^2.15.3\",\n@@ -89,16 +89,22 @@\n+    \"@typescript-eslint/eslint-plugin\": \"^8.23.0\",\n+    \"@typescript-eslint/parser\": \"^8.23.0\",\n-    \"eslint\": \"^9.3.0\",\n+    \"eslint\": \"^9.20.0\",\n+    \"eslint-plugin-react\": \"^7.37.4\",\n+    \"globals\": \"^15.14.0\",\n+    \"typescript-eslint\": \"^8.23.0\",\n   },

\n\n\n\n

Migrate old config file

\n\n\n\n

Now we can remove .eslintrc.cjs and replace it with the new flat config eslint.config.js:

\n\n\n\n

import jseslint from \"@eslint/js\";\nimport reactPlugin from \"eslint-plugin-react\";\nimport globals from \"globals\";\nimport tseslint from \"typescript-eslint\";\n\n/** @type {import('eslint').Linter.Config[]} */\nexport default [\n  { files: [\"**/*.{js,mjs,cjs,ts,jsx,tsx}\"] },\n  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },\n  jseslint.configs.recommended,\n  ...tseslint.configs.recommended,\n  reactPlugin.configs.flat.recommended,\n  reactPlugin.configs.flat[\"jsx-runtime\"]\n];

\n\n\n\n

Optionally, this is how it looks like if you would like to include the eslint-plugin-tailwindcss and eslint-plugin-simple-import-sort plugins:

\n\n\n\n

import jseslint from \"@eslint/js\";\nimport reactPlugin from \"eslint-plugin-react\";\nimport simpleImportSort from \"eslint-plugin-simple-import-sort\";\nimport globals from \"globals\";\nimport tseslint from \"typescript-eslint\";\nimport tailwind from \"eslint-plugin-tailwindcss\";\n\n/** @type {import('eslint').Linter.Config[]} */\nexport default [\n  { files: [\"**/*.{js,mjs,cjs,ts,jsx,tsx}\"] },\n  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },\n  jseslint.configs.recommended,\n  ...tseslint.configs.recommended,\n  reactPlugin.configs.flat.recommended,\n  reactPlugin.configs.flat[\"jsx-runtime\"],\n  {\n    plugins: {\n      \"simple-import-sort\": simpleImportSort,\n    },\n    rules: {\n      \"simple-import-sort/imports\": \"error\",\n      \"simple-import-sort/exports\": \"error\",\n    },\n  },\n  ...tailwind.configs[\"flat/recommended\"],\n];

\n","currentTag","root","actionData","errors"]

Blog

Migrate remix eslint-config to ESLint v9