fix: Proper case for Prettier, JavaScript, TypeScript, GitHub, Less (#3848)

master
Lipis 2018-01-31 11:56:05 +01:00 committed by GitHub
parent 8641a9a9c5
commit 7a7eb17082
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 28 additions and 53 deletions

View File

@ -48,7 +48,7 @@ If you want to learn more, these two conference talks are great introductions:
[![A Prettier Printer by James Long on React Conf 2017](/docs/assets/youtube-cover/a-prettier-printer-by-james-long-on-react-conf-2017.png)](https://www.youtube.com/watch?v=hkfBvpEfWdA)
[![Javascript Code Formatting by Christopher Chedeau on React London 2017](/docs/assets/youtube-cover/javascript-code-formatting-by-christopher-chedeau-on-react-london-2017.png)](https://www.youtube.com/watch?v=0Q4kUNx85_4)
[![JavaScript Code Formatting by Christopher Chedeau on React London 2017](/docs/assets/youtube-cover/javascript-code-formatting-by-christopher-chedeau-on-react-london-2017.png)](https://www.youtube.com/watch?v=0Q4kUNx85_4)
#### Footnotes

View File

@ -5,19 +5,19 @@ title: Rationale
Prettier is an opinionated code formatter. This document gives a rationale behind those opinions.
## What prettier is concerned about
## What Prettier is concerned about
### Consistency
Prettier exists for one purpose: to enforce consistency across your entire project. Not only do we output code with consistent whitespace, prettier will lay out code according to a wrapping algorithm based on a maximum line width. That means that long expressions will be broken up across lines, removing the need for manual layout from the programmer which inevitably leads to inconsistency.
Prettier exists for one purpose: to enforce consistency across your entire project. Not only do we output code with consistent whitespace, Prettier will lay out code according to a wrapping algorithm based on a maximum line width. That means that long expressions will be broken up across lines, removing the need for manual layout from the programmer which inevitably leads to inconsistency.
### Correctness
The first requirement of prettier is to output valid JavaScript and code that has the exact same behavior as before formatting. Please report any JavaScript code where prettier fails to follow these correctness rules — that's a bug which needs to be fixed!
The first requirement of Prettier is to output valid JavaScript and code that has the exact same behavior as before formatting. Please report any JavaScript code where Prettier fails to follow these correctness rules — that's a bug which needs to be fixed!
### Whitespace: indentation and line breaks
This is the core of prettier. The formatting rules are going to be explained in a later section.
This is the core of Prettier. The formatting rules are going to be explained in a later section.
### Strings
@ -34,11 +34,11 @@ Prettier outputs the minimum number of parentheses required to ensure that the b
### Empty lines
It turns out that empty lines are very hard to automatically generate. The approach that prettier takes is to preserve empty lines the way they were in the original source code. The only constraint is that prettier disallows several empty lines in a row. They are collapsed to a single one.
It turns out that empty lines are very hard to automatically generate. The approach that Prettier takes is to preserve empty lines the way they were in the original source code. The only constraint is that Prettier disallows several empty lines in a row. They are collapsed to a single one.
### Multi-line objects
It is tempting to collapse an object to a single line if it fits, but there are times when it is better for sibling/cousin keys to stay vertically aligned—see [object lists], [nested configs], [stylesheets], and [keyed methods]. To avoid unfavorable collapsing, prettier simply formats any object as multi-line if it appears as such in the original source code. This is the same strategy used by [elm-format] for multi-line records.
It is tempting to collapse an object to a single line if it fits, but there are times when it is better for sibling/cousin keys to stay vertically aligned—see [object lists], [nested configs], [stylesheets], and [keyed methods]. To avoid unfavorable collapsing, Prettier simply formats any object as multi-line if it appears as such in the original source code. This is the same strategy used by [elm-format] for multi-line records.
[object lists]: https://github.com/prettier/prettier/issues/74#issue-199965534
[nested configs]: https://github.com/prettier/prettier/issues/88#issuecomment-275448346
@ -46,35 +46,10 @@ It is tempting to collapse an object to a single line if it fits, but there are
[keyed methods]: https://github.com/prettier/prettier/pull/495#issuecomment-275745434
[elm-format]: https://github.com/prettier/prettier/issues/74#issuecomment-275621526
## What prettier is _not_ concerned about
## What Prettier is _not_ concerned about
Here are a few examples of things that are out of scope for prettier:
Here are a few examples of things that are out of scope for Prettier:
* Turning single/double quotes into template literals or vice versa.
* Adding/removing `{}` and `return` where they are optional.
* Turning `?:` into `if then else`.
<!--
### Semi-colons
...TBD...
## Formatting rules
... TBD ...
### Function calls
### Method calls
### JSX
### Boolean expressions
### String concatenation
-->

View File

@ -250,10 +250,10 @@ function isSourceElement(opts, node) {
"ExportNamedDeclaration", // Module
"ExportAllDeclaration", // Module
"TypeAlias", // Flow
"InterfaceDeclaration", // Flow, Typescript
"TypeAliasDeclaration", // Typescript
"ExportAssignment", // Typescript
"ExportDeclaration" // Typescript
"InterfaceDeclaration", // Flow, TypeScript
"TypeAliasDeclaration", // TypeScript
"ExportAssignment", // TypeScript
"ExportDeclaration" // TypeScript
];
const jsonSourceElements = [
"ObjectExpression",

View File

@ -14,7 +14,7 @@ Prettier is an opinionated code formatter with support for:
* [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)
* CSS, [Less](http://lesscss.org/), and [SCSS](http://sass-lang.com)
* [JSON](http://json.org/)
* [GraphQL](http://graphql.org/)
@ -836,7 +836,7 @@ features enabled, but you can also use the
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/), and [GraphQL](http://graphql.org/).
Prettier also supports [TypeScript](https://www.typescriptlang.org/), CSS, [Less](http://lesscss.org/), [SCSS](http://sass-lang.com), [JSON](http://json.org/), and [GraphQL](http://graphql.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.
@ -914,7 +914,7 @@ Prettier is an opinionated code formatter with support for:
* [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)
* CSS, [Less](http://lesscss.org/), and [SCSS](http://sass-lang.com)
* [JSON](http://json.org/)
* [GraphQL](http://graphql.org/)
@ -1890,7 +1890,7 @@ 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),
[Less](http://lesscss.org/), [SCSS](http://sass-lang.com),
[JSON](http://json.org/), and [GraphQL](http://graphql.org/).
The minimum version of TypeScript supported is 2.1.3 as it introduces the
@ -1985,7 +1985,7 @@ Prettier is an opinionated code formatter with support for:
* [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)
* CSS, [Less](http://lesscss.org/), and [SCSS](http://sass-lang.com)
* [JSON](http://json.org/)
* [GraphQL](http://graphql.org/)
@ -2807,7 +2807,7 @@ features enabled, but you can also use the
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/), and [GraphQL](http://graphql.org/).
Prettier also supports [TypeScript](https://www.typescriptlang.org/), CSS, [Less](http://lesscss.org/), [SCSS](http://sass-lang.com), [JSON](http://json.org/), and [GraphQL](http://graphql.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.
@ -2885,7 +2885,7 @@ Prettier is an opinionated code formatter with support for:
* [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)
* CSS, [Less](http://lesscss.org/), and [SCSS](http://sass-lang.com)
* [JSON](http://json.org/)
* [GraphQL](http://graphql.org/)
@ -3861,7 +3861,7 @@ 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),
[Less](http://lesscss.org/), [SCSS](http://sass-lang.com),
[JSON](http://json.org/), and [GraphQL](http://graphql.org/).
The minimum version of TypeScript supported is 2.1.3 as it introduces the

View File

@ -11,7 +11,7 @@ Prettier is an opinionated code formatter with support for:
* [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)
* CSS, [Less](http://lesscss.org/), and [SCSS](http://sass-lang.com)
* [JSON](http://json.org/)
* [GraphQL](http://graphql.org/)
@ -833,7 +833,7 @@ features enabled, but you can also use the
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/), and [GraphQL](http://graphql.org/).
Prettier also supports [TypeScript](https://www.typescriptlang.org/), CSS, [Less](http://lesscss.org/), [SCSS](http://sass-lang.com), [JSON](http://json.org/), and [GraphQL](http://graphql.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

@ -164,7 +164,7 @@ This is another small fix in the journey of properly supporting a new language.
#### CSS: Print @else on same line as } ([#2088](https://github.com/prettier/prettier/pull/2088)) by [@azz](https://github.com/azz)
Less and Scss are turning into real programming languages :) Step by step, we're starting to print all their constructs in the same way as JavaScript. This time, it's the `else` placement.
Less and SCSS are turning into real programming languages :) Step by step, we're starting to print all their constructs in the same way as JavaScript. This time, it's the `else` placement.
<!-- prettier-ignore -->
```scss

View File

@ -55,7 +55,7 @@ We should print a ternary using JSX mode if:
```
However, this heuristic caused some [unexpected formatting](https://github.com/prettier/prettier/issues/2729):
![Github Diff showing a ternary containing internationalization strings appearing inside a JSX element being converted to use JSX-mode style ternaries](/blog/assets/github-diff-ternary-in-jsx.png)
![GitHub Diff showing a ternary containing internationalization strings appearing inside a JSX element being converted to use JSX-mode style ternaries](/blog/assets/github-diff-ternary-in-jsx.png)
So, in 1.7.0, we have revised our heuristic to just be:
@ -203,16 +203,16 @@ Previously, there was no way via the API to resolve configuration for a source f
* [**Use resolveConfigFile.sync in the CLI**](https://github.com/prettier/prettier/issues/2726) reported by [@azz](https://github.com/azz)
* [**CSS: Normalize case (lower vs upper) on stuff**](https://github.com/prettier/prettier/issues/2653) reported by [@lydell](https://github.com/lydell)
* [**Dynamic import with webpackChunkName comment fails**](https://github.com/prettier/prettier/issues/1489) reported by [@pbomb](https://github.com/pbomb)
* [**Typescript: never as type parameter causes error: unknown type: undefined**](https://github.com/prettier/prettier/issues/2718) reported by [@hccampos](https://github.com/hccampos)
* [**TypeScript: never as type parameter causes error: unknown type: undefined**](https://github.com/prettier/prettier/issues/2718) reported by [@hccampos](https://github.com/hccampos)
* [**commented object values**](https://github.com/prettier/prettier/issues/2617) reported by [@sylvainbaronnet](https://github.com/sylvainbaronnet)
* [**Configuring pre-commit for jsx, Typescript, tsx**](https://github.com/prettier/prettier/issues/2745) reported by [@reywright](https://github.com/reywright)
* [**Configuring pre-commit for jsx, TypeScript, tsx**](https://github.com/prettier/prettier/issues/2745) reported by [@reywright](https://github.com/reywright)
* [**JSX ternaries include parens**](https://github.com/prettier/prettier/issues/2729) reported by [@jasonLaster](https://github.com/jasonLaster)
* [**Chained Short Circuit Conditionals in JSX**](https://github.com/prettier/prettier/issues/2714) reported by [@brycehill](https://github.com/brycehill)
* [**Support @prettier pragma comment**](https://github.com/prettier/prettier/issues/2397) reported by [@ajhyndman](https://github.com/ajhyndman)
* [**No indentation after breaking return statement**](https://github.com/prettier/prettier/issues/2777) reported by [@jwbay](https://github.com/jwbay)
* [**Support graphql() fn and so make 2nd arg prettier**](https://github.com/prettier/prettier/issues/2780) reported by [@brikou](https://github.com/brikou)
* [**prettierignore: cannot use absolute filename**](https://github.com/prettier/prettier/issues/2782) reported by [@ambar](https://github.com/ambar)
* [**Weird Javascript format**](https://github.com/prettier/prettier/issues/2775) reported by [@maxime1992](https://github.com/maxime1992)
* [**Weird JavaScript format**](https://github.com/prettier/prettier/issues/2775) reported by [@maxime1992](https://github.com/maxime1992)
---