2017-02-07 18:42:02 +03:00
# Prettier
2016-12-23 21:38:10 +03:00
2017-01-11 20:01:02 +03:00
[![Gitter ](https://badges.gitter.im/gitterHQ/gitter.svg )](https://gitter.im/jlongster/prettier)
2017-03-03 06:20:45 +03:00
[![Build Status ](https://travis-ci.org/prettier/prettier.svg?branch=master )](https://travis-ci.org/prettier/prettier)
2017-01-16 18:08:06 +03:00
[![NPM version ](https://img.shields.io/npm/v/prettier.svg )](https://www.npmjs.com/package/prettier)
2017-01-11 20:01:02 +03:00
2017-04-05 18:55:26 +03:00
<!-- toc -->
- [Usage ](#usage )
* [CLI ](#cli )
+ [Pre-commit hook for changed files ](#pre-commit-hook-for-changed-files )
* [API ](#api )
2017-05-05 19:10:23 +03:00
* [Options ](#options )
2017-04-05 18:55:26 +03:00
* [Excluding code from formatting ](#excluding-code-from-formatting )
- [Editor Integration ](#editor-integration )
* [Atom ](#atom )
* [Emacs ](#emacs )
* [Vim ](#vim )
2017-05-09 22:50:01 +03:00
+ [Other `autocmd` events ](#other-autocmd-events )
2017-04-05 18:55:26 +03:00
+ [Customizing Prettier in Vim ](#customizing-prettier-in-vim )
2017-05-21 20:08:26 +03:00
+ [Running Prettier manually in Vim ](#running-prettier-manually-in-vim )
2017-04-05 18:55:26 +03:00
* [Visual Studio Code ](#visual-studio-code )
* [Visual Studio ](#visual-studio )
* [Sublime Text ](#sublime-text )
2017-05-24 23:33:32 +03:00
* [WebStorm ](#webstorm )
2017-04-05 18:55:26 +03:00
- [Language Support ](#language-support )
- [Related Projects ](#related-projects )
- [Technical Details ](#technical-details )
- [Badge ](#badge )
- [Contributing ](#contributing )
<!-- tocstop -->
2017-01-10 09:02:39 +03:00
Prettier is an opinionated JavaScript formatter inspired by
2017-01-10 17:06:50 +03:00
[refmt ](https://facebook.github.io/reason/tools.html ) with advanced
2017-04-05 00:23:52 +03:00
support for language features from [ES2017 ](https://github.com/tc39/proposals/blob/master/finished-proposals.md ), [JSX ](https://facebook.github.io/jsx/ ), and [Flow ](https://flow.org/ ). It removes
2017-05-18 07:03:52 +03:00
all original styling[\*](#styling-footnote) and ensures that all outputted JavaScript
2017-01-10 18:33:54 +03:00
conforms to a consistent style. (See this [blog post ](http://jlongster.com/A-Prettier-Formatter ))
2016-12-23 21:38:10 +03:00
2017-04-11 02:18:01 +03:00
If you are interested in the details, you can watch those two conference talks:
2017-04-19 20:22:01 +03:00
< a href = "https://www.youtube.com/watch?v=hkfBvpEfWdA" > < img width = "298" src = "https://cloud.githubusercontent.com/assets/197597/24886367/dda8a6f0-1e08-11e7-865b-22492450f10f.png" > < / a > < a href = "https://www.youtube.com/watch?v=0Q4kUNx85_4" > < img width = "298" src = "https://cloud.githubusercontent.com/assets/197597/24886368/ddacd6f8-1e08-11e7-806a-9febd23cbf47.png" > < / a >
2017-04-11 02:17:39 +03:00
2017-04-05 00:23:52 +03:00
This goes way beyond [ESLint ](http://eslint.org/ ) and other projects
[built on it ](https://github.com/feross/standard ). Unlike ESLint,
2017-01-10 08:45:11 +03:00
there aren't a million configuration options and rules. But more
2017-04-05 00:23:52 +03:00
importantly: **everything is fixable** . This works because Prettier
never "checks" anything; it takes JavaScript as input and delivers the
2017-01-10 08:45:11 +03:00
formatted JavaScript as output.
2016-12-23 21:38:10 +03:00
2017-04-05 00:23:52 +03:00
In technical terms: Prettier parses your JavaScript into an AST (Abstract Syntax Tree) and
2017-01-10 08:45:11 +03:00
pretty-prints the AST, completely ignoring any of the original
2017-05-18 07:03:52 +03:00
formatting[\*](#styling-footnote). Say hello to completely consistent syntax!
2016-12-23 21:38:10 +03:00
2017-01-10 08:45:11 +03:00
There's an extremely important piece missing from existing styling
2017-04-05 00:23:52 +03:00
tools: **the maximum line length** . Sure, you can tell ESLint to warn
2017-01-10 08:45:11 +03:00
you when you have a line that's too long, but that's an after-thought
2017-04-05 00:23:52 +03:00
(ESLint *never* knows how to fix it). The maximum line length is a
2017-01-10 08:45:11 +03:00
critical piece the formatter needs for laying out and wrapping code.
2016-12-23 21:38:10 +03:00
2017-01-10 08:45:11 +03:00
For example, take the following code:
2016-12-23 21:38:10 +03:00
```js
2017-01-28 05:49:23 +03:00
foo(arg1, arg2, arg3, arg4);
2016-12-23 21:38:10 +03:00
```
2017-01-10 08:45:11 +03:00
That looks like the right way to format it. However, we've all run
into this situation:
2016-12-23 21:38:10 +03:00
```js
2017-01-10 08:45:11 +03:00
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
2016-12-23 21:40:43 +03:00
```
2016-12-23 21:38:10 +03:00
2017-01-10 08:45:11 +03:00
Suddenly our previous format for calling function breaks down because
this is too long. What you would probably do is this instead:
2016-12-23 21:38:10 +03:00
2017-01-11 03:26:35 +03:00
```js
2017-01-10 08:45:11 +03:00
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);
```
2016-12-23 21:38:10 +03:00
2017-01-10 08:45:11 +03:00
This clearly shows that the maximum line length has a direct impact on
the style of code we desire. The fact that current style tools ignore
this means they can't really help with the situations that are
actually the most troublesome. Individuals on teams will all format
these differently according to their own rules and we lose the
consistency we sought after.
2016-12-23 21:38:10 +03:00
2017-01-10 08:45:11 +03:00
Even if we disregard line widths, it's too easy to sneak in various
styles of code in all other linters. The most strict linter I know
happily lets all these styles happen:
2016-12-23 21:38:10 +03:00
```js
2017-01-10 08:45:11 +03:00
foo({ num: 3 },
1, 2)
2016-12-23 21:38:10 +03:00
2017-01-10 08:45:11 +03:00
foo(
{ num: 3 },
1, 2)
2016-12-23 21:38:10 +03:00
2017-01-10 08:45:11 +03:00
foo(
{ num: 3 },
1,
2
)
```
2016-12-23 21:38:10 +03:00
2017-05-18 07:03:52 +03:00
Prettier bans all custom styling[\*](#styling-footnote) by parsing it away and re-printing
2017-01-10 08:45:11 +03:00
the parsed AST with its own rules that take the maximum line width
into account, wrapping code when necessary.
2016-12-23 21:38:10 +03:00
2017-05-18 07:03:52 +03:00
< a href = "#styling-footnote" name = "styling-footnote" > \*</ a > _Well actually, some
original styling is preserved when practical—see [empty lines] and [multi-line
objects]._
[empty lines]:Rationale.md#empty-lines
[multi-line objects]:Rationale.md#multi-line-objects
2017-01-10 08:52:52 +03:00
## Usage
Install:
```
2017-04-15 17:05:38 +03:00
yarn add prettier --dev
2017-01-11 19:30:46 +03:00
```
You can install it globally if you like:
```
yarn global add prettier
2017-01-10 08:52:52 +03:00
```
2017-01-11 19:31:42 +03:00
*We're defaulting to `yarn` but you can use `npm` if you like:*
2017-01-11 19:30:46 +03:00
```
npm install [-g] prettier
```
2017-01-10 08:52:52 +03:00
### CLI
2017-04-05 00:23:52 +03:00
Run Prettier through the CLI with this script. Run it without any
2017-05-05 19:10:23 +03:00
arguments to see the [options ](#options ).
2017-01-10 08:52:52 +03:00
2017-04-14 00:23:14 +03:00
To format a file in-place, use `--write` . You may want to consider
2017-04-14 01:49:27 +03:00
committing your code before doing that, just in case.
2017-01-10 17:06:50 +03:00
2017-03-06 08:51:51 +03:00
```bash
2017-01-11 19:02:30 +03:00
prettier [opts] [filename ...]
2017-01-10 08:52:52 +03:00
```
2017-03-06 08:51:51 +03:00
In practice, this may look something like:
```bash
2017-03-06 14:45:16 +03:00
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
2017-03-06 08:51:51 +03:00
```
2017-05-24 19:17:31 +03:00
Don't forget the quotes around the globs! The quotes make sure that Prettier
expands the globs rather than your shell, for cross-platform usage.
The [glob syntax from the glob module ](https://github.com/isaacs/node-glob/blob/master/README.md#glob-primer )
is used.
2017-01-11 19:02:30 +03:00
2017-05-24 13:25:45 +03:00
Prettier CLI will ignore files located in `node_modules` directory. To opt-out from this behavior use `--with-node-modules` flag.
2017-05-09 12:51:04 +03:00
If you're worried that Prettier will change the correctness of your code, add `--debug-check` to the command.
This will cause Prettier to print an error message if it detects that code correctness might have changed.
Note that `--write` cannot be used with `--debug-check` .
2017-05-22 21:27:24 +03:00
Another useful flag is `--list-different` (or `-l` ) which prints the filenames of files that are different from Prettier formatting. If there are differences the script errors out, which is useful in a CI scenario.
```bash
2017-05-22 21:30:10 +03:00
prettier --single-quote --list-different "src/**/*.js"
2017-05-22 21:27:24 +03:00
```
2017-02-16 04:52:03 +03:00
#### Pre-commit hook for changed files
2017-05-10 18:15:11 +03:00
You can use this with a pre-commit tool. This can re-format your files that are marked as "staged" via `git add` before you commit.
2017-05-06 17:59:23 +03:00
2017-05-10 18:15:11 +03:00
##### 1. [lint-staged](https://github.com/okonet/lint-staged)
2017-02-16 04:52:03 +03:00
2017-03-07 20:53:00 +03:00
Install it along with [husky ](https://github.com/typicode/husky ):
2017-02-16 04:52:03 +03:00
```bash
2017-03-07 20:53:00 +03:00
yarn add lint-staged husky --dev
2017-02-16 04:52:03 +03:00
```
and add this config to your `package.json` :
```json
{
"scripts": {
2017-03-07 20:53:00 +03:00
"precommit": "lint-staged"
2017-02-16 04:52:03 +03:00
},
"lint-staged": {
"*.js": [
"prettier --write",
"git add"
]
2017-03-07 20:53:00 +03:00
}
2017-02-16 04:52:03 +03:00
}
```
2017-04-16 19:47:08 +03:00
See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.
2017-02-16 04:52:03 +03:00
2017-05-06 17:59:23 +03:00
##### 2. [pre-commit](https://github.com/pre-commit/pre-commit)
Just copy the following config in your pre-commit config yaml file
```yaml
- repo: https://github.com/awebdeveloper/pre-commit-prettier
sha: '' # Use the sha or tag you want to point at
hooks:
- id: prettier
2017-05-28 22:24:50 +03:00
additional_dependencies: ['prettier@1.3.1']
2017-05-10 18:15:11 +03:00
2017-05-06 17:59:23 +03:00
```
2017-05-10 18:15:11 +03:00
2017-05-06 17:59:23 +03:00
Find more info from [here ](https://github.com/awebdeveloper/pre-commit-prettier )
##### 3. bash script
2017-03-08 06:55:43 +03:00
Alternately you can just save this script as `.git/hooks/pre-commit` and give it execute permission:
```bash
#!/bin/sh
2017-04-14 18:16:17 +03:00
jsfiles=$(git diff --cached --name-only --diff-filter=ACM | grep '\.jsx\?$' | tr '\n' ' ')
2017-03-08 06:55:43 +03:00
[ -z "$jsfiles" ] & & exit 0
diffs=$(node_modules/.bin/prettier -l $jsfiles)
[ -z "$diffs" ] & & exit 0
echo "here"
echo >& 2 "Javascript files must be formatted with prettier. Please run:"
echo >& 2 "node_modules/.bin/prettier --write "$diffs""
exit 1
```
2017-01-10 08:52:52 +03:00
### API
2017-05-05 19:10:23 +03:00
The API has two functions, exported as `format` and `check` . `format` usage is as follows:
2017-01-10 08:52:52 +03:00
```js
const prettier = require("prettier");
2017-05-05 19:10:23 +03:00
const options = {} // optional
prettier.format(source, options);
2017-01-10 08:52:52 +03:00
```
2017-04-05 00:23:52 +03:00
`check` checks to see if the file has been formatted with Prettier given those options and returns a Boolean.
2017-04-03 19:54:10 +03:00
This is similar to the `--list-different` parameter in the CLI and is useful for running Prettier in CI scenarios.
2017-05-05 19:10:23 +03:00
### Options
Prettier ships with a handful of customizable format options, usable in both the CLI and API.
| Option | Default | CLI override | API override |
| ------------- | ------------- | ------------- | ------------- |
2017-05-21 23:17:02 +03:00
| **Print Width** - Specify the length of line that the printer will wrap on.< br />< br />< strong > We strongly recommend against using more than 80 columns</ strong > . Prettier works by craming as much content as possible until it reaches the limit, which happens to work well for 80 columns but makes lines that are very crowded. When a bigger column count is used in styleguides, it usually means that code is allowed to go beyond 80 columns, but not to make every single line go there, like prettier would do. | `80` | `--print-width <int>` | `printWidth: <int>`
2017-05-05 19:10:23 +03:00
| **Tab Width** - Specify the number of spaces per indentation-level. | `2` | `--tab-width <int>` | `tabWidth: <int>` |
2017-05-21 23:21:29 +03:00
| **Tabs** - Indent lines with tabs instead of spaces. | `false` | `--use-tabs` | `useTabs: <bool>` |
| **Semicolons** - Print semicolons at the ends of statements.< br />< br /> Valid options: < br /> - `true` - add a semicolon at the end of every statement < br /> - `false` - only add semicolons at the beginning of lines that may introduce ASI failures | `true` | `--no-semi` | `semi: <bool>` |
2017-05-09 22:06:40 +03:00
| **Quotes** - Use single quotes instead of double quotes. | `false` | `--single-quote` | `singleQuote: <bool>` |
2017-05-21 23:37:58 +03:00
| **Trailing Commas** - Print trailing commas wherever possible.< br />< br /> Valid options: < br /> - `"none"` - no trailing commas < br /> - `"es5"` - trailing commas where valid in ES5 (objects, arrays, etc) < br /> - `"all"` - trailing commas wherever possible (function arguments). This requires node 8 or a [transform ](https://babeljs.io/docs/plugins/syntax-trailing-function-commas/ ). | `"none"` | < code > --trailing-comma < none &# 124 ; es5 &# 124 ; all ></ code > | < code > trailingComma: "< none &# 124 ; es5 &# 124 ; all > "</ code > |
2017-05-10 18:15:32 +03:00
| **Bracket Spacing** - Print spaces between brackets in object literals.< br />< br /> Valid options: < br /> - `true` - Example: `{ foo: bar }` < br /> - `false` - Example: `{foo: bar}` | `true` | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
2017-05-09 22:06:40 +03:00
| **JSX Brackets on Same Line** - Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line | `false` | `--jsx-bracket-same-line` | `jsxBracketSameLine: <bool>` |
Find nearest node when formatting range (#1659)
* Move range extension code into helper functions
* Add findNodeByOffset() helper
This was adapted from https://github.com/prettier/prettier/pull/1637/commits/cbc1929c64db558b4e444500bca3d2ce1d550359
* Test extending formatted range to entire node
* Fix extending formatted range to entire node
* Fix style errors
* Add run_file test function
This makes it possible to use different options on a per-file basis,
which is useful for things like range formatting tests.
* Test extending the format range to nearest parseable node
This means you can select the range of a `catch` clause, attempt to
format it, and have the `try` formatted as well, rather than throwing an
error.
* Fix extending the format range to nearest parseable node
This means you can select the range of a `catch` clause, attempt to
format it, and have the `try` formatted as well, rather than throwing an
error.
* Test that external indentation is left alone when formatting a range
* Preserve external indentation when formatting a range
* Dedupe range formatting traversal callbacks
* Simplify range formatting traversal using ast-types
See https://github.com/prettier/prettier/pull/1659#issuecomment-302974798
* Make range formatting traversal more efficient
There's less unnecessary parsing now.
* Fix style errors
* Add test where range expanding fails
* Fix test where range expanding fails
This makes sure that the range contains the entirety of the nodes
containing each of the range's endpoints.
* Add test for expanding range to beginning of line
* Pass test for expanding range to beginning of line
This makes it so that indentation before the range is added to the
formatted range.
* Don't parse/stringify AST to detect pre-range indentation
See https://github.com/prettier/prettier/pull/1659#discussion_r117790671
* When formatting a range, find closest statement rather than parsing
The `isStatement` implementation came from `docs/prettier.min.js`.
See https://github.com/prettier/prettier/pull/1659#issuecomment-303154770
* Add test for range-formatting a FunctionDeclaration's argument object
* Include FunctionDeclaration when searching for nearest node to range-format
From the spec, a Program is a series of SourceElements, each of which is
either a Statement or a FunctionDeclaration. See
https://www.ecma-international.org/ecma-262/5.1/#sec-A.5
* Remove unnecessary try-catch
See https://github.com/prettier/prettier/pull/1659#discussion_r117810096
* Add tests with multiple statements
See https://github.com/prettier/prettier/pull/1659#discussion_r117810753
* Remove unnecessary arguments from findNodeByOffset()
* Contract format range to ensure it starts/ends on nodes
* Specify test ranges in the fixtures
See https://github.com/prettier/prettier/pull/1659#discussion_r117811186
* Remove unnecessary comments from range fixtures
* Remove run_file test function
It's no longer used. This essentially reverts
8241216e68f2e0da997a4f558b03658d642c89a2
* Update range formatting docs
Clarify that the range expands to the nearest statement, and not to the
end of the line.
* Don't overwrite test options when detecting range
Now that multiple files share the same object again, we shouldn't be
re-assigning to it.
* Reuse already-read fixtures for AST_COMPARE=1 tests
* Remove `run_file` global from test eslintrc
* Undo package.json churn
`yarn` reformatted it before, but the whitespace visually sets off the
comment, so let's put it back how it was before.
See https://github.com/prettier/prettier/pull/1659#discussion_r117864655
* Remove misleading comments from isSourceElement
See https://github.com/prettier/prettier/pull/1659#discussion_r117865196
* Loop backwards through string instead of reversing it
See https://github.com/prettier/prettier/pull/1659#discussion_r117865759
* Don't recompute indent string when formatting range
See https://github.com/prettier/prettier/pull/1659#discussion_r117867268
* Rename findNodeByOffset to findNodeAtOffset
"Find x by y" is the common usage for finding an `x` by a key `y`.
However, since "by" has positional meaning, let's use "at" instead.
See https://github.com/prettier/prettier/pull/1659#discussion_r117865121
* Always trimRight() in formatRange and explain why
See https://github.com/prettier/prettier/pull/1659#discussion_r117864635
* Test formatting a range that crosses AST levels
See https://github.com/prettier/prettier/pull/1659#issuecomment-303243688
* Fix formatting a range that crosses AST levels
See https://github.com/prettier/prettier/pull/1659#issuecomment-303243688
* Remove unnecessary try-catch
See https://github.com/prettier/prettier/pull/1659/files/e52db5e9f9ec4af599f658da03739e206dd4578c#r117878763
* Add test demonstrating range formatting indent detection
* Detect alignment from text on line before range, but don't reformat it
This avoids reformatting non-indentation that happens to precede the
range on the same line, while still correctly indenting the range based
on it.
See https://github.com/prettier/prettier/pull/1659#discussion_r117881430
2017-05-23 17:43:58 +03:00
| **Range Start** - Format code starting at a given character offset. The range will extend backwards to the start of the first line containing the selected statement. | `0` | `--range-start <int>` | `rangeStart: <int>` |
| **Range End** - Format code ending at a given character offset (exclusive). The range will extend forwards to the end of the selected statement. | `Infinity` | `--range-end <int>` | `rangeEnd: <int>` |
2017-05-21 23:21:29 +03:00
| **Parser** - Specify which parser to use. Both parsers support the same set of JavaScript features (including Flow). You shouldn't have to change this setting. | `babylon` | < code > --parser < flow &# 124 ; babylon ></ code > | < code > parser: "< flow &# 124 ; babylon > "</ code > |
2017-05-05 19:10:23 +03:00
2017-03-23 17:33:04 +03:00
### Excluding code from formatting
A JavaScript comment of `// prettier-ignore` will exclude the next node in the abstract syntax tree from formatting.
For example:
```js
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
// prettier-ignore
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
```
will be transformed to:
```js
matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
// prettier-ignore
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
```
## Editor Integration
2017-01-10 09:00:02 +03:00
### Atom
2017-04-05 00:23:52 +03:00
Atom users can simply install the [prettier-atom ](https://github.com/prettier/prettier-atom ) package and use
`Ctrl+Alt+F` to format a file (or format on save if enabled).
2017-01-10 09:00:02 +03:00
### Emacs
2017-04-05 00:23:52 +03:00
Emacs users should see [this directory ](https://github.com/prettier/prettier/tree/master/editors/emacs )
2017-01-10 09:00:02 +03:00
for on-demand formatting.
2017-03-25 18:10:38 +03:00
### Vim
2017-03-21 08:12:10 +03:00
Add [sbdchd ](https://github.com/sbdchd )/[neoformat](https://github.com/sbdchd/neoformat) to your list based on the tool you use:
```vim
Plug 'sbdchd/neoformat'
```
Then make Neoformat run on save:
```vim
autocmd BufWritePre *.js Neoformat
```
2017-04-19 01:30:16 +03:00
#### Other `autocmd` events
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
For example, you can format on both of the above events together with `BufWritePre` like this:
```vim
autocmd BufWritePre,TextChanged,InsertLeave *.js Neoformat
```
See `:help autocmd-events` in Vim for details.
2017-04-05 00:23:52 +03:00
#### Customizing Prettier in Vim
2017-03-21 08:12:10 +03:00
2017-04-05 00:23:52 +03:00
If your project requires settings other than the default Prettier settings, you can pass arguments to do so in your `.vimrc` or [vim project ](http://vim.wikia.com/wiki/Project_specific_settings ), you can do so:
2017-03-21 08:12:10 +03:00
```vim
2017-05-05 19:13:08 +03:00
autocmd FileType javascript setlocal formatprg=prettier\ --stdin\ --parser\ flow\ --single-quote\ --trailing-comma\ es5
2017-03-21 08:12:10 +03:00
" Use formatprg when available
let g:neoformat_try_formatprg = 1
```
2017-05-09 22:50:01 +03:00
Each option needs to be escaped with `\` .
2017-05-21 20:08:26 +03:00
#### Running Prettier manually in Vim
If you need a little more control over when prettier is run, you can create a
custom key binding. In this example, `gp` (mnemonic: "get pretty") is used to
run prettier (with options) in the currently active buffer:
```vim
nnoremap gp :silent %!prettier --stdin --trailing-comma all --single-quote< CR >
```
2017-01-11 20:09:15 +03:00
### Visual Studio Code
2017-04-05 00:23:52 +03:00
Can be installed using the extension sidebar. Search for `Prettier - JavaScript formatter` .
2017-01-11 20:09:15 +03:00
2017-04-05 00:23:52 +03:00
Can also be installed using `ext install prettier-vscode` .
2017-01-11 20:09:15 +03:00
2017-04-05 00:23:52 +03:00
[Check its repository for configuration and shortcuts ](https://github.com/esbenp/prettier-vscode )
2017-01-11 20:09:15 +03:00
2017-02-16 04:51:34 +03:00
### Visual Studio
2017-04-05 00:23:52 +03:00
Install the [JavaScript Prettier extension ](https://github.com/madskristensen/JavaScriptPrettier ).
2017-02-16 04:51:34 +03:00
2017-01-15 07:21:58 +03:00
### Sublime Text
2017-02-16 04:52:03 +03:00
Sublime Text support is available through Package Control and
2017-01-19 18:17:23 +03:00
the [JsPrettier ](https://packagecontrol.io/packages/JsPrettier ) plug-in.
2017-01-15 07:21:58 +03:00
2017-05-24 23:33:32 +03:00
### WebStorm
2017-01-30 18:06:35 +03:00
2017-05-24 23:59:55 +03:00
See the [WebStorm
guide](https://github.com/jlongster/prettier/tree/master/editors/webstorm/README.md).
2017-01-30 18:06:35 +03:00
2017-01-10 17:06:50 +03:00
## Language Support
Prettier attempts to support all JavaScript language features,
including non-standardized ones. By default it uses the
2017-04-05 00:23:52 +03:00
[Babylon ](https://github.com/babel/babylon ) parser with all language
features enabled, but you can also use the
[Flow ](https://github.com/facebook/flow ) parser with the
2017-05-05 19:10:23 +03:00
`parser` API or `--parser` CLI [option ](#options ).
2017-01-10 17:06:50 +03:00
All of JSX and Flow syntax is supported. In fact, the test suite in
`tests` *is* the entire Flow test suite and they all pass.
2017-01-26 00:33:38 +03:00
## Related Projects
2017-05-11 01:55:00 +03:00
- [`eslint-plugin-prettier` ](https://github.com/prettier/eslint-plugin-prettier ) plugs Prettier into your ESLint workflow
2017-04-05 00:23:52 +03:00
- [`eslint-config-prettier` ](https://github.com/prettier/eslint-config-prettier ) turns off all ESLint rules that are unnecessary or might conflict with Prettier
2017-02-28 20:24:08 +03:00
- [`prettier-eslint` ](https://github.com/prettier/prettier-eslint )
2017-01-26 00:33:38 +03:00
passes `prettier` output to `eslint --fix`
2017-03-16 20:33:23 +03:00
- [`prettier-standard` ](https://github.com/sheerun/prettier-standard )
2017-03-25 18:10:38 +03:00
uses `prettier` and `prettier-eslint` to format code with standard rules
2017-01-26 00:33:38 +03:00
- [`prettier-standard-formatter` ](https://github.com/dtinth/prettier-standard-formatter )
passes `prettier` output to `standard --fix`
2017-04-07 17:56:55 +03:00
- [`prettier-miscellaneous` ](https://github.com/arijs/prettier-miscellaneous )
`prettier` with a few minor extra options
2017-04-05 00:23:52 +03:00
- [`neutrino-preset-prettier` ](https://github.com/SpencerCDixon/neutrino-preset-prettier ) allows you to use Prettier as a Neutrino preset
2017-04-18 23:27:36 +03:00
- [`prettier_d` ](https://github.com/josephfrazier/prettier_d.js ) runs Prettier as a server to avoid Node.js startup delay
2017-01-26 00:33:38 +03:00
2017-01-10 08:45:11 +03:00
## Technical Details
2016-12-23 21:38:10 +03:00
2017-01-10 08:45:11 +03:00
This printer is a fork of
2017-01-11 23:48:07 +03:00
[recast ](https://github.com/benjamn/recast )'s printer with its
2017-01-10 08:45:11 +03:00
algorithm replaced by the one described by Wadler in "[A prettier
printer](http://homepages.inf.ed.ac.uk/wadler/papers/prettier/prettier.pdf)".
There still may be leftover code from recast that needs to be cleaned
up.
2016-12-23 21:38:10 +03:00
2017-01-10 08:45:11 +03:00
The basic idea is that the printer takes an AST and returns an
intermediate representation of the output, and the printer uses that
to generate a string. The advantage is that the printer can "measure"
the IR and see if the output is going to fit on a line, and break if
not.
2016-11-29 20:26:03 +03:00
2017-01-10 08:45:11 +03:00
This means that most of the logic of printing an AST involves
generating an abstract representation of the output involving certain
commands. For example, `concat(["(", line, arg, line ")"])` would
represent a concatentation of opening parens, an argument, and closing
parens. But if that doesn't fit on one line, the printer can break
where `line` is specified.
2016-12-23 21:38:10 +03:00
2017-01-10 08:45:11 +03:00
More (rough) details can be found in [commands.md ](commands.md ).
2016-12-23 21:38:10 +03:00
2017-03-29 17:26:01 +03:00
## Badge
Show the world you're using *Prettier* → [![styled with prettier ](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg )](https://github.com/prettier/prettier)
```md
[![styled with prettier ](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg )](https://github.com/prettier/prettier)
```
2017-01-10 08:45:11 +03:00
## Contributing
2016-11-29 20:26:03 +03:00
2017-05-24 18:32:20 +03:00
See [CONTRIBUTING.md ](CONTRIBUTING.md ).