updated Prettier docs to match ESLint

This commit is contained in:
Resi Respati
2020-07-24 15:44:13 +07:00
parent 1e42b8697c
commit 29a7bc7e83

View File

@@ -18,43 +18,37 @@ If you would rather not use Prettier instead, you can easily disable it too. In
} }
``` ```
## Configuring TSLint for Prettier ## Configuring ESLint for Prettier
The `.prettierrc` file configures how Prettier formats your code. By default we use the following options. The `.prettierrc` file configures how Prettier formats your code. By default we use the following options.
```javascript ```json
{ {
"semi": true, "semi": true,
"tabWidth": 2, "tabWidth": 2,
"printWidth": 120, "printWidth": 120,
"singleQuote": false, "singleQuote": false,
"trailingComma": "none" "trailingComma": "none",
"arrowParens": "avoid",
"endOfLine": "auto"
} }
``` ```
We can use `tslint-config-prettier` to override some TSLint rules with its Prettier counterparts. In your `tslint.json` file, extend `tslint-config-prettier`. We can use ESLint config and plugin for Prettier to override some ESLint rules to not conflict with Prettier.
```javascript
{
"extends" : [
"tslint:recommended",
"tslint-config-prettier"
]
}
```
To make Prettier error out on formatting errors, we can also use `tslint-plugin-prettier` to add a custom rule for this.
```bash ```bash
yarn add --dev tslint-plugin-prettier $ yarn add --dev eslint-plugin-prettier eslint-config-prettier prettier
``` ```
Then in your `.eslintrc` file, add the following:
```javascript ```javascript
{ module.exports = {
"rulesDirectory": ["tslint-plugin-prettier"], // other configuration omitted for brevity
"rules": { extends: ["prettier", "prettier/@typescript-eslint", "plugin:prettier/recommended"],
"prettier": true plugins: ["prettier"],
rules: {
"prettier/prettier": "error"
} }
} };
``` ```