@bcw-research/eslint-config

ESLint Config for BCW Repositories

Usage

With the CLI tool

npx @bcw-research/create-config
# or
npm init @bcw-research/config

Note: The CLI currently only supports initializing a project. If you want to add to an existing ESLint config file, follow the manual steps below.

Manually

Install the shared config and dependencies as devDependencies:

npm install -D @bcw-research/eslint-config eslint eslint-plugin-import eslint-plugin-simple-import-sort

If your project also uses Typescript, React and/or Prettier, be sure to install the appropriate dependencies:

# typescript
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

# react
npm install -D eslint-plugin-react eslint-plugin-react-hooks

# prettier
npm install -D eslint-config-prettier prettier

After installing all the dependencies, create a .eslintrc.cjs file at the root of your directory. Add the plugin to the extends property of the default export:

module.exports = {
  extends: ["@bcw-research/eslint-config"],
};

The base @bcw-reserach/eslint-config shared config also contains configurations for React, Typescript, and Prettier. They are available within the eslint-config directory. In the .eslintrc.cjs file, simply replace @bcw-research/eslint-config with any of the following:

• @bcw-research/eslint-config/prettier
• @bcw-research/eslint-config/typescript
• @bcw-research/eslint-config/typescript-prettier
• @bcw-research/eslint-config/react-typescript
• @bcw-research/eslint-config/react-typescript-prettier

Overriding Rules

Override rules by adding to the .eslintrc.cjs file:

module.exports = {
  extends: ["@bcw-research/eslint-config/react-typescript"],
  rules: {
    quotes: ["error", "single"],
  },
};

Integration with VS Code

If using VS code, don't forget to install the VS Code ESLint Extension

Troubleshooting

• If using React with Typescript and the "React is a UMD module…" error shows up, double check the following:
  • Make sure typescript is installed as a devDependency
  • Use a pattern that includes the file you are trying to lint in your tsconfig.json:
    • include: ['**/*.ts', '**/*.tsx']
  • Make sure you've installed react >= 17 and set "jsx": "react-jsx" in the compileOptions of your tsconfig.json.
• It is not recommended to use ESLint formatting rules with the Prettier formatter. If you are unsure which rules format and which ones enforce code style, refer to the eslint-config-prettier plugin. It disables all rules that might conflict with prettier.