add docs on configuring TSLint for Prettier
This commit is contained in:
@@ -15,6 +15,7 @@
|
|||||||
* [Module bundling](./in-depth/module-bundling.md)
|
* [Module bundling](./in-depth/module-bundling.md)
|
||||||
* [Deploy destinations](./in-depth/deploy-destinations.md)
|
* [Deploy destinations](./in-depth/deploy-destinations.md)
|
||||||
* [TypeScript](./in-depth/typescript.md)
|
* [TypeScript](./in-depth/typescript.md)
|
||||||
|
* [Prettier](./in-depth/prettier.md)
|
||||||
* [Cookbook](./in-depth/cookbook.md)
|
* [Cookbook](./in-depth/cookbook.md)
|
||||||
* [Environment variables](./in-depth/cookbook/environment-variables.md)
|
* [Environment variables](./in-depth/cookbook/environment-variables.md)
|
||||||
* [One-line PowerShell setup](./in-depth/cookbook/one-line-powershell.md)
|
* [One-line PowerShell setup](./in-depth/cookbook/one-line-powershell.md)
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# Prettier
|
# Code formatting with Prettier
|
||||||
|
|
||||||
[Prettier](https://prettier.io/) is an automatic code formatter which supports various languages, including TypeScript. It also has extensions for various text editors like [VSCode](https://github.com/prettier/prettier-vscode), [Atom](https://github.com/prettier/prettier-atom), and even [Vim](https://github.com/prettier/vim-prettier). If you have installed these extensions, it will use Prettier's service to automatically format your code after saving.
|
[Prettier](https://prettier.io/) is an automatic code formatter which supports various languages, including TypeScript. It also has extensions for various text editors like [VSCode](https://github.com/prettier/prettier-vscode), [Atom](https://github.com/prettier/prettier-atom), and even [Vim](https://github.com/prettier/vim-prettier). If you have installed these extensions, it will use Prettier's service to automatically format your code after saving.
|
||||||
|
|
||||||
@@ -17,3 +17,42 @@ If you would rather not use Prettier instead, you can easily disable it too. In
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Configuring TSLint for Prettier
|
||||||
|
|
||||||
|
The `.prettierrc` file configures how Prettier formats your code. By default we use the following options.
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"semi": true,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"printWidth": 120,
|
||||||
|
"singleQuote": false,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
We can use `tslint-config-prettier` to override some TSLint rules with its Prettier counterparts. In your `tslint.json` file, extend `tslint-config-prettier`.
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"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
|
||||||
|
yarn add --dev tslint-plugin-prettier
|
||||||
|
```
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"rulesDirectory": ["tslint-plugin-prettier"],
|
||||||
|
"rules": {
|
||||||
|
"prettier": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -10,7 +10,6 @@
|
|||||||
"member-ordering": [false],
|
"member-ordering": [false],
|
||||||
"no-console": [false],
|
"no-console": [false],
|
||||||
"no-namespace": [true, "allow-declarations"],
|
"no-namespace": [true, "allow-declarations"],
|
||||||
"trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
|
|
||||||
"variable-name": [
|
"variable-name": [
|
||||||
true,
|
true,
|
||||||
"ban-keywords",
|
"ban-keywords",
|
||||||
|
|||||||
Reference in New Issue
Block a user