SiteOne ESLint config

This package includes the shareable ESLint configuration used by SiteOne. It's meant to be used on react projects.

It just takes recommended configuration from commonly used plugins and wrap's it up in one easy to use bundle. So we can maintain our eslint configuration in one place.

Installation

yarn add eslint @siteone/eslint-config --dev

OR

npm install eslint @siteone/eslint-config --save-dev

Configuration

Paste this in your .eslintrc.js

/* eslintrc.js */
module.exports = {
  extends: [
    "@siteone/eslint-config/common",
    "@siteone/eslint-config/flow", // Remove if you are not using flow
    "@siteone/eslint-config/cssmodules", // Remove if you are not using css modules
  ],
};

Recommended prettier configuration

/* .prettierrc */
{
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

Import aliases

This config uses eslint-plugin-import so if you are using import aliases you need to configure them like so:

/* eslintrc.js */
const path = require("path");

module.exports = {
  extends: [
    "@siteone/eslint-config/common",
    "@siteone/eslint-config/flow",
    "@siteone/eslint-config/cssmodules",
  ],
  settings: {
    "import/resolver": {
      alias: [
        ["components", path.join(__dirname, "/src/components/")],
        // ...
      ],
    },
  },
};

So eslint-plugin-import can resolve imports like:

/* src/components/Button.js */
export default function Button() {
  return <button>Click me</button>;
}

/* src/pages/index.js */
import Button from "components/button"; // instead of ../components/Button

More in eslint-plugin-import docs.

NOTE: This wont make your imports work it just tells eslint where to look for them while linting.