Move all docs to website (#3139)

* Sync README -> docs/options.md

* Sync README -> docs/*.md

* Misc fixups

* Remove markdown-toc

* Remove insert-pragma from ToC

* Never again!

* Move all docs to ./docs

* Remove yarn toc

* Fix inter-doc links

* Fix links in footer

* Clean up README.md

* Add basic description to README.md

* Use flat badges

* Move editor guides to website

* Improve prettier-ignore docs

* Fixup bad find/replace

* Add JSON to README

* Fix custom parser API link

* Fixup GitHub centering, add downloads badge

* Add 1.8 docs

* docs(website): mention markdown on homepage (#1)

* Add intro

* Add watching-files.md

* Fix markdown syntax highlighting

* Switch back to .md links
master
Lucas Azzola 2017-11-07 14:39:07 +11:00 committed by GitHub
parent 8249b1c841
commit 71a5533c4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 925 additions and 1475 deletions

1
.gitignore vendored
View File

@ -7,6 +7,7 @@
/.vscode
/dist
/website/node_modules
/website/build
.DS_Store
coverage
.idea

View File

@ -16,7 +16,7 @@ matrix:
install:
- NODE_ENV=development yarn install
before_script:
- yarn toc && git diff --exit-code README.md
- yarn check-deps
- if [ "${NODE_ENV}" = "production" ]; then yarn build; fi
script:
- yarn lint

1002
README.md

File diff suppressed because it is too large Load Diff

115
docs/api.md Normal file
View File

@ -0,0 +1,115 @@
---
id: api
title: API
---
```js
const prettier = require("prettier");
```
## `prettier.format(source [, options])`
`format` is used to format text using Prettier. [Options](options.md) may be provided to override the defaults.
```js
prettier.format("foo ( );", { semi: false });
// -> "foo()"
```
## `prettier.check(source [, options])`
`check` checks to see if the file has been formatted with Prettier given those options and returns a `Boolean`.
This is similar to the `--list-different` parameter in the CLI and is useful for running Prettier in CI scenarios.
## `prettier.formatWithCursor(source [, options])`
`formatWithCursor` both formats the code, and translates a cursor position from unformatted code to formatted code.
This is useful for editor integrations, to prevent the cursor from moving when code is formatted.
The `cursorOffset` option should be provided, to specify where the cursor is. This option cannot be used with `rangeStart` and `rangeEnd`.
```js
prettier.formatWithCursor(" 1", { cursorOffset: 2 });
// -> { formatted: '1;\n', cursorOffset: 1 }
```
## `prettier.resolveConfig(filePath [, options])`
`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-file.html) was found.
* `null`, if no file was found.
The promise will be rejected if there was an error parsing the configuration file.
If `options.useCache` is `false`, all caching will be bypassed.
```js
const text = fs.readFileSync(filePath, "utf8");
prettier.resolveConfig(filePath).then(options => {
const formatted = prettier.format(text, options);
})
```
Use `prettier.resolveConfig.sync(filePath [, options])` if you'd like to use sync version.
## `prettier.clearConfigCache()`
As you repeatedly call `resolveConfig`, the file system structure will be cached for performance.
This function will clear the cache. Generally this is only needed for editor integrations that
know that the file system has changed since the last format took place.
## `prettier.getSupportInfo([version])`
Returns an object representing the parsers, languages and file types Prettier
supports.
If `version` is provided (e.g. `"1.5.0"`), information for that version will be
returned, otherwise information for the current version will be returned.
The support information looks like this:
```
{
languages: Array<{
name: string,
since: string,
parsers: string[],
group?: string,
tmScope: string,
aceMode: string,
codemirrorMode: string,
codemirrorMimeType: string,
aliases?: string[],
extensions: string[],
filenames?: string[],
linguistLanguageId: number,
vscodeLanguageIds: string[],
}>
}
```
## Custom Parser API
If you need to make modifications to the AST (such as codemods), or you want to provide an alternate parser, you can do so by setting the `parser` option to a function. The function signature of the parser function is:
```js
(text: string, parsers: object, options: object) => AST;
```
Prettier's built-in parsers are exposed as properties on the `parsers` argument.
```js
prettier.format("lodash ( )", {
parser(text, { babylon }) {
const ast = babylon(text);
ast.program.body[0].expression.callee.name = "_";
return ast;
}
});
// -> "_();\n"
```
The `--parser` CLI option may be a path to a node.js module exporting a parse function.

114
docs/cli.md Normal file
View File

@ -0,0 +1,114 @@
---
id: cli
title: CLI
---
Run Prettier through the CLI with this script. Run it without any
arguments to see the [options](options.md).
To format a file in-place, use `--write`. You may want to consider
committing your code before doing that, just in case.
```bash
prettier [opts] [filename ...]
```
In practice, this may look something like:
```bash
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
```
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.
Prettier CLI will ignore files located in `node_modules` directory. To opt-out from this behavior use `--with-node-modules` flag.
## `--debug-check`
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`.
## `--find-config-path` and `--config`
If you are repeatedly formatting individual files with `prettier`, you will incur a small performance cost
when prettier attempts to look up a [configuration file](./configuration-file.html). In order to skip this, you may
ask prettier to find the config file once, and re-use it later on.
```bash
prettier --find-config-path ./my/file.js
./my/.prettierrc
```
This will provide you with a path to the configuration file, which you can pass to `--config`:
```bash
prettier --config ./my/.prettierrc --write ./my/file.js
```
You can also use `--config` if your configuration file lives somewhere where prettier cannot find it,
such as a `config/` directory.
If you don't have a configuration file, or want to ignore it if it does exist,
you can pass `--no-config` instead.
### `--ignore-path`
Path to a file containing patterns that describe files to ignore. By default, prettier looks for `./.prettierignore`.
## `--require-pragma`
Require a special comment, called a pragma, to be present in the file's first docblock comment in order for prettier to format it.
```js
/**
* @prettier
*/
```
Valid pragmas are `@prettier` and `@format`.
## `--insert-pragma`
Insert a `@format` pragma to the top of formatted files when pragma is absent.
Works well when used in tandem with `--require-pragma`.
## `--list-different`
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
prettier --single-quote --list-different "src/**/*.js"
```
## `--no-config`
Do not look for a configuration file. The default settings will be used.
## `--config-precedence`
Defines how config file should be evaluated in combination of CLI options.
**cli-override (default)**
CLI options take precedence over config file
**file-override**
Config file take precedence over CLI options
**prefer-file**
If a config file is found will evaluate it and ignore other CLI options. If no config file is found CLI options will evaluate as normal.
This option adds support to editor integrations where users define their default configuration but want to respect project specific configuration.
## `--with-node-modules`
Prettier CLI will ignore files located in `node_modules` directory. To opt-out from this behavior use `--with-node-modules` flag.
## `--write`
This rewrites all processed files in place. This is comparable to the `eslint --fix` workflow.

16
docs/comparison.md Normal file
View File

@ -0,0 +1,16 @@
---
id: comparison
title: Prettier vs. Linters
---
## How does it compare to ESLint/TSLint/stylelint, etc.?
Linters have two categories of rules:
**Formatting rules**: eg: [max-len](http://eslint.org/docs/rules/max-len), [no-mixed-spaces-and-tabs](http://eslint.org/docs/rules/no-mixed-spaces-and-tabs), [keyword-spacing](http://eslint.org/docs/rules/keyword-spacing), [comma-style](http://eslint.org/docs/rules/comma-style)...
Prettier alleviates the need for this whole category of rules! Prettier is going to reprint the entire program from scratch in a consistent way, so it's not possible for the programmer to make a mistake there anymore :)
**Code-quality rules**: eg [no-unused-vars](http://eslint.org/docs/rules/no-unused-vars), [no-extra-bind](http://eslint.org/docs/rules/no-extra-bind), [no-implicit-globals](http://eslint.org/docs/rules/no-implicit-globals), [prefer-promise-reject-errors](http://eslint.org/docs/rules/prefer-promise-reject-errors)...
Prettier does nothing to help with those kind of rules. They are also the most important ones provided by linters as they are likely to catch real bugs with your code!

85
docs/configuration.md Normal file
View File

@ -0,0 +1,85 @@
---
id: configuration
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.
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.
The options to the configuration file are the same the [API options](options.md).
## Basic Configuration
JSON:
```json
// .prettierrc
{
"printWidth": 100,
"parser": "flow"
}
```
YAML:
```yaml
# .prettierrc
printWidth: 100
parser: flow
```
## Configuration Overrides
Prettier borrows eslint's [override format](http://eslint.org/docs/user-guide/configuring#example-configuration).
This allows you to apply configuration to specific files.
JSON:
```json
{
"semi": false,
"overrides": [{
"files": "*.test.js",
"options": {
"semi": true
}
}]
}
```
YAML:
```yaml
semi: false
overrides:
- files: "*.test.js"
options:
semi: true
```
`files` is required for each override, and may be a string or array of strings.
`excludeFiles` may be optionally provided to exclude files for a given rule, and may also be a string or array of strings.
To get prettier to format its own `.prettierrc` file, you can do:
```json
{
"overrides": [{
"files": ".prettierrc",
"options": { "parser": "json" }
}]
}
```
For more information on how to use the CLI to locate a file, see the [CLI](cli.md) section.
## Configuration Schema
If you'd like a JSON schema to validate your configuration, one is available here: http://json.schemastore.org/prettierrc.

View File

@ -3,7 +3,6 @@ id: editors
title: Editor Integration
---
## Atom
Atom users can simply install the [prettier-atom](https://github.com/prettier/prettier-atom) package and use
@ -16,7 +15,7 @@ for on-demand formatting.
## Vim
Vim users can simply install either [sbdchd](https://github.com/sbdchd)/[neoformat](https://github.com/sbdchd/neoformat), [w0rp](https://github.com/w0rp)/[ale](https://github.com/w0rp/ale), or [prettier](https://github.com/prettier)/[vim-prettier](https://github.com/prettier/vim-prettier), for more details see [this directory](https://github.com/prettier/prettier/tree/master/editors/vim).
Vim users can simply install either [sbdchd](https://github.com/sbdchd)/[neoformat](https://github.com/sbdchd/neoformat), [w0rp](https://github.com/w0rp)/[ale](https://github.com/w0rp/ale), or [prettier](https://github.com/prettier)/[vim-prettier](https://github.com/prettier/vim-prettier), for more details see [the vim setup guide](vim.md).
## Visual Studio Code
@ -37,6 +36,4 @@ the [JsPrettier](https://packagecontrol.io/packages/JsPrettier) plug-in.
## JetBrains WebStorm, PHPStorm, PyCharm...
See the [WebStorm
guide](https://github.com/jlongster/prettier/tree/master/editors/webstorm/README.md).
See the [WebStorm setup guide](webstorm.md).

38
docs/eslint.md Normal file
View File

@ -0,0 +1,38 @@
---
id: eslint
title: Integrating with ESLint
---
If you are using ESLint, integrating Prettier to your workflow is straightforward:
Just add Prettier as an ESLint rule using [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier).
```js
yarn add --dev prettier eslint-plugin-prettier
// .eslintrc.json
{
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
}
```
We also recommend that you use [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) to disable all the existing formatting rules. It's a one liner that can be added on-top of any existing ESLint configuration.
```
$ yarn add --dev eslint-config-prettier
```
.eslintrc.json:
```json
{
"extends": [
"prettier"
]
}
```

66
docs/ignore.md Normal file
View File

@ -0,0 +1,66 @@
---
id: ignore
title: Ignoring Code
---
Prettier offers an escape hatch to ignore a block of code from being formatted.
## JavaScript
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
)
```
## JSX
```jsx
<div>
{/* prettier-ignore */}
<span ugly format='' />
</div>;
```
## CSS
```css
/* prettier-ignore */
.my ugly rule
{
}
```
## Markdown
```markdown
<!-- prettier-ignore -->
Do not format this
```

60
docs/index.md Normal file
View File

@ -0,0 +1,60 @@
---
id: index
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/)
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))
Prettier takes your code and reprints it from scratch by taking the line length into account.
For example, take the following code:
```js
foo(arg1, arg2, arg3, arg4);
```
It fits in a single line so it's going to stay as is. However, we've all run into this situation:
```js
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
```
Suddenly our previous format for calling function breaks down because this is too long. Prettier is going to do the painstaking work of reprinting it like that for you:
```js
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);
```
Prettier enforces a consistent code **style** (i.e. code formatting that won't affect the AST) across your entire codebase because it disregards the original styling[\*](#footnotes) by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.
If you want to learn more, these two conference talks are great introductions:
[![](https://cloud.githubusercontent.com/assets/197597/24886367/dda8a6f0-1e08-11e7-865b-22492450f10f.png)](https://www.youtube.com/watch?v=hkfBvpEfWdA)
[![](https://cloud.githubusercontent.com/assets/197597/24886368/ddacd6f8-1e08-11e7-806a-9febd23cbf47.png)](https://www.youtube.com/watch?v=0Q4kUNx85_4")
#### Footnotes
\* _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

27
docs/install.md Normal file
View File

@ -0,0 +1,27 @@
---
id: install
title: Install
---
Install with `yarn`:
```
yarn add prettier --dev --exact
```
You can install it globally if you like:
```
yarn global add prettier
```
*We're using `yarn` but you can use `npm` if you like:*
```
npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier
```
> We recommend pinning an exact version of prettier in your `package.json`
> as we introduce stylistic changes in patch releases.

18
docs/language-support.md Normal file
View File

@ -0,0 +1,18 @@
---
id: language-support
title: Language Support
---
Prettier attempts to support all JavaScript language features,
including non-standardized ones. By default it uses the
[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
`parser` API or `--parser` CLI [option](options.md).
All of JSX and Flow syntax is supported. In fact, the test suite in
`tests/flow` *is* the entire Flow test suite and they all pass.
Prettier also supports [TypeScript](https://www.typescriptlang.org/), CSS, [Less](http://lesscss.org/), [SCSS](http://sass-lang.com), [JSON](http://json.org/), [GraphQL](http://graphql.org/), and [Markdown](http://commonmark.org).
The minimum version of TypeScript supported is 2.1.3 as it introduces the ability to have leading `|` for type definitions which prettier outputs.

View File

@ -6,11 +6,13 @@ title: Options
Prettier ships with a handful of customizable format options, usable in both the CLI and API.
## Print Width
Specify the length of line that the printer will wrap on.
Specify the line length that the printer will wrap on.
**We strongly recommend against using more than 80 columns.**
Prettier works by cramming 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.
> **For readability we recommend against using more than 80 characters:**
>
>In code styleguides, maximum line length rules are often set to 100 or 120. However, when humans write code, they don't strive to reach the maximum number of columns on every line. Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends up well below the maximum.
>
> Prettier, on the other hand, strives to fit the most code into every line. With the print width set to 120, prettier may produce overly compact, or otherwise undesirable code.
Default | CLI Override | API Override
--------|--------------|-------------
@ -46,7 +48,6 @@ Default | CLI Override | API Override
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'`.
@ -55,17 +56,17 @@ Default | CLI Override | API Override
`false` | `--single-quote` | `singleQuote: <bool>`
## Trailing Commas
Print trailing commas wherever possible.
Print trailing commas wherever possible when multi-line. (A single-line array,
for example, never gets trailing commas.)
Valid options:
* `"none"` - No trailing commas.
* `"es5"` - Trailing commas where valid in ES5 (objects, arrays, etc.)
* `"all"` - Trailing commas wherever possible (function arguments). This requires node 8 or a [transform](https://babeljs.io/docs/plugins/syntax-trailing-function-commas/).
* `"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
--------|--------------|-------------
`"none"` | `--trailing-comma <none,es5,all>` | `trailingComma: "<none,es5,all>"`
`"none"` | <code>--trailing-comma <none&#124;es5&#124;all></code> | <code>trailingComma: "<none&#124;es5&#124;all>"</code>
## Bracket Spacing
Print spaces between brackets in object literals.
@ -79,7 +80,7 @@ Default | CLI Override | API Override
`true` | `--no-bracket-spacing` | `bracketSpacing: <bool>`
## JSX Brackets
Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line.
Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
Default | CLI Override | API Override
--------|--------------|-------------
@ -89,7 +90,6 @@ Default | CLI Override | API Override
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.
@ -106,21 +106,21 @@ Specify which parser to use.
Both the `babylon` and `flow` parsers support the same set of JavaScript features (including Flow). Prettier automatically infers the parser from the input file path, so you shouldn't have to change this setting.
Built-in parsers:
* [`babylon`](https://github.com/babel/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/vtrushin/json-to-ast) _Since v1.5.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](#custom-parser-api) are also supported. _Since v1.5.0_
[Custom parsers](api.md#custom-parser-api) are also supported. _Since v1.5.0_
Default | CLI Override | API Override
--------|--------------|-------------
`babylon` | `--parser <string>` or `--parser ./my-parser` | `parser: "<string>"` or `parser: require("./my-parser")`
`babylon` | `--parser <string>`<br />`--parser ./my-parser` | `parser: "<string>"`<br />`parser: require("./my-parser")`
## Filepath
## FilePath
Specify the input filepath. This will be used to do parser inference.
For example, the following will use `postcss` parser:
@ -156,13 +156,12 @@ or
Default | CLI Override | API Override
--------|--------------|-------------
`false` | `--require-pragma` | `requirePragma: <bool>`
<!--
## Insert Pragma
Prettier can insert a special @format marker at the top of files specifying that the file has been formatted
with prettier. This works well when used in tandem with the `--require-pragma` option. If there is already a
docblock at the top of the file then this option will add a newline to it with the @format marker.
with prettier. This works well when used in tandem with the `--require-pragma` option. If there is already a
docblock at the top of the file then this option will add a newline to it with the @format marker.
Default | CLI Override | API Override
--------|--------------|-------------
`false` | `--insert-pragma` | `insertPragma: <bool>`
-->

67
docs/precommit.md Normal file
View File

@ -0,0 +1,67 @@
---
id: precommit
title: Pre-commit Hook
---
You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via `git add` before you commit.
## Option 1. [lint-staged](https://github.com/okonet/lint-staged)
Install it along with [husky](https://github.com/typicode/husky):
```bash
yarn add lint-staged husky --dev
```
and add this config to your `package.json`:
```json
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.{js,json,css}": [
"prettier --write",
"git add"
]
}
}
```
There is a limitation where if you stage specific lines this approach will stage the whole file after regardless. See this [issue](https://github.com/okonet/lint-staged/issues/62) for more info.
See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.
## Option 2. [pre-commit](https://github.com/pre-commit/pre-commit)
Copy the following config into your `.pre-commit-config.yaml` file:
```yaml
- repo: https://github.com/prettier/prettier
sha: '' # Use the sha or tag you want to point at
hooks:
- id: prettier
```
Find more info from [here](http://pre-commit.com).
## Option 3. bash script
Alternately you can save this script as `.git/hooks/pre-commit` and give it execute permission:
```bash
#!/bin/sh
jsfiles=$(git diff --cached --name-only --diff-filter=ACM "*.js" "*.jsx" | tr '\n' ' ')
[ -z "$jsfiles" ] && exit 0
# Prettify all staged .js files
echo "$jsfiles" | xargs ./node_modules/.bin/prettier --write
# Add back the modified/prettified files to staging
echo "$jsfiles" | xargs git add
exit 0
```

View File

@ -1,6 +1,9 @@
# Rationale
---
id: rationale
title: Rationale
---
Prettier is an opinionated JavaScript formatter. This document gives a rationale behind those opinions.
Prettier is an opinionated code formatter. This document gives a rationale behind those opinions.
## What prettier is concerned about
@ -18,12 +21,6 @@ The first requirement of prettier is to output valid JavaScript and code that ha
This is the core of prettier. The formatting rules are going to be explained in a later section.
### Semi-colons
...TBD...
### Strings
Prettier enforces double quotes by default, but has a setting for enforcing single quotes instead. There are two exceptions:
@ -63,6 +60,11 @@ Here are a few examples of things that are out of scope for prettier:
- Turning `?:` into `if then else`.
<!--
### Semi-colons
...TBD...
## Formatting rules
... TBD ...
@ -81,3 +83,4 @@ Here are a few examples of things that are out of scope for prettier:
### String concatenation
-->

42
docs/related-projects.md Normal file
View File

@ -0,0 +1,42 @@
---
id: related-projects
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`
## 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`
## 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.
## Forks
- [`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)

27
docs/technical-details.md Normal file
View File

@ -0,0 +1,27 @@
---
id: technical-details
title: Technical Details
---
This printer is a fork of
[recast](https://github.com/benjamn/recast)'s printer with its
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.
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.
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 concatenation 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.
More (rough) details can be found in
[commands.md](https://github.com/prettier/prettier/commands.md).

View File

@ -1,248 +0,0 @@
---
id: usage
title: Usage
---
## Install
```
yarn add prettier --dev
```
You can install it globally if you like:
```
yarn global add prettier
```
*We're using `yarn` but you can use `npm` if you like:*
```
npm install [--save-dev|--global] prettier
```
## CLI
Run Prettier through the CLI with this script. Run it without any
arguments to see the [options](#options).
To format a file in-place, use `--write`. You may want to consider
committing your code before doing that, just in case.
```bash
prettier [opts] [filename ...]
```
In practice, this may look something like:
```bash
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
```
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.
Prettier CLI will ignore files located in `node_modules` directory. To opt-out from this behavior use `--with-node-modules` flag.
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`.
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
prettier --single-quote --list-different "src/**/*.js"
```
## ESLint
If you are using ESLint, integrating Prettier to your workflow is straightforward:
Just add Prettier as an ESLint rule using [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier).
```js
yarn add --dev prettier eslint-plugin-prettier
// .eslintrc.json
{
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
}
```
We also recommend that you use [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) to disable all the existing formatting rules. It's a one liner that can be added on-top of any existing ESLint configuration.
```
$ yarn add --dev eslint-config-prettier
```
.eslintrc.json:
```json
{
"extends": [
"prettier"
]
}
```
## Pre-commit Hook
You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via `git add` before you commit.
#### Option 1. [lint-staged](https://github.com/okonet/lint-staged)
Install it along with [husky](https://github.com/typicode/husky):
```bash
yarn add lint-staged husky --dev
```
and add this config to your `package.json`:
```json
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [
"prettier --write",
"git add"
]
}
}
```
See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.
#### Option 2. [pre-commit](https://github.com/pre-commit/pre-commit)
Copy the following config into your `.pre-commit-config.yaml` file:
```yaml
- repo: https://github.com/prettier/prettier
sha: '' # Use the sha or tag you want to point at
hooks:
- id: prettier
```
Find more info from [here](https://github.com/awebdeveloper/pre-commit-prettier).
#### Option 3. bash script
Alternately you can save this script as `.git/hooks/pre-commit` and give it execute permission:
```bash
#!/bin/sh
jsfiles=$(git diff --cached --name-only --diff-filter=ACM | grep '\.jsx\?$' | tr '\n' ' ')
[ -z "$jsfiles" ] && exit 0
# Prettify all staged .js files
echo "$jsfiles" | xargs ./node_modules/.bin/prettier --write
# Add back the modified/prettified files to staging
echo "$jsfiles" | xargs git add
exit 0
```
## API
The API has three functions: `format`, `check`, and `formatWithCursor`.
```js
const prettier = require("prettier");
```
### `prettier.format(source [, options])`
`format` is used to format text using Prettier. [Options](#options) may be provided to override the defaults.
```js
prettier.format("foo ( );", { semi: false });
// -> "foo()"
```
### `prettier.check(source [, options])`
`check` checks to see if the file has been formatted with Prettier given those options and returns a `Boolean`.
This is similar to the `--list-different` parameter in the CLI and is useful for running Prettier in CI scenarios.
### `prettier.formatWithCursor(source [, options])`
`formatWithCursor` both formats the code, and translates a cursor position from unformatted code to formatted code.
This is useful for editor integrations, to prevent the cursor from moving when code is formatted.
The `cursorOffset` option should be provided, to specify where the cursor is. This option cannot be used with `rangeStart` and `rangeEnd`.
```js
prettier.formatWithCursor(" 1", { cursorOffset: 2 });
// -> { formatted: '1;\n', cursorOffset: 1 }
```
### Custom Parser API
If you need to make modifications to the AST (such as codemods), or you want to provide an alternate parser, you can do so by setting the `parser` option to a function. The function signature of the parser function is:
```js
(text: string, parsers: object, options: object) => AST;
```
Prettier's built-in parsers are exposed as properties on the `parsers` argument.
```js
prettier.format("lodash ( )", {
parser(text, { babylon }) {
const ast = babylon(text);
ast.program.body[0].expression.callee.name = "_";
return ast;
}
});
// -> "_();\n"
```
The `--parser` CLI option may be a path to a node.js module exporting a parse function.
## 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
)
```

View File

@ -1,53 +1,31 @@
# Vim Prettier
<details>
<summary><strong>Table of Contents</strong></summary>
- [Vim and Prettier integration](#vim-and-prettier-integration)
* [Neoformat](#neoformat)
+ [Neoformat - Installation](#neoformat---installation)
+ [Neoformat - Usage](#neoformat---usage)
+ [Neoformat - Other autocmd events](#neoformat---other-autocmd-events)
+ [Neoformat - Customizing Prettier](#neoformat---customizing-prettier)
* [vim-prettier](#vim-prettier-1)
+ [vim-prettier - Installation](#vim-prettier---installation)
+ [vim-prettier - Usage](#vim-prettier---usage)
+ [vim-prettier - Configuration](#vim-prettier---configuration)
* [ALE](#ale)
+ [ALE - Installation](#ale---installation)
+ [ALE - Usage](#ale---usage)
+ [ALE - Configuration](#ale---configuration)
* [Running manually](#running-manually)
+ [Running Prettier manually in Vim](#running-prettier-manually-in-vim)
</details>
--------------------------------------------------------------------------------
## Vim and Prettier integration
---
id: vim
title: Vim Setup
---
Vim users can simply install either [sbdchd](https://github.com/sbdchd)/[neoformat](https://github.com/sbdchd/neoformat), [w0rp](https://github.com/w0rp)/[ale](https://github.com/w0rp/ale), or [prettier](https://github.com/prettier)/[vim-prettier](https://github.com/prettier/vim-prettier).
--------------------------------------------------------------------------------
### Neoformat
## Neoformat
#### Neoformat - Installation
### Neoformat - Installation
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'
```
#### Neoformat - Usage
### Neoformat - Usage
Then make Neoformat run on save:
```vim
```
autocmd BufWritePre *.js Neoformat
```
#### Neoformat - Other `autocmd` events
### Neoformat - 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:
@ -56,17 +34,17 @@ You can also make Vim format your code more frequently, by setting an `autocmd`
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.
#### Neoformat - Customizing Prettier
### Neoformat - Customizing Prettier
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:
```vim
```
autocmd FileType javascript setlocal formatprg=prettier\ --stdin\ --parser\ flow\ --single-quote\ --trailing-comma\ es5
" Use formatprg when available
let g:neoformat_try_formatprg = 1
@ -76,21 +54,21 @@ Each space in prettier options should be escaped with `\`.
--------------------------------------------------------------------------------
### vim-prettier
## vim-prettier
![vim-prettier](https://raw.githubusercontent.com/prettier/vim-prettier/master/media/vim-prettier.gif?raw=true "vim-prettier")
#### vim-prettier - Installation
### vim-prettier - Installation
Install with [vim-plug](https://github.com/junegunn/vim-plug), assumes node and yarn|npm installed globally.
By default it will auto format **javascript**, **typescript**, **less**, **scss** and **css** files that have "@format" annotation in the header of the file.
```vim
```
" post install (yarn install | npm install) then load plugin only for editing supported files
Plug 'prettier/vim-prettier', {
\ 'do': 'npm install',
\ 'for': ['javascript', 'typescript', 'css', 'less', 'scss'] }
Plug 'prettier/vim-prettier', {
\ 'do': 'npm install',
\ 'for': ['javascript', 'typescript', 'css', 'less', 'scss'] }
```
If using other vim plugin managers or doing manual setup make sure to have `prettier` installed globally or go to your vim-prettier directory and either do `npm install` or `yarn install`
@ -103,41 +81,41 @@ vim-prettier executable resolution:
2. Look for a global prettier installation
3. Use locally installed vim-prettier prettier executable
#### vim-prettier - Usage
### vim-prettier - Usage
Prettier by default will run on auto save but can also be manualy triggered by:
```vim
```
<Leader>p
```
or
```vim
or
```
:Prettier
```
If your are on vim 8+ you can also trigger async formatting by:
```vim
```
:PrettierAsync
```
#### vim-prettier - Configuration
### vim-prettier - Configuration
Disable auto formatting of files that have "@format" tag
Disable auto formatting of files that have "@format" tag
```vim
```
let g:prettier#autoformat = 0
```
The command `:Prettier` by default is synchronous but can also be forced async
```vim
```
let g:prettier#exec_cmd_async = 1
```
By default parsing errors will open the quickfix but can also be disabled
```vim
```
let g:prettier#quickfix_enabled = 0
```
@ -146,21 +124,21 @@ First disable the default autoformat, then update to your own custom behaviour
Running before saving sync:
```vim
```
let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.css,*.scss,*.less Prettier
```
Running before saving async (vim 8+):
```vim
```
let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.css,*.scss,*.less PrettierAsync
```
Running before saving, changing text or leaving insert mode:
Running before saving, changing text or leaving insert mode:
```vim
```
" when running at every change you may want to disable quickfix
let g:prettier#quickfix_enabled = 0
@ -168,9 +146,9 @@ let g:prettier#autoformat = 0
autocmd BufWritePre,TextChanged,InsertLeave *.js,*.css,*.scss,*.less PrettierAsync
```
**Vim-prettier default formatting settings are different from the prettier defaults, but they can be configured**
**Vim-prettier default formatting settings are different from the prettier defaults, but they can be configured**
```vim
```
" max line lengh that prettier will wrap on
g:prettier#config#print_width = 80
@ -184,13 +162,13 @@ g:prettier#config#use_tabs = 'false'
g:prettier#config#semi = 'true'
" single quotes over double quotes
g:prettier#config#single_quote = 'true'
g:prettier#config#single_quote = 'true'
" print spaces between brackets
g:prettier#config#bracket_spacing = 'false'
g:prettier#config#bracket_spacing = 'false'
" put > on the last line instead of new line
g:prettier#config#jsx_bracket_same_line = 'true'
g:prettier#config#jsx_bracket_same_line = 'true'
" none|es5|all
g:prettier#config#trailing_comma = 'all'
@ -201,9 +179,9 @@ g:prettier#config#parser = 'flow'
```
--------------------------------------------------------------------------------
### ALE
## ALE
#### ALE - Installation
### ALE - Installation
[ALE](https://github.com/w0rp/ale) is an asynchronous lint engine for Vim that
also has the ability to run formatters over code, including Prettier. For ALE
@ -213,17 +191,17 @@ asynchronous abilities that both Vim 8 and Neovim provide.
The best way to install ALE is with your favourite plugin manager for Vim, such
as [Vim-Plug](https://github.com/junegunn/vim-plug):
```vim
```
Plug 'w0rp/ale'
```
You can find further instructions on the [ALE repository](https://github.com/w0rp/ale#3-installation).
#### ALE - Usage
### ALE - Usage
Once you've installed ALE you need to enable the Prettier fixer:
```vim
```
let g:ale_fixers = {}
let g:ale_fixers['javascript'] = ['prettier']
```
@ -233,39 +211,39 @@ ALE will first use the Prettier installed locally (in
You can then run `:ALEFix` in a JavaScript file to run Prettier.
#### ALE - Configuration
### ALE - Configuration
To have ALE run `prettier` when you save a file you can tell ALE to run
automatically:
```vim
```
let g:ale_fix_on_save = 1
```
To configure Prettier, you can set `g:ale_javascript_prettier_options`. This is
a string that will be passed through to the Prettier command line tool:
```vim
```
let g:ale_javascript_prettier_options = '--single-quote --trailing-comma es5'
```
If you use Prettier config files, you must set
`g:ale_javascript_prettier_use_local_config` to have ALE respect them:
```vim
```
let g:ale_javascript_prettier_use_local_config = 1
```
--------------------------------------------------------------------------------
### Running manually
## Running manually
#### Running Prettier manually in Vim
### 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>
```

18
docs/watching-files.md Normal file
View File

@ -0,0 +1,18 @@
---
id: watching-files
title: Watching For Changes
---
If you prefer to have prettier watch for changes from the command line you can use a package like [onchange](https://www.npmjs.com/package/onchange). For example:
```
npx onchange '**/*.js' -- npx prettier --write {{changed}}
```
or add the following to your `package.json`
```json
"scripts": {
"prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}"
},
```

View File

@ -1,3 +1,8 @@
---
id: webstorm
title: Webstorm Setup
---
## Configure External Tool
https://blog.jetbrains.com/webstorm/2016/08/using-external-tools/
@ -11,7 +16,7 @@ Go to *File | Settings | Tools | External Tools* for Windows and Linux or *WebSt
* **Parameters** set `--write [other opts] $FilePathRelativeToProjectRoot$`
* **Working directory** set `$ProjectFileDir$`
![Example](./with-prettier.png)
![Example](../../images/webstorm/with-prettier.png)
### Process directories
@ -42,4 +47,4 @@ Go to *File | Settings | Tools | File Watchers* for Windows and Linux or *WebSto
* **Working directory** set `$ProjectFileDir$`
* **Immediate file synchronization**: Uncheck to reformat on Save only (otherwise code will jump around while you type).
![Example](./prettier-file-wacther.png)
![Example](../../images/webstorm/prettier-file-wacther.png)

View File

@ -5,10 +5,10 @@ title: Why Prettier?
## Building and enforcing a style guide
By far the biggest reason for adopting prettier is to stop all the ongoing debates over styles. It is generally accepted that having a common style guide is valuable for a project & team but getting there is a very painful and unrewarding process. People get very emotional around particular ways of writing code and nobody likes spending time writing and receiving nits.
By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. It is generally accepted that having a common style guide is valuable for a project and team but getting there is a very painful and unrewarding process. People get very emotional around particular ways of writing code and nobody likes spending time writing and receiving nits.
- “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.”
- “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.”
@ -26,7 +26,7 @@ Prettier is usually introduced by people with experience in the current codebase
## 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.
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”
@ -34,26 +34,27 @@ What usually happens once people are using prettier is that they realize that th
## 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.
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.”
- “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.
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.
- “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 have a non trivial impact.
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.”

View File

@ -1 +0,0 @@
See https://github.com/prettier/prettier-atom

View File

@ -1,3 +0,0 @@
This package has been moved to https://github.com/prettier/prettier-emacs.
Please, update your configuration to use the new location.

View File

@ -62,7 +62,6 @@
"eslint-plugin-prettier": "2.1.2",
"eslint-plugin-react": "7.1.0",
"jest": "21.1.0",
"markdown-toc": "1.1.0",
"mkdirp": "0.5.1",
"prettier": "1.7.3",
"rimraf": "2.6.2",
@ -87,6 +86,6 @@
"test-integration": "jest tests_integration",
"lint": "cross-env EFF_NO_LINK_RULES=true eslint . --format node_modules/eslint-friendly-formatter",
"build": "node ./scripts/build/build.js",
"toc": "node ./scripts/table-of-contents.js"
"check-deps": "node ./scripts/check-deps.js"
}
}

19
scripts/check-deps.js Normal file
View File

@ -0,0 +1,19 @@
"use strict";
const pkg = require("../package.json");
const chalk = require("chalk");
validateDependencyObject(pkg.dependencies);
validateDependencyObject(pkg.devDependencies);
function validateDependencyObject(object) {
Object.keys(object).forEach(key => {
if (object[key][0] === "^" || object[key][0] === "~") {
console.error(
chalk.red("error"),
`Dependency "${chalk.bold.red(key)}" should be pinned.`
);
process.exitCode = 1;
}
});
}

View File

@ -1,13 +0,0 @@
#!/usr/bin/env node
"use strict";
const fs = require("fs");
const toc = require("markdown-toc");
const path = require("path");
const readmeFilename = path.resolve(__dirname, "../README.md");
const oldReadme = fs.readFileSync(readmeFilename, "utf8");
const newReadme = toc.insert(oldReadme, { maxdepth: 3, bullets: ["*", "+"] });
fs.writeFileSync(readmeFilename, newReadme);

View File

@ -2,6 +2,8 @@
const runPrettier = require("../runPrettier");
expect.addSnapshotSerializer(require("../path-serializer"));
describe("support relative paths", () => {
runPrettier("cli/ignore-relative-path", [
"./shouldNotBeIgnored.js",

View File

@ -2,6 +2,8 @@
const runPrettier = require("../runPrettier");
expect.addSnapshotSerializer(require("../path-serializer"));
describe("multiple patterns", () => {
runPrettier("cli/multiple-patterns", [
"directory/**/*.js",

View File

@ -2,6 +2,8 @@
const runPrettier = require("../runPrettier");
expect.addSnapshotSerializer(require("../path-serializer"));
describe("ignores node_modules by default", () => {
runPrettier("cli/with-node-modules", ["**/*.js", "-l"]).test({
status: 1

View File

@ -38,10 +38,8 @@ class Footer extends React.Component {
</a>
<div>
<h5>Docs</h5>
<a href={this.url("/why-prettier.html")}>Why Prettier?</a>
<a href={this.url("/usage.html")}>Usage</a>
<a href={this.url("/options.html")}>Options</a>
<a href={this.url("/editors.html")}>Editor Integeration</a>
<a href={this.url("/index.html")}>About</a>
<a href={this.url("/install.html")}>Usage</a>
</div>
<div>
<h5>Community</h5>
@ -70,6 +68,8 @@ class Footer extends React.Component {
<h5>More</h5>
{/*<a href={this.props.config.baseUrl + "blog"}>Blog</a>*/}
<a href={this.props.config.githubUrl}>GitHub</a>
<a href={this.props.config.githubUrl + "/releases"}>Releases</a>
<a href={this.props.config.githubUrl + "/issues"}>Issues</a>
<GithubButton config={this.props.config} />
</div>
</section>

View File

@ -28,5 +28,13 @@
"[GraphQL](http://graphql.org/)",
"[GraphQL Schemas](http://graphql.org/learn/schema/)"
]
},
{
"name": "Markdown",
"image": "/images/markdown-128px.png",
"variants": [
"[CommonMark](http://commonmark.org/)",
"[GitHub Flavored Markdown](https://github.github.com/gfm/)"
]
}
]

View File

@ -50,7 +50,7 @@ class HomeSplash extends React.Component {
<div className="pluginRowBlock">
<Button href="/playground/">Try It Out</Button>
<Button
href={"/docs/" + this.props.language + "/usage.html"}
href={"/docs/" + this.props.language + "/install.html"}
>
Get Started
</Button>

View File

@ -1,5 +1,33 @@
{
"docs": {
"Prettier": ["why-prettier", "usage", "options", "editors"]
"About": [
"index",
"why-prettier",
"comparison",
"language-support",
"rationale"
],
"Usage": [
"install",
"cli",
"precommit",
"watching-files",
"eslint",
"api",
"ignore"
],
"Configuring Prettier": [
"options",
"configuration"
],
"Editors": [
"editors",
"webstorm",
"vim"
],
"Misc": [
"technical-details",
"related-projects"
]
}
}

View File

@ -21,7 +21,8 @@ const siteConfig = {
/* base url for editing docs, usage example: editUrl + 'en/doc1.md' */
editUrl: `${GITHUB_URL}/edit/master/docs/`,
headerLinks: [
{ doc: "why-prettier", label: "Docs" },
{ doc: "index", label: "About" },
{ doc: "install", label: "Usage" },
{ href: "/playground/", label: "Playground" },
{ href: GITHUB_URL, label: "GitHub" }
],

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

Before

Width:  |  Height:  |  Size: 240 KiB

After

Width:  |  Height:  |  Size: 240 KiB

View File

Before

Width:  |  Height:  |  Size: 169 KiB

After

Width:  |  Height:  |  Size: 169 KiB

143
yarn.lock
View File

@ -75,12 +75,6 @@ ansi-escapes@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
ansi-red@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
dependencies:
ansi-wrap "0.1.0"
ansi-regex@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@ -105,10 +99,6 @@ ansi-styles@^3.2.0:
dependencies:
color-convert "^1.9.0"
ansi-wrap@0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
anymatch@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
@ -139,13 +129,6 @@ argparse@^1.0.7:
dependencies:
sprintf-js "~1.0.2"
argparse@~0.1.15:
version "0.1.16"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-0.1.16.tgz#cfd01e0fbba3d6caed049fbd758d40f65196f57c"
dependencies:
underscore "~1.7.0"
underscore.string "~2.4.0"
argv@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/argv/-/argv-0.0.2.tgz#ecbd16f8949b157183711b1bda334f37840185ab"
@ -230,10 +213,6 @@ asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
autolinker@~0.15.0:
version "0.15.3"
resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.15.3.tgz#342417d8f2f3461b14cf09088d5edf8791dc9832"
aws-sign2@~0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@ -1118,10 +1097,6 @@ codecov@2.2.0:
request "2.79.0"
urlgrey "0.4.4"
coffee-script@^1.12.4:
version "1.12.7"
resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.7.tgz#c05dae0cb79591d05b3070a8433a98c9a89ccc53"
collapse-white-space@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
@ -1156,7 +1131,7 @@ concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
concat-stream@^1.5.2, concat-stream@^1.6.0:
concat-stream@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
dependencies:
@ -1359,10 +1334,6 @@ detect-newline@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
diacritics-map@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/diacritics-map/-/diacritics-map-0.1.0.tgz#6dfc0ff9d01000a2edf2865371cac316e94977af"
diff@3.2.0, diff@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
@ -1657,12 +1628,6 @@ expect@^21.2.1:
jest-message-util "^21.2.1"
jest-regex-util "^21.2.0"
extend-shallow@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
dependencies:
is-extendable "^0.1.0"
extend@^3.0.0, extend@~3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
@ -1769,7 +1734,7 @@ flow-parser@0.51.1:
version "0.51.1"
resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.51.1.tgz#145d3bdce13857a72ec72938a9a700b534055b32"
for-in@^1.0.1, for-in@^1.0.2:
for-in@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@ -1931,16 +1896,6 @@ graphql@0.10.5:
dependencies:
iterall "^1.1.0"
gray-matter@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-2.1.1.tgz#3042d9adec2a1ded6a7707a9ed2380f8a17a430e"
dependencies:
ansi-red "^0.1.1"
coffee-script "^1.12.4"
extend-shallow "^2.0.1"
js-yaml "^3.8.1"
toml "^2.3.2"
growly@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@ -2200,7 +2155,7 @@ is-equal-shallow@^0.1.3:
dependencies:
is-primitive "^2.0.0"
is-extendable@^0.1.0, is-extendable@^0.1.1:
is-extendable@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@ -2339,10 +2294,6 @@ isobject@^2.0.0:
dependencies:
isarray "1.0.0"
isobject@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@ -2674,7 +2625,7 @@ js-tokens@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
js-yaml@^3.7.0, js-yaml@^3.8.1, js-yaml@^3.8.4, js-yaml@^3.9.0:
js-yaml@^3.7.0, js-yaml@^3.8.4, js-yaml@^3.9.0:
version "3.9.1"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.9.1.tgz#08775cebdfdd359209f0d2acd383c8f86a6904a0"
dependencies:
@ -2780,12 +2731,6 @@ lazy-cache@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
lazy-cache@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264"
dependencies:
set-getter "^0.1.0"
lcid@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
@ -2803,15 +2748,6 @@ levn@^0.3.0, levn@~0.3.0:
prelude-ls "~1.1.2"
type-check "~0.3.2"
list-item@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/list-item/-/list-item-1.1.1.tgz#0c65d00e287cb663ccb3cb3849a77e89ec268a56"
dependencies:
expand-range "^1.8.1"
extend-shallow "^2.0.1"
is-number "^2.1.0"
repeat-string "^1.5.2"
load-json-file@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@ -2908,27 +2844,6 @@ markdown-escapes@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.1.tgz#1994df2d3af4811de59a6714934c2b2292734518"
markdown-link@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/markdown-link/-/markdown-link-0.1.1.tgz#32c5c65199a6457316322d1e4229d13407c8c7cf"
markdown-toc@1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/markdown-toc/-/markdown-toc-1.1.0.tgz#18e47237d89549e9447121e69e2ca853ca2d752a"
dependencies:
concat-stream "^1.5.2"
diacritics-map "^0.1.0"
gray-matter "^2.1.0"
lazy-cache "^2.0.2"
list-item "^1.1.1"
markdown-link "^0.1.1"
minimist "^1.2.0"
mixin-deep "^1.1.3"
object.pick "^1.2.0"
remarkable "^1.7.1"
repeat-string "^1.6.1"
strip-color "^0.1.0"
mem@1.1.0, mem@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
@ -3007,13 +2922,6 @@ minimist@1.2.0, minimist@^1.1.1, minimist@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
mixin-deep@^1.1.3:
version "1.2.0"
resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.2.0.tgz#d02b8c6f8b6d4b8f5982d3fd009c4919851c3fe2"
dependencies:
for-in "^1.0.2"
is-extendable "^0.1.1"
mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@~0.5.0:
version "0.5.1"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@ -3151,12 +3059,6 @@ object.omit@^2.0.0:
for-own "^0.1.4"
is-extendable "^0.1.1"
object.pick@^1.2.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
dependencies:
isobject "^3.0.1"
once@^1.3.0, once@^1.3.3, once@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@ -3682,13 +3584,6 @@ remark-parse@4.0.0:
vfile-location "^2.0.0"
xtend "^4.0.1"
remarkable@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-1.7.1.tgz#aaca4972100b66a642a63a1021ca4bac1be3bff6"
dependencies:
argparse "~0.1.15"
autolinker "~0.15.0"
remove-trailing-separator@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.0.2.tgz#69b062d978727ad14dc6b56ba4ab772fd8d70511"
@ -3697,7 +3592,7 @@ repeat-element@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
repeat-string@^1.5.2, repeat-string@^1.5.4:
version "1.6.1"
resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
@ -3953,12 +3848,6 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
set-getter@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.0.tgz#d769c182c9d5a51f409145f2fba82e5e86e80376"
dependencies:
to-object-path "^0.3.0"
set-immediate-shim@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
@ -4167,10 +4056,6 @@ strip-bom@^2.0.0:
dependencies:
is-utf8 "^0.2.0"
strip-color@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/strip-color/-/strip-color-0.1.0.tgz#106f65d3d3e6a2d9401cac0eb0ce8b8a702b4f7b"
strip-eof@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@ -4294,16 +4179,6 @@ to-fast-properties@^1.0.1, to-fast-properties@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
to-object-path@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
dependencies:
kind-of "^3.0.2"
toml@^2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/toml/-/toml-2.3.2.tgz#5eded5ca42887924949fd06eb0e955656001e834"
tough-cookie@^2.3.2, tough-cookie@~2.3.0:
version "2.3.2"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
@ -4397,14 +4272,6 @@ uid-number@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
underscore.string@~2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-2.4.0.tgz#8cdd8fbac4e2d2ea1e7e2e8097c42f442280f85b"
underscore@~1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209"
unherit@^1.0.4:
version "1.1.0"
resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.0.tgz#6b9aaedfbf73df1756ad9e316dd981885840cd7d"