eslint-plugin-remix-react-routes

eslint-plugin-remix-react-routes

Validate routes referenced by <Link> and friends in a Remix app.

Installation

Remix apps generally have ESLint pre-configured, but if not you'll want to set it up:

npm i eslint --save-dev

Next, install eslint-plugin-remix-react-routes:

npm install eslint-plugin-remix-react-routes --save-dev

If your app uses TypeScript, you're encouraged to also configure typed linting (and set up typescript-eslint while you're at it!). This allows the plugin to fully leverage the type system when evaluating route expressions. To enable typed linting:

npm install @typescript-eslint/parser --save-dev

And add something along these lines to your .eslintrc.js:

module.exports = {
  // ...
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
    tsconfigRootDir: __dirname,
  },
};

Configurations

Most apps should extend from one of the following configurations:

• recommended: Recommended route rules that you can drop in to a Remix project.
• strict: Like recommended, but more strict and opinionated.

Add something like this to your .eslintrc.js:

module.exports = {
  // ...
  extends: [
    // ...
    "plugin:remix-react-routes/recommended",
  ],
};

You can also override any config rules to meet your needs:

module.exports = {
  // ...
  rules: {
    // ...
    "remix-react-routes/no-relative-paths": [
      // downgrade to a warning
      "warn",
      // enable this check in route components
      { enforceInRouteComponents: true },
    ],
  },
};

Supported Rules

• use-link-for-routes - Ensure routes are linked via <Link to> rather than <a href>
• require-valid-paths - Ensure <Link> and friends point to actual routes in the app
• no-relative-paths - Ensure <Link> and friends use absolute paths
• no-urls - Ensure <Link> and friends use paths rather than URLs