remix-run · ryanflorence · Dec 9, 2021 · Nov 1, 2021 · Nov 1, 2021 · Nov 1, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,12 +1,8 @@
 module.exports = {
-  extends: ["react-app", "plugin:import/typescript"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint", "import"],
-  settings: {
-    "import/resolver": {
-      typescript: {}
-    }
-  },
+  extends: [
+    require.resolve("./packages/remix-eslint-config/index.js"),
+    require.resolve("./packages/remix-eslint-config/jest.js")
+  ],
   overrides: [
     {
       files: [
@@ -16,11 +12,16 @@ module.exports = {
       rules: {
         "no-restricted-globals": "off"
       }
+    },
+    {
+      files: ["fixtures/gists-app/jest/**/*.js"],
+      env: {
+        "jest/globals": true
+      }
     }
   ],
   rules: {
     "@typescript-eslint/consistent-type-imports": "error",
-
     "import/order": [
       "error",
       {

diff --git a/fixtures/gists-app/app/routes/methods.tsx b/fixtures/gists-app/app/routes/methods.tsx
@@ -18,8 +18,6 @@ export let loader: LoaderFunction = async ({ request }) => {
 };
 
 export let action: ActionFunction = async ({ request }) => {
-  let contentType = request.headers.get("Content-Type");
-
   let session = await getSession(request.headers.get("Cookie"));
   let bodyParams = await request.formData();
   let body = Array.from(bodyParams.entries()).reduce<

diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "packages/remix-architect",
     "packages/remix-cloudflare-workers",
     "packages/remix-dev",
+    "packages/remix-eslint-config",
     "packages/remix-express",
     "packages/remix-netlify",
     "packages/remix-node",
@@ -32,13 +33,15 @@
   ],
   "dependencies": {
     "@babel/core": "^7.10.4",
+    "@babel/eslint-parser": "^7.16.3",
     "@babel/plugin-proposal-export-namespace-from": "^7.10.4",
     "@babel/plugin-proposal-optional-chaining": "^7.12.7",
     "@babel/preset-env": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.12.7",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rushstack/eslint-patch": "^1.1.0",
     "@types/cheerio": "^0.22.22",
     "@types/jest": "^25.2.3",
     "@types/node-fetch": "^2.5.7",
@@ -49,21 +52,21 @@
     "@types/retry": "^0.12.0",
     "@types/semver": "^7.3.4",
     "@types/ssri": "^7.1.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
     "abort-controller": "^3.0.0",
     "abortcontroller-polyfill": "^1.7.3",
-    "babel-eslint": "^10.1.0",
     "chalk": "^4.1.0",
     "cheerio": "^1.0.0-rc.3",
-    "eslint": "^7.32.0",
-    "eslint-config-react-app": "^6.0.0",
+    "eslint": "^8.1.0",
+    "eslint-import-resolver-node": "0.3.6",
     "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-flowtype": "^6.1.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "express": "^4.17.1",
     "glob": "^7.1.6",
     "husky": "7.0.2",

diff --git a/packages/create-remix/templates/_shared_js/app/entry.server.jsx b/packages/create-remix/templates/_shared_js/app/entry.server.jsx
@@ -7,7 +7,7 @@ export default function handleRequest(
   responseHeaders,
   remixContext
 ) {
-  let markup = renderToString(
+  const markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />
   );
 

diff --git a/packages/create-remix/templates/_shared_js/app/root.jsx b/packages/create-remix/templates/_shared_js/app/root.jsx
@@ -13,7 +13,7 @@ import globalStylesUrl from "~/styles/global.css";
 import darkStylesUrl from "~/styles/dark.css";
 
 // https://remix.run/api/app#links
-export let links = () => {
+export const links = () => {
   return [
     { rel: "stylesheet", href: globalStylesUrl },
     {
@@ -58,7 +58,7 @@ export function ErrorBoundary({ error }) {
 
 // https://remix.run/api/conventions#catchboundary
 export function CatchBoundary() {
-  let caught = useCatch();
+  const caught = useCatch();
 
   let message;
   switch (caught.status) {

diff --git a/packages/create-remix/templates/_shared_js/app/routes/demos/about.jsx b/packages/create-remix/templates/_shared_js/app/routes/demos/about.jsx
@@ -2,13 +2,13 @@ import { Outlet } from "remix";
 
 import stylesUrl from "~/styles/demos/about.css";
 
-export let meta = () => {
+export const meta = () => {
   return {
     title: "About Remix"
   };
 };
 
-export let links = () => {
+export const links = () => {
   return [{ rel: "stylesheet", href: stylesUrl }];
 };
 

diff --git a/packages/create-remix/templates/_shared_js/app/routes/demos/actions.jsx b/packages/create-remix/templates/_shared_js/app/routes/demos/actions.jsx
@@ -8,9 +8,9 @@ export function meta() {
 // When your form sends a POST, the action is called on the server.
 // - https://remix.run/api/conventions#action
 // - https://remix.run/guides/data-updates
-export let action = async ({ request }) => {
-  let formData = await request.formData();
-  let answer = formData.get("answer");
+export const action = async ({ request }) => {
+  const formData = await request.formData();
+  const answer = formData.get("answer");
 
   // Typical action workflows start with validating the form data that just came
   // over the network. Clientside validation is fine, but you definitely need it
@@ -33,8 +33,8 @@ export let action = async ({ request }) => {
 
 export default function ActionsDemo() {
   // https://remix.run/api/remix#useactiondata
-  let actionMessage = useActionData();
-  let answerRef = useRef(null);
+  const actionMessage = useActionData();
+  const answerRef = useRef(null);
 
   // This form works without JavaScript, but when we have JavaScript we can make
   // the experience better by selecting the input on wrong answers! Go ahead, disable

diff --git a/packages/create-remix/templates/_shared_js/app/routes/demos/params/$id.jsx b/packages/create-remix/templates/_shared_js/app/routes/demos/params/$id.jsx
@@ -3,7 +3,7 @@ import { json, useCatch, useLoaderData } from "remix";
 // The `$` in route filenames becomes a pattern that's parsed from the URL and
 // passed to your loaders so you can look up data.
 // - https://remix.run/api/conventions#loader-params
-export let loader = async ({ params }) => {
+export const loader = async ({ params }) => {
   // pretend like we're using params.id to look something up in the db
 
   if (params.id === "this-record-does-not-exist") {
@@ -38,7 +38,7 @@ export let loader = async ({ params }) => {
 };
 
 export default function ParamDemo() {
-  let data = useLoaderData();
+  const data = useLoaderData();
   return (
     <h1>
       The param is <i style={{ color: "red" }}>{data.param}</i>
@@ -50,7 +50,7 @@ export default function ParamDemo() {
 // https://remix.run/api/remix#usecatch
 // https://remix.run/api/guides/not-found
 export function CatchBoundary() {
-  let caught = useCatch();
+  const caught = useCatch();
 
   let message;
   switch (caught.status) {
@@ -105,7 +105,7 @@ export function ErrorBoundary({ error }) {
   );
 }
 
-export let meta = ({ data }) => {
+export const meta = ({ data }) => {
   return {
     title: data ? `Param: ${data.param}` : "Oops..."
   };

diff --git a/packages/create-remix/templates/_shared_js/app/routes/index.jsx b/packages/create-remix/templates/_shared_js/app/routes/index.jsx
@@ -4,8 +4,8 @@ import { useLoaderData, json, Link } from "remix";
 // you can connect to a database or run any server side code you want right next
 // to the component that renders it.
 // https://remix.run/api/conventions#loader
-export let loader = () => {
-  let data = {
+export const loader = () => {
+  const data = {
     resources: [
       {
         name: "Remix Docs",
@@ -41,7 +41,7 @@ export let loader = () => {
 };
 
 // https://remix.run/api/conventions#meta
-export let meta = () => {
+export const meta = () => {
   return {
     title: "Remix Starter",
     description: "Welcome to remix!"
@@ -50,7 +50,7 @@ export let meta = () => {
 
 // https://remix.run/guides/routing#index-routes
 export default function Index() {
-  let data = useLoaderData();
+  const data = useLoaderData();
 
   return (
     <div className="remix__page">

diff --git a/packages/remix-eslint-config/README.md b/packages/remix-eslint-config/README.md
@@ -0,0 +1,31 @@
+# `@remix-run/eslint-config`
+
+This package includes a shareable ESLint config for Remix projects.
+
+This package is new, but eventually we will include it as a dependency in projects bootstrapped with `create-remix` so that no configuration in necessary for those apps.
+
+## Installation
+
+First, install this package along with ESLint in your project. **This package requires at least version 8.1 of ESLint**
+
+```sh
+npm install -D eslint @remix-run/eslint-config
+```
+
+Then create a file named `.eslintrc` in the root of your project:
+
+```json
+{
+  "extends": "@remix-run/eslint-config"
+}
+```
+
+### Jest
+
+This packages also ships with optional configuration options for projects that use Jest for testing. To enable these rules, add the following to your `.eslintrc`:
+
+```json
+{
+  "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/jest"]
+}
+```