Skip to content

Commit

Permalink
docs: document compatibility with Prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
gajus committed Nov 17, 2021
1 parent e18c9a3 commit c843df0
Showing 1 changed file with 19 additions and 0 deletions.
19 changes: 19 additions & 0 deletions README.md
Expand Up @@ -9,6 +9,7 @@ Canonical consists of 1,000+ rules, some of which are [custom written](https://g

* [Usage](#usage)
* [Example configuration](#example-configuration)
* [Compatibility with Prettier](#compatibility-prettier)
* [Compatibility with other style guides](#compatibility-with-other-style-guides)
* [Integrations](#integrations)
* [Visual Studio Code](#visual-studio-code)
Expand Down Expand Up @@ -96,6 +97,24 @@ This is an example configuration of a React project using TypeScript and Jest:
}
```

### Compatibility with Prettier

For the most part, Prettier and Canonical are already compatible. There are only a few transformations that are incompatible, e.g. Prettier enforces line-length and Canonical does not. As such, there is no good reason to use both. However, if you just want to disable conflicting rules, you can use [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) to do that. Just add it as the last config in your `extends` configuration, e.g.

```json
{
"extends": [
"canonical",
"canonical/react",
"canonical/typescript",
"canonical/jest",
"prettier"
]
}
```

This configuration disables all Canonical rules that conflict with Prettier.

### Compatibility with other style guides

Since Canonical style guide includes more rules than any other style guide, you can have your codebase compatible with a specific style guide (e.g. [airbnb](https://www.npmjs.com/package/eslint-config-airbnb)) and benefit from Canonical for rules that are not covered by the other guide. All you have to do is extend from Canonical before extending from the desired style guide, e.g.
Expand Down

0 comments on commit c843df0

Please sign in to comment.