eslint-config-crema

Shared ESLint config for React Typescript Projects.

Installation

npm install --save-dev eslint-config-crema

You will also need to install eslint:

npm install --save-dev eslint

Usage

Import this config into your own ESLint configuration using the extends option. ESLint checks both package.json and .eslintrc.* files for its configuration:

package.json

{
  "eslintConfig": {
    "extends": ["crema"]
  }
}

.eslintrc.js

module.exports = {
    extends: ["crema"],
}

What's Included

This ESLint config includes a selection of useful plugins, this is what you get out of the box:

| Plugin | Presets | | ------------------------------- | ----------------------------- | | eslint | recommended | | @typescript-eslint | recommended | | import | recommended + typescript | | jsx-a11y | recommended | | react | recommended + jsx-runtime | | react-hooks | recommended | | storybook | recommended | | testing-library | react | | react-hook-form | recommended | | @tanstack/eslint-plugin-query|recommended | |prettier` | - |

Note: Storybook and Testing Library plugins only run on select files. (Stories and Tests)

Customizing Prettier

Create a file named .prettierrc.json in your project directory. An example of Prettier configuration file:

{
    "trailingComma": "all",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": false
}

Read more about configuring prettier and all of the available options.

Setting Prettier as the default formatter for the workspace in VSCode

Install the Prettier extension and create a file named /.vscode/settings.json with the following configuration:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}