fix: Proper case for Prettier, JavaScript, TypeScript, GitHub, Less (#3848)
parent
8641a9a9c5
commit
7a7eb17082
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
-->
|
||||
|
|
8
index.js
8
index.js
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
||||
---
|
||||
|
||||
|
|
Loading…
Reference in New Issue