lukeomalley
11/22/2019 - 2:18 PM
prettier-setup.md
Prettier Configuration
1. Install Prettier
npm install --save-dev --save-exact prettier
2. Setup the Configuration File
Create a .prettierrc file in the root of the project with the following json:
{
"printWidth": 120,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2,
"semi": true,
"bracketSpacing": true
}
The only defaults being overwritten here are printwidth which defaults to 80 and enforcing single quotes rather than double quotes. See all configuration options
3. Install the extension for your editor (optional, but reccomended)
The extension can be added directly through the extension tab in VS Code or through the following link. VS Code Prettier Download Link
After installing the extension some VS Code settings must be modified to allow for auto formatting. To access your VS Code settings.json file press Cmd + Shift + P and type Preferences: Open Settings (JSON)
Prettier respects your editors format on save setting. If you would like to enable formatting on save, add the following to your .vscode/settings.json file:
{
"editor.formatOnSave": true
}
To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.
To set prettier as the default for specific languages, add the following to your .vscode/settings.json file:
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
It is recommended to set prettier for the specific languages that you work with, however it is possible to set prettier as the default formatter for all file types. To do this, add the following to your .vscode/settings.json file:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
4. Setup Prettier Ignore File (optional)
Create a .prettierignore file in the root of the project. This file fucntions the same as a .gitignore and will prevent prettier from formatting files referenced.
package.json
package-lock.json
dist
5. Remove Formatting Options From tslint.json
We want to remove the code formatting rules from TSLint and let Prettier handle that:
{
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules": {
"arrow-return-shorthand": true,
"callable-types": true,
"class-name": true,
-- "comment-format": [
-- true,
-- "check-space"
-- ],
-- "curly": true,
-- "eofline": true,
"forin": true,
"import-blacklist": [
true,
"rxjs",
"rxjs/Rx"
],
-- "import-spacing": true,
-- "indent": [
-- true,
-- "spaces"
-- ],
"interface-over-type-literal": true,
"label-position": true,
-- "max-line-length": [
-- true,
-- 140
-- ],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-arg": true,
"no-bitwise": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-super": true,
"no-empty": false,
"no-empty-interface": true,
"no-eval": true,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-misused-new": true,
"no-non-null-assertion": true,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-string-throw": true,
"no-switch-case-fall-through": true,
-- "no-trailing-whitespace": true,
"no-unnecessary-initializer": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
-- "one-line": [
-- true,
-- "check-open-brace",
-- "check-catch",
-- "check-else",
-- "check-whitespace"
-- ],
"prefer-const": true,
-- "quotemark": [
-- true,
-- "single"
-- ],
"radix": true,
-- "semicolon": [
-- true,
-- "always"
-- ],
"triple-equals": [
true,
"allow-null-check"
],
-- "typedef-whitespace": [
-- true,
-- {
-- "call-signature": "nospace",
-- "index-signature": "nospace",
-- "parameter": "nospace",
-- "property-declaration": "nospace",
-- "variable-declaration": "nospace"
-- }
-- ],
"typeof-compare": true,
"unified-signatures": true,
"variable-name": false,
-- "whitespace": [
-- true,
-- "check-branch",
-- "check-decl",
-- "check-operator",
-- "check-separator",
-- "check-type"
-- ],
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
-- "angular-whitespace": [true, "check-interpolation"],
"no-output-on-prefix": true,
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-input-rename": true,
"no-output-rename": true,
"use-life-cycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true
}
}
6. Setup a pre-commit hook (optional)
Setting this up will cause code to be automatically checked and formatted when you commit. This is great for when you want an entire file formatting on your changed/staged files.
Add required dev dependencies:
yarn add pretty-quick husky --dev
Setup pre-commit hook in package.json by adding the following:
{
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
}
Some Handy Prettier Commands
With format on save setup, you will not have to run prettier from the command line, however everything can be done from the command line if you prefer. Here are some useful commands:
Check which typescript files have formatting errors:
./node_modules/.bin/prettier --check "src/**/*.ts"
Format a single file:
./node_modules/.bin/prettier <PATH_TO_FILE> --write