@homebound/eslint-config

Portable ESLint configuration for Homebound projects. This README also contains recommendations for IDE configuration.

Install

yarn add -D eslint @homebound/eslint-config

Setting up eslint.config.mjs

We expose several configs based on the project type.

• default - The default config that all projects should extend.
• react - The config for React projects.
• joist - The config for Joist projects. This assumes you're using Joist and node-pg-migrate for migrations.
• graphql - The config for GraphQL projects.

To start, create a eslint.config.mjs file in the root of your project with the following content:

import homeboundConfig from "@homebound/eslint-config";

export default [
  ...homeboundConfig,
];

Then, for each additional config that matches your project, import it and add apply the rules to the config.

import homeboundConfig from "@homebound/eslint-config";
import homeboundGraphqlConfig from "@homebound/eslint-config/graphql.mjs";
import homeboundJoistConfig from "@homebound/eslint-config/joist.mjs";
import homeboundReactConfig from "@homebound/eslint-config/react.mjs";

export default [
  ...homeboundConfig,
  ...homeboundGraphqlConfig,
  ...homeboundJoistConfig,
  ...homeboundReactConfig,
];

Package Scripts

Next, add the following scripts to your package.json, assuming your code lives in a src/ directory:

{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

Code Formatting (Prettier)

This package does not include Prettier configuration. Code formatting is handled separately via @homebound/prettier-config. See that repository for setup instructions.

Pipeline (CircleCI)

It's advised to add a Linting step to your pipeline that will enforce errors. --quiet can be used to suppress warnings so only errors are reported. For CircleCI, add a run step such as this example:

jobs:
  tests:
    ...
    steps:
      ...
      - run: yarn lint --quiet
      ...

(Optional) Workspace Settings/Plugins

Finally it is recommended to lean into your IDE's tooling to work with ESLint to enforce consistent styling for a project across your team. For example, with VSCode, ESLint should be installed, then Added to Recommended Workspace Extensions via .vscode/extensions.json, and finally the Project should be configured to use ESLint to Format-on-Save:

// .vscode/settings.json
{
  "eslint.format.enable": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true
}

(Optional) Extra Tooling

You may choose to look in to Husky and lint-staged

Using a .editorconfig is also recommended, along with the associated plugins (Often included by default such as in Jetbrains tooling)

VSCode

If using the ESLint plugin, it must be instructed to lint GraphQL files. Additionally, the top-level editor.defaultFormatter wasn't enough to tell VSCode to lint GraphQL files, so that must be updated as well. In .vscode/settings.json, add:

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "graphql"
  ],
  "[graphql]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }

Homebound Rules

Keep in mind that "plugins" simply provide rules that may be used. "configs" are a collection of rules that are set up to critique our codebase and those are what we "extend" in our ESLint configs.

• @typescript-eslint/eslint-plugin
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-react
• eslint-plugin-react-hooks
• Homebound Custom Rules

Homebound Style Guide

We maintain a Style Guide on Confluence which this project will (one day) attempt to align with as much as possible. For now, no attempt has been made to sync the two, but ideally that will change.

Contributing/Testing This Config Locally

To test this config locally against a project, first run yarn link in this project, then cd into the target project and run yarn link @homebound/eslint-config. Changes you make in here should reflect immediately in that project. For example, if you switch a warn to an error in one of the configs then yarn lint in that project, you should see the errors immediately.

To unlink, run yarn unlink @homebound/eslint-config and then run yarn install to revert to the published version.