1.0.0 • Published 2 months ago

eslint-config-crema v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
2 months ago

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:

PluginPresets
eslintrecommended
@typescript-eslintrecommended
importrecommended + typescript
jsx-a11yrecommended
reactrecommended + jsx-runtime
react-hooksrecommended
storybookrecommended
testing-libraryreact
react-hook-form`recommended
@tanstack/eslint-plugin-queryrecommended
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
}