testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Format docs with Prettier 1.13

Browse Source
This commit is contained in:
Lucas Duailibe committed 2018-05-27 15:38:31 -03:00
1 parent 1a4dda73a9
commit 412b064df8
25 files changed
+817 -818
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/api.md
+7 -7
View File
@@ -35,8 +35,8 @@ prettier.formatWithCursor(" 1", { cursorOffset: 2 });
`resolveConfig` can be used to resolve configuration for a given source file, passing its path as the first argument. The config search will start at the file path and continue to search up the directory (you can use `process.cwd()` to start searching from the current directory). Or you can pass directly the path of the config file as `options.config` if you don't wish to search for it. A promise is returned which will resolve to:
* An options object, providing a [config file](configuration.md) was found.
* `null`, if no file was found.
- An options object, providing a [config file](configuration.md) was found.
- `null`, if no file was found.
The promise will be rejected if there was an error parsing the configuration file.
@@ -51,9 +51,9 @@ prettier.resolveConfig(filePath).then(options => {
If `options.editorconfig` is `true` and an [`.editorconfig` file](http://editorconfig.org/) is in your project, Prettier will parse it and convert its properties to the corresponding prettier configuration. This configuration will be overridden by `.prettierrc`, etc. Currently, the following EditorConfig properties are supported:
* `indent_style`
* `indent_size`/`tab_width`
* `max_line_length`
- `indent_style`
- `indent_size`/`tab_width`
- `max_line_length`
Use `prettier.resolveConfig.sync(filePath [, options])` if you'd like to use sync version.
@@ -61,8 +61,8 @@ Use `prettier.resolveConfig.sync(filePath [, options])` if you'd like to use syn
`resolveConfigFile` can be used to find the path of the Prettier's configuration file will be used when resolving the config (i.e. when calling `resolveConfig`). A promise is returned which will resolve to:
* The path of the configuration file.
* `null`, if no file was found.
- The path of the configuration file.
- `null`, if no file was found.
The promise will be rejected if there was an error parsing the configuration file.
docs/cli.md
+5 -5
View File
@@ -110,8 +110,8 @@ This rewrites all processed files in place. This is comparable to the `eslint --
Change the level of logging for the CLI. Valid options are:
* `error`
* `warn`
* `log` (default)
* `debug`
* `silent`
- `error`
- `warn`
- `log` (default)
- `debug`
- `silent`
docs/configuration.md
+3 -3
View File
@@ -5,9 +5,9 @@ title: Configuration File
Prettier uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) for configuration file support. This means you can configure prettier via:
* A `.prettierrc` file, written in YAML or JSON, with optional extensions: `.yaml/.yml/.json/.js`.
* A `prettier.config.js` file that exports an object.
* A `"prettier"` key in your `package.json` file.
- A `.prettierrc` file, written in YAML or JSON, with optional extensions: `.yaml/.yml/.json/.js`.
- A `prettier.config.js` file that exports an object.
- A `"prettier"` key in your `package.json` file.
The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn't) found.
docs/editors.md
+2 -2
View File
@@ -9,8 +9,8 @@ Atom users can simply install the [prettier-atom] package and use `Ctrl+Alt+F` t
Alternatively, you can use one the packages below, which behave similarly to [prettier-atom] but have a focus on minimalism.
* [mprettier](https://github.com/t9md/atom-mprettier)
* [miniprettier](https://github.com/duailibe/atom-miniprettier)
- [mprettier](https://github.com/t9md/atom-mprettier)
- [miniprettier](https://github.com/duailibe/atom-miniprettier)
## Emacs
docs/index.md
+8 -8
View File
@@ -5,14 +5,14 @@ title: What is Prettier?
Prettier is an opinionated code formatter with support for:
* JavaScript, including [ES2017](https://github.com/tc39/proposals/blob/master/finished-proposals.md)
* [JSX](https://facebook.github.io/jsx/)
* [Flow](https://flow.org/)
* [TypeScript](https://www.typescriptlang.org/)
* CSS, [Less](http://lesscss.org/), and [SCSS](http://sass-lang.com)
* [JSON](http://json.org/)
* [GraphQL](http://graphql.org/)
* [Markdown](http://commonmark.org/), including [GFM](https://github.github.com/gfm/)
- JavaScript, including [ES2017](https://github.com/tc39/proposals/blob/master/finished-proposals.md)
- [JSX](https://facebook.github.io/jsx/)
- [Flow](https://flow.org/)
- [TypeScript](https://www.typescriptlang.org/)
- CSS, [Less](http://lesscss.org/), and [SCSS](http://sass-lang.com)
- [JSON](http://json.org/)
- [GraphQL](http://graphql.org/)
- [Markdown](http://commonmark.org/), including [GFM](https://github.github.com/gfm/)
It removes all original styling[\*](#footnotes) and ensures that all outputted code conforms to a consistent style. (See this [blog post](http://jlongster.com/A-Prettier-Formatter))
docs/option-philosophy.md
+4 -4
View File
@@ -17,10 +17,10 @@ Well, had Prettier been created around the same time as JavaScript itself was bo
Then there's a bunch of interesting cases.
* `--trailing-comma es5` was added to make it easier to use trailing commas in most environments without having to transpile (trailing function commas were added in ES2017).
* `--prose-wrap` is important to support all quirky markdown renderers in the wild.
* `--arrow-parens` was added after [huge demand](https://github.com/prettier/prettier/issues/812). Prettier has to strike a balance between ideal goals and listening to the community.
* `--jsx-bracket-same-line` was needed for a big company with a huge code base (Facebook), which backed the project when it got started, to be able to [adopt Prettier at all](https://github.com/prettier/prettier/pull/661#issuecomment-295770645).
- `--trailing-comma es5` was added to make it easier to use trailing commas in most environments without having to transpile (trailing function commas were added in ES2017).
- `--prose-wrap` is important to support all quirky markdown renderers in the wild.
- `--arrow-parens` was added after [huge demand](https://github.com/prettier/prettier/issues/812). Prettier has to strike a balance between ideal goals and listening to the community.
- `--jsx-bracket-same-line` was needed for a big company with a huge code base (Facebook), which backed the project when it got started, to be able to [adopt Prettier at all](https://github.com/prettier/prettier/pull/661#issuecomment-295770645).
Finally, perhaps the most interesting of them all is `--bracket-spacing`.
The truth is that not even [Prettier's creator knows exactly why it exists](https://github.com/prettier/prettier/issues/715#issuecomment-281096495). It was added super early on without much thought. It now serves as an example of the types of options we should avoid.
docs/options.md
+25 -25
View File
@@ -43,8 +43,8 @@ Print semicolons at the ends of statements.
Valid options:
* `true` - Add a semicolon at the end of every statement.
* `false` - Only add semicolons at the beginning of lines that may introduce ASI failures.
- `true` - Add a semicolon at the end of every statement.
- `false` - Only add semicolons at the beginning of lines that may introduce ASI failures.
| Default | CLI Override | API Override |
| ------- | ------------ | -------------- |
@@ -56,8 +56,8 @@ Use single quotes instead of double quotes.
Notes:
* Quotes in JSX will always be double and ignore this setting.
* If the number of quotes outweighs the other quote, the quote which is less used will be used to format the string - Example: `"I'm double quoted"` results in `"I'm double quoted"` and `"This \"example\" is single quoted"` results in `'This "example" is single quoted'`.
- Quotes in JSX will always be double and ignore this setting.
- If the number of quotes outweighs the other quote, the quote which is less used will be used to format the string - Example: `"I'm double quoted"` results in `"I'm double quoted"` and `"This \"example\" is single quoted"` results in `'This "example" is single quoted'`.
| Default | CLI Override | API Override |
| ------- | ---------------- | --------------------- |
@@ -69,9 +69,9 @@ Print trailing commas wherever possible when multi-line. (A single-line array, f
Valid options:
* `"none"` - No trailing commas.
* `"es5"` - Trailing commas where valid in ES5 (objects, arrays, etc.)
* `"all"` - Trailing commas wherever possible (including function arguments). This requires node 8 or a [transform](https://babeljs.io/docs/plugins/syntax-trailing-function-commas/).
- `"none"` - No trailing commas.
- `"es5"` - Trailing commas where valid in ES5 (objects, arrays, etc.)
- `"all"` - Trailing commas wherever possible (including function arguments). This requires node 8 or a [transform](https://babeljs.io/docs/plugins/syntax-trailing-function-commas/).
| Default | CLI Override | API Override |
| -------- | ------------------------------------------------------ | ------------------------------------------------------ |
@@ -83,8 +83,8 @@ Print spaces between brackets in object literals.
Valid options:
* `true` - Example: `{ foo: bar }`.
* `false` - Example: `{foo: bar}`.
- `true` - Example: `{ foo: bar }`.
- `false` - Example: `{foo: bar}`.
| Default | CLI Override | API Override |
| ------- | ---------------------- | ------------------------ |
@@ -96,7 +96,7 @@ Put the `>` of a multi-line JSX element at the end of the last line instead of b
Valid options:
* `true` - Example:
- `true` - Example:
<!-- prettier-ignore -->
```
@@ -108,7 +108,7 @@ Valid options:
</button>
```
* `false` - Example:
- `false` - Example:
<!-- prettier-ignore -->
```
@@ -133,8 +133,8 @@ Include parentheses around a sole arrow function parameter.
Valid options:
* `"avoid"` - Omit parens when possible. Example: `x => x`
* `"always"` - Always include parens. Example: `(x) => x`
- `"avoid"` - Omit parens when possible. Example: `x => x`
- `"always"` - Always include parens. Example: `(x) => x`
| Default | CLI Override | API Override |
| --------- | ----------------------------------------------- | ----------------------------------------------- |
@@ -146,8 +146,8 @@ Format only a segment of a file.
These two options can be used to format code starting and ending at a given character offset (inclusive and exclusive, respectively). The range will extend:
* Backwards to the start of the first line containing the selected statement.
* Forwards to the end of the selected statement.
- Backwards to the start of the first line containing the selected statement.
- Forwards to the end of the selected statement.
These options cannot be used with `cursorOffset`.
@@ -164,13 +164,13 @@ Both the `babylon` and `flow` parsers support the same set of JavaScript feature
Built-in parsers:
* [`babylon`](https://github.com/babel/babel/tree/master/packages/babylon)
* [`flow`](https://github.com/facebook/flow/tree/master/src/parser)
* [`typescript`](https://github.com/eslint/typescript-eslint-parser) _Since v1.4.0_
* [`postcss`](https://github.com/postcss/postcss) _Since v1.4.0_
* [`json`](https://github.com/babel/babylon/tree/f09eb3200f57ea94d51c2a5b1facf2149fb406bf#babylonparseexpressioncode-options) _Since v1.5.0_
* [`graphql`](https://github.com/graphql/graphql-js/tree/master/src/language) _Since v1.5.0_
* [`markdown`](https://github.com/wooorm/remark/tree/master/packages/remark-parse) _Since v1.8.0_
- [`babylon`](https://github.com/babel/babel/tree/master/packages/babylon)
- [`flow`](https://github.com/facebook/flow/tree/master/src/parser)
- [`typescript`](https://github.com/eslint/typescript-eslint-parser) _Since v1.4.0_
- [`postcss`](https://github.com/postcss/postcss) _Since v1.4.0_
- [`json`](https://github.com/babel/babylon/tree/f09eb3200f57ea94d51c2a5b1facf2149fb406bf#babylonparseexpressioncode-options) _Since v1.5.0_
- [`graphql`](https://github.com/graphql/graphql-js/tree/master/src/language) _Since v1.5.0_
- [`markdown`](https://github.com/wooorm/remark/tree/master/packages/remark-parse) _Since v1.8.0_
[Custom parsers](api.md#custom-parser-api) are also supported. _Since v1.5.0_
@@ -238,9 +238,9 @@ By default, Prettier will wrap markdown text as-is since some services use a lin
Valid options:
* `"always"` - Wrap prose if it exceeds the print width.
* `"never"` - Do not wrap prose.
* `"preserve"` - Wrap prose as-is. _available in v1.9.0+_
- `"always"` - Wrap prose if it exceeds the print width.
- `"never"` - Do not wrap prose.
- `"preserve"` - Wrap prose as-is. _available in v1.9.0+_
| Default | CLI Override | API Override |
| ------------ | ----------------------------------------------------------- | ----------------------------------------------------------- |
docs/plugins.md
+14 -14
View File
@@ -15,7 +15,7 @@ Plugins are automatically loaded if you have them installed in the same `node_mo
When plugins cannot be found automatically, you can load them with:
* The [CLI](./cli.md), via the `--plugin` and `--plugin-search-dir`:
- The [CLI](./cli.md), via the `--plugin` and `--plugin-search-dir`:
```bash
prettier --write main.foo --plugin-search-dir=./dir-with-plugins --plugin=./foo-plugin
@@ -23,7 +23,7 @@ When plugins cannot be found automatically, you can load them with:
> Tip: You can set `--plugin` or `--plugin-search-dir` options multiple times.
* Or the [API](./api.md), via the `plugins` and `pluginSearchDirs` options:
- Or the [API](./api.md), via the `plugins` and `pluginSearchDirs` options:
```js
prettier.format("code", {
@@ -39,26 +39,26 @@ Providing at least one path to `--plugin-search-dir`/`pluginSearchDirs` turns of
## Official Plugins
* [`@prettier/plugin-python`](https://github.com/prettier/plugin-python)
* [`@prettier/plugin-php`](https://github.com/prettier/plugin-php)
* [`@prettier/plugin-swift`](https://github.com/prettier/plugin-swift)
- [`@prettier/plugin-python`](https://github.com/prettier/plugin-python)
- [`@prettier/plugin-php`](https://github.com/prettier/plugin-php)
- [`@prettier/plugin-swift`](https://github.com/prettier/plugin-swift)
## Community Plugins
* [`prettier-plugin-elm`](https://github.com/gicentre/prettier-plugin-elm) by [**@giCentre**](https://github.com/gicentre)
* [`prettier-plugin-java`](https://github.com/thorbenvh8/prettier-java) by [**@thorbenvh8**](https://github.com/thorbenvh8)
* [`prettier-plugin-pg`](https://github.com/benjie/prettier-plugin-pg) by [**@benjie**](https://github.com/benjie)
* [`prettier-plugin-ruby`](https://github.com/iamsolankiamit/prettier-ruby) by [**@iamsolankiamit**](https://github.com/iamsolankiamit)
- [`prettier-plugin-elm`](https://github.com/gicentre/prettier-plugin-elm) by [**@giCentre**](https://github.com/gicentre)
- [`prettier-plugin-java`](https://github.com/thorbenvh8/prettier-java) by [**@thorbenvh8**](https://github.com/thorbenvh8)
- [`prettier-plugin-pg`](https://github.com/benjie/prettier-plugin-pg) by [**@benjie**](https://github.com/benjie)
- [`prettier-plugin-ruby`](https://github.com/iamsolankiamit/prettier-ruby) by [**@iamsolankiamit**](https://github.com/iamsolankiamit)
## Developing Plugins
Prettier plugins are regular JavaScript modules with five exports:
* `languages`
* `parsers`
* `printers`
* `options`
* `defaultOptions`
- `languages`
- `parsers`
- `printers`
- `options`
- `defaultOptions`
### `languages`
docs/rationale.md
+6 -6
View File
@@ -23,8 +23,8 @@ Prettier maintains the way your string is escaped. For example, `"🙂"` won't b
It turns out that empty lines are very hard to automatically generate. The approach that Prettier takes is to preserve empty lines the way they were in the original source code. There are two additional rules:
* Prettier collapses multiple blank lines into a single blank line.
* Empty lines at the start and end of blocks (and whole files) are removed. (Files always end with a single newline, though.)
- Prettier collapses multiple blank lines into a single blank line.
- Empty lines at the start and end of blocks (and whole files) are removed. (Files always end with a single newline, though.)
### Multi-line objects
@@ -142,7 +142,7 @@ Prettier only _prints_ code. It does not transform it. This is to limit the scop
Here are a few examples of things that are out of scope for Prettier:
* Turning single- or double-quoted strings into template literals or vice versa.
* Adding/removing `{}` and `return` where they are optional.
* Turning `?:` into `if`-`else` statements.
* Sorting and hoisting `import`s. (Sorting is unsafe because of side effects, which would violate the [correctness](#correctness) goal.)
- Turning single- or double-quoted strings into template literals or vice versa.
- Adding/removing `{}` and `return` where they are optional.
- Turning `?:` into `if`-`else` statements.
- Sorting and hoisting `import`s. (Sorting is unsafe because of side effects, which would violate the [correctness](#correctness) goal.)
docs/related-projects.md
+18 -18
View File
@@ -5,33 +5,33 @@ title: Related Projects
## ESLint Integrations
* [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) plugs Prettier into your ESLint workflow
* [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) turns off all ESLint rules that are unnecessary or might conflict with Prettier
* [`prettier-eslint`](https://github.com/prettier/prettier-eslint) passes `prettier` output to `eslint --fix`
* [`prettier-standard`](https://github.com/sheerun/prettier-standard) uses `prettier` and `prettier-eslint` to format code with standard rules
* [`prettier-standard-formatter`](https://github.com/dtinth/prettier-standard-formatter) passes `prettier` output to `standard --fix`
- [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) plugs Prettier into your ESLint workflow
- [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) turns off all ESLint rules that are unnecessary or might conflict with Prettier
- [`prettier-eslint`](https://github.com/prettier/prettier-eslint) passes `prettier` output to `eslint --fix`
- [`prettier-standard`](https://github.com/sheerun/prettier-standard) uses `prettier` and `prettier-eslint` to format code with standard rules
- [`prettier-standard-formatter`](https://github.com/dtinth/prettier-standard-formatter) passes `prettier` output to `standard --fix`
## TSLint Integrations
* [`tslint-plugin-prettier`](https://github.com/ikatyang/tslint-plugin-prettier) runs Prettier as a TSLint rule and reports differences as individual TSLint issues
* [`tslint-config-prettier`](https://github.com/alexjoverm/tslint-config-prettier) use TSLint with Prettier without any conflict
* [`prettier-tslint`](https://github.com/azz/prettier-tslint) passes `prettier` output to `tslint --fix`
- [`tslint-plugin-prettier`](https://github.com/ikatyang/tslint-plugin-prettier) runs Prettier as a TSLint rule and reports differences as individual TSLint issues
- [`tslint-config-prettier`](https://github.com/alexjoverm/tslint-config-prettier) use TSLint with Prettier without any conflict
- [`prettier-tslint`](https://github.com/azz/prettier-tslint) passes `prettier` output to `tslint --fix`
## stylelint Integrations
* [`prettier-stylelint`](https://github.com/hugomrdias/prettier-stylelint) passes `prettier` output to `stylelint --fix`
* [`stylelint-config-prettier`](https://github.com/shannonmoeller/stylelint-config-prettier) turns off all rules that are unnecessary or might conflict with Prettier.
- [`prettier-stylelint`](https://github.com/hugomrdias/prettier-stylelint) passes `prettier` output to `stylelint --fix`
- [`stylelint-config-prettier`](https://github.com/shannonmoeller/stylelint-config-prettier) turns off all rules that are unnecessary or might conflict with Prettier.
## Forks
* [`prettier-miscellaneous`](https://github.com/arijs/prettier-miscellaneous) `prettier` with a few minor extra options
- [`prettier-miscellaneous`](https://github.com/arijs/prettier-miscellaneous) `prettier` with a few minor extra options
## Misc
* [`neutrino-preset-prettier`](https://github.com/SpencerCDixon/neutrino-preset-prettier) allows you to use Prettier as a Neutrino preset
* [`prettier_d`](https://github.com/josephfrazier/prettier_d.js) runs Prettier as a server to avoid Node.js startup delay. It also supports configuration via `.prettierrc`, `package.json`, and `.editorconfig`.
* [`Prettier Bookmarklet`](https://prettier.glitch.me/) provides a bookmarklet and exposes a REST API for Prettier that allows to format CodeMirror editor in your browser
* [`prettier-github`](https://github.com/jgierer12/prettier-github) formats code in GitHub comments
* [`rollup-plugin-prettier`](https://github.com/mjeanroy/rollup-plugin-prettier) allows you to use Prettier with Rollup
* [`markdown-magic-prettier`](https://github.com/camacho/markdown-magic-prettier) allows you to use Prettier to format JS [codeblocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) in Markdown files via [Markdown Magic](https://github.com/DavidWells/markdown-magic)
* [`pretty-quick`](https://github.com/azz/pretty-quick) formats your changed files with Prettier
- [`neutrino-preset-prettier`](https://github.com/SpencerCDixon/neutrino-preset-prettier) allows you to use Prettier as a Neutrino preset
- [`prettier_d`](https://github.com/josephfrazier/prettier_d.js) runs Prettier as a server to avoid Node.js startup delay. It also supports configuration via `.prettierrc`, `package.json`, and `.editorconfig`.
- [`Prettier Bookmarklet`](https://prettier.glitch.me/) provides a bookmarklet and exposes a REST API for Prettier that allows to format CodeMirror editor in your browser
- [`prettier-github`](https://github.com/jgierer12/prettier-github) formats code in GitHub comments
- [`rollup-plugin-prettier`](https://github.com/mjeanroy/rollup-plugin-prettier) allows you to use Prettier with Rollup
- [`markdown-magic-prettier`](https://github.com/camacho/markdown-magic-prettier) allows you to use Prettier to format JS [codeblocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) in Markdown files via [Markdown Magic](https://github.com/DavidWells/markdown-magic)
- [`pretty-quick`](https://github.com/azz/pretty-quick) formats your changed files with Prettier
docs/vim.md
+2 -2
View File
@@ -29,8 +29,8 @@ autocmd BufWritePre *.js Neoformat
You can also make Vim format your code more frequently, by setting an `autocmd` for other events. Here are a couple of useful ones:
* `TextChanged`: after a change was made to the text in Normal mode
* `InsertLeave`: when leaving Insert mode
- `TextChanged`: after a change was made to the text in Normal mode
- `InsertLeave`: when leaving Insert mode
For example, you can format on both of the above events together with `BufWritePre` like this:
docs/webstorm.md
+10 -10
View File
@@ -19,13 +19,13 @@ To automatically format your files using `prettier` on save, you can use a file
Go to _Preferences | Tools | File Watchers_ and click **+** to add a new watcher. Let’s name it **Prettier**.
* **File Type**: _JavaScript_ (or _Any_ if you want to run `prettier` on all files)
* **Scope**: _Project Files_
* **Program**: full path to `.bin/prettier` or `.bin\prettier.cmd` in the project's `node_module` folder. Or, if Prettier is installed globally, select `prettier` on macOS and Linux or `C:\Users\user_name\AppData\Roaming\npm\prettier.cmd` on Windows (or whatever `npm prefix -g` returns).
* **Arguments**: `--write [other options] $FilePathRelativeToProjectRoot$`
* **Output paths to refresh**: `$FilePathRelativeToProjectRoot$`
* **Working directory**: `$ProjectFileDir$`
* **Auto-save edited files to trigger the watcher**: Uncheck to reformat on Save only.
- **File Type**: _JavaScript_ (or _Any_ if you want to run `prettier` on all files)
- **Scope**: _Project Files_
- **Program**: full path to `.bin/prettier` or `.bin\prettier.cmd` in the project's `node_module` folder. Or, if Prettier is installed globally, select `prettier` on macOS and Linux or `C:\Users\user_name\AppData\Roaming\npm\prettier.cmd` on Windows (or whatever `npm prefix -g` returns).
- **Arguments**: `--write [other options] $FilePathRelativeToProjectRoot$`
- **Output paths to refresh**: `$FilePathRelativeToProjectRoot$`
- **Working directory**: `$ProjectFileDir$`
- **Auto-save edited files to trigger the watcher**: Uncheck to reformat on Save only.
![Example](/docs/assets/webstorm/file-watcher-prettier.png)
@@ -41,9 +41,9 @@ Make sure that the ESLint integration is enabled in _Preferences | Languages & F
Go to _Preferences | Tools | External Tools_ and click **+** to add a new tool. Let’s name it **Prettier**.
* **Program**: `prettier` on macOS and Linux or `C:\Users\user_name\AppData\Roaming\npm\prettier.cmd` on Windows (or whatever `npm prefix -g` returns), if Prettier is installed globally
* **Parameters**: `--write [other options] $FilePathRelativeToProjectRoot$`
* **Working directory**: `$ProjectFileDir$`
- **Program**: `prettier` on macOS and Linux or `C:\Users\user_name\AppData\Roaming\npm\prettier.cmd` on Windows (or whatever `npm prefix -g` returns), if Prettier is installed globally
- **Parameters**: `--write [other options] $FilePathRelativeToProjectRoot$`
- **Working directory**: `$ProjectFileDir$`
> If Prettier is installed locally in your project, replace the path in **Program** with `$ProjectFileDir$/node_modules/.bin/prettier` on macOS and Linux or `$ProjectFileDir$\node_modules\.bin\prettier.cmd` on Windows.
docs/why-prettier.md
+25 -25
View File
@@ -9,53 +9,53 @@ By far the biggest reason for adopting Prettier is to stop all the on-going deba
So why choose the "Prettier style guide" over any other random style guide? Because Prettier is the only "style guide" that is fully automatic. Even if Prettier does not format all code 100% the way you'd like, it's worth the "sacrifice" given the unique benefits of Prettier, don't you think?
* “We want to free mental threads and end discussions around style. While sometimes fruitful, these discussions are for the most part wasteful.”
* “Literally had an engineer go through a huge effort of cleaning up all of our code because we were debating ternary style for the longest time and were inconsistent about it. It was dumb, but it was a weird on-going "great debate" that wasted lots of little back and forth bits. It's far easier for us all to agree now: just run Prettier, and go with that style.”
* “Getting tired telling people how to style their product code.”
* “Our top reason was to stop wasting our time debating style nits.”
* “Having a githook set up has reduced the amount of style issues in PRs that result in broken builds due to ESLint rules or things I have to nit-pick or clean up later.”
* “I don't want anybody to nitpick any other person ever again.”
* “It reminds me of how Steve Jobs used to wear the same clothes every day because he has a million decisions to make and he didn't want to be bothered to make trivial ones like picking out clothes. I think Prettier is like that.”
- “We want to free mental threads and end discussions around style. While sometimes fruitful, these discussions are for the most part wasteful.”
- “Literally had an engineer go through a huge effort of cleaning up all of our code because we were debating ternary style for the longest time and were inconsistent about it. It was dumb, but it was a weird on-going "great debate" that wasted lots of little back and forth bits. It's far easier for us all to agree now: just run Prettier, and go with that style.”
- “Getting tired telling people how to style their product code.”
- “Our top reason was to stop wasting our time debating style nits.”
- “Having a githook set up has reduced the amount of style issues in PRs that result in broken builds due to ESLint rules or things I have to nit-pick or clean up later.”
- “I don't want anybody to nitpick any other person ever again.”
- “It reminds me of how Steve Jobs used to wear the same clothes every day because he has a million decisions to make and he didn't want to be bothered to make trivial ones like picking out clothes. I think Prettier is like that.”
## Helping Newcomers
Prettier is usually introduced by people with experience in the current codebase and JavaScript but the people that disproportionally benefit from it are newcomers to the codebase. One may think that it's only useful for people with very limited programming experience, but we've seen it quicken the ramp up time from experienced engineers joining the company, as they likely used a different coding style before, and developers coming from a different programming language.
* “My motivations for using Prettier are: appearing that I know how to write JavaScript well.”
* “I always put spaces in the wrong place, now I don't have to worry about it anymore.”
* “When you're a beginner you're making a lot of mistakes caused by the syntax. Thanks to Prettier, you can reduce these mistakes and save a lot of time to focus on what really matters.”
* “As a teacher, I will also tell to my students to install Prettier to help them to learn the JS syntax and have readable files.”
- “My motivations for using Prettier are: appearing that I know how to write JavaScript well.”
- “I always put spaces in the wrong place, now I don't have to worry about it anymore.”
- “When you're a beginner you're making a lot of mistakes caused by the syntax. Thanks to Prettier, you can reduce these mistakes and save a lot of time to focus on what really matters.”
- “As a teacher, I will also tell to my students to install Prettier to help them to learn the JS syntax and have readable files.”
## Writing code
What usually happens once people are using Prettier is that they realize that they actually spend a lot of time and mental energy formatting their code. With Prettier editor integration, you can just press that magic key binding and poof, the code is formatted. This is an eye opening experience if anything else.
* “I want to write code. Not spend cycles on formatting.”
* “It removed 5% that sucks in our daily life - aka formatting”
* “We're in 2017 and it's still painful to break a call into multiple lines when you happen to add an argument that makes it go over the 80 columns limit :(“
- “I want to write code. Not spend cycles on formatting.”
- “It removed 5% that sucks in our daily life - aka formatting”
- “We're in 2017 and it's still painful to break a call into multiple lines when you happen to add an argument that makes it go over the 80 columns limit :(“
## Easy to adopt
We've worked very hard to use the least controversial coding styles, went through many rounds of fixing all the edge cases and polished the getting started experience. When you're ready to push Prettier into your codebase, not only should it be painless for you to do it technically but the newly formatted codebase should not generate major controversy and be accepted painlessly by your co-workers.
* “It's low overhead. We were able to throw Prettier at very different kinds of repos without much work.”
* “It's been mostly bug free. Had there been major styling issues during the course of implementation we would have been wary about throwing this at our JS codebase. I'm happy to say that's not the case.”
* “Everyone runs it as part of their pre commit scripts, a couple of us use the editor on save extensions as well.”
* “It's fast, against one of our larger JS codebases we were able to run Prettier in under 13 seconds.”
* “The biggest benefit for Prettier for us was being able to format the entire code base at once.”
- “It's low overhead. We were able to throw Prettier at very different kinds of repos without much work.”
- “It's been mostly bug free. Had there been major styling issues during the course of implementation we would have been wary about throwing this at our JS codebase. I'm happy to say that's not the case.”
- “Everyone runs it as part of their pre commit scripts, a couple of us use the editor on save extensions as well.”
- “It's fast, against one of our larger JS codebases we were able to run Prettier in under 13 seconds.”
- “The biggest benefit for Prettier for us was being able to format the entire code base at once.”
## Clean up an existing codebase
Since coming up with a coding style and enforcing it is a big undertaking, it often slips through the cracks and you are left working on inconsistent codebases. Running Prettier in this case is a quick win, the codebase is now uniform and easier to read without spending hardly any time.
* “Take a look at the code :) I just need to restore sanity.”
* “We inherited a ~2000 module ES6 code base, developed by 20 different developers over 18 months, in a global team. Felt like such a win without much research.”
- “Take a look at the code :) I just need to restore sanity.”
- “We inherited a ~2000 module ES6 code base, developed by 20 different developers over 18 months, in a global team. Felt like such a win without much research.”
## Ride the hype train
Purely technical aspects of the projects aren't the only thing people look into when choosing to adopt Prettier. Who built and uses it and how quickly it spreads through the community has a non-trivial impact.
* “The amazing thing, for me, is: 1) Announced 2 months ago. 2) Already adopted by, it seems, every major JS project. 3) 7000 stars, 100,000 npm downloads/mo”
* “Was built by the same people as React & React Native.”
* “I like to be part of the hot new things.”
* “Because soon enough people are gonna ask for it.”
- “The amazing thing, for me, is: 1) Announced 2 months ago. 2) Already adopted by, it seems, every major JS project. 3) 7000 stars, 100,000 npm downloads/mo”
- “Was built by the same people as React & React Native.”
- “I like to be part of the hot new things.”
- “Because soon enough people are gonna ask for it.”