Shared ESLint config for React Typescript Projects.
npm install --save-dev eslint-config-crema
You will also need to install eslint
:
npm install --save-dev eslint
Import this config into your own ESLint configuration using the extends
option. ESLint checks both package.json
and .eslintrc.*
files for its configuration:
{
"eslintConfig": {
"extends": ["crema"]
}
}
module.exports = {
extends: ["crema"],
}
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)
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.
Install the Prettier
extension and create a file named /.vscode/settings.json
with the following configuration:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}