Mention TypeScript and CSS in the README (#1950)

* Mention TypeScript and CSS in the README.
* Collapse the table of contents with `<details>` tag.
* Clarifies the `--parser` option.
master
Lucas Azzola 2017-06-04 13:03:30 +10:00 committed by Christopher Chedeau
parent e0682a9558
commit fed9f0f4eb
1 changed files with 17 additions and 7 deletions

View File

@ -4,7 +4,8 @@
[![Build Status](https://travis-ci.org/prettier/prettier.svg?branch=master)](https://travis-ci.org/prettier/prettier)
[![NPM version](https://img.shields.io/npm/v/prettier.svg)](https://www.npmjs.com/package/prettier)
<!-- toc -->
<details>
<summary><strong>Table of Contents</strong></summary>
- [Usage](#usage)
* [CLI](#cli)
@ -28,13 +29,20 @@
- [Technical Details](#technical-details)
- [Badge](#badge)
- [Contributing](#contributing)
</details>
<!-- tocstop -->
--------------------------------------------------------------------------------
Prettier is an opinionated JavaScript formatter inspired by
Prettier is an opinionated code formatter inspired by
[refmt](https://facebook.github.io/reason/tools.html) with advanced
support for language features from [ES2017](https://github.com/tc39/proposals/blob/master/finished-proposals.md), [JSX](https://facebook.github.io/jsx/), and [Flow](https://flow.org/). It removes
all original styling[\*](#styling-footnote) and ensures that all outputted JavaScript
support for language features from:
* 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)
It removes all original styling[\*](#styling-footnote) and ensures that all outputted JavaScript
conforms to a consistent style. (See this [blog post](http://jlongster.com/A-Prettier-Formatter))
If you are interested in the details, you can watch those two conference talks:
@ -216,7 +224,7 @@ Copy the following config in your pre-commit config yaml file:
sha: '' # Use the sha or tag you want to point at
hooks:
- id: prettier
additional_dependencies: ['prettier@1.3.1']
additional_dependencies: ['prettier@1.4.2']
```
@ -282,7 +290,7 @@ Prettier ships with a handful of customizable format options, usable in both the
| **Cursor Offset** - Specify where the cursor is. This option only works with `prettier.formatWithCursor`, and cannot be used with `rangeStart` and `rangeEnd`. | `-1` | `--cursor-offset <int>` | `cursorOffset: <int>` |
| **Range Start** - Format code starting at a given character offset. The range will extend backwards to the start of the first line containing the selected statement. This option cannot be used with `cursorOffset`. | `0` | `--range-start <int>` | `rangeStart: <int>` |
| **Range End** - Format code ending at a given character offset (exclusive). The range will extend forwards to the end of the selected statement. This option cannot be used with `cursorOffset`. | `Infinity` | `--range-end <int>` | `rangeEnd: <int>` |
| **Parser** - Specify which parser to use. Both parsers support the same set of JavaScript features (including Flow). You shouldn't have to change this setting. | `babylon` | <code>--parser <flow&#124;babylon></code> | <code>parser: "<flow&#124;babylon&#124;postcss&#124;typescript>"</code> |
| **Parser** - 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. | `babylon` | <code>--parser <flow&#124;babylon&#124;typescript&#124;postcss></code> | <code>parser: "<flow&#124;babylon&#124;typescript&#124;postcss>"</code> |
| **Filepath** - Specify the input filepath this will be used to do parser inference.<br /><br /> Example: <br />`cat foo \| prettier --stdin-filepath foo.css`<br /> will default to use `postcss` parser | | `--stdin-filepath` | `filepath: <string>` |
### Excluding code from formatting
@ -416,6 +424,8 @@ features enabled, but you can also use the
All of JSX and Flow syntax is supported. In fact, the test suite in
`tests` *is* the entire Flow test suite and they all pass.
Prettier also supports [TypeScript](https://www.typescriptlang.org/), CSS, [LESS](http://lesscss.org/), and [SCSS](http://sass-lang.com).
## Related Projects
- [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) plugs Prettier into your ESLint workflow