Skip to content
This repository has been archived by the owner on Aug 31, 2023. It is now read-only.

Commit

Permalink
chore(website): Grammar and style fixes (#2329)
Browse files Browse the repository at this point in the history
* chore: Some changes to documentation copy, fixing grammar and style

* chore: the -> The
  • Loading branch information
Nicholas Yang committed Mar 30, 2022
1 parent e057e55 commit fdf6bb0
Showing 1 changed file with 29 additions and 28 deletions.
57 changes: 29 additions & 28 deletions website/src/_includes/docs/formatter.md
Original file line number Diff line number Diff line change
@@ -1,33 +1,34 @@
## Formatter

You can use the Rome formatter via our [VS Code extension] or by downloading our CLI directly from our [release page].
You can use the formatter via our [VS Code extension] or by downloading our CLI directly from our [release page].

> WARNING: both the CLI and the VS Code extension are packaged with separated binaries, which means that if you don't
> use our default options, you will have to make sure to **pass them to both the extension AND the CLI**.
>
> WARNING: The CLI and VS Code extension are packaged with separate binaries, which means that if you don't
> use our default options, you will have to **pass them to both the extension AND the CLI**.
>
> This is a temporary choice to allow people to play with our formatter. This will change in the near future.

### Formatter options

Our formatter is really strict and has support for few options:
Our formatter is really strict and has support for only a few options:

- indent style, you can choose between tabs or spaces; **rome's default is tabs**
- quantity of spaces, applied only if you choose spaces as indent style;
- line width, which is the number of characters that fit in a single line; **rome's default is `80`**
- indent style, you can choose between tabs or spaces; **Rome's default is tabs**
- quantity of spaces, applied only if you choose spaces as indent style;
- line width, which is the number of characters that fit in a single line; **Rome's default is `80`**

### Use the formatter with the VSCode extension
### VSCode extension

The extension allows to change the default [formatter options](#formatter-options).
The extension allows you to change the default [formatter options](#formatter-options).

To easy access to the available options, to the settings menu of the VSCode extension and type: `@ext:rome.rome`.
For easy access to the available options, navigate to the settings menu of the VSCode extension and type: `@ext:rome.rome`.

Plus, you can try an additional feature that allows you to format partial broken code (code with syntax errors).
This is an **opt-in feature** that allows the developers to experiment how a formatter can work with an error resilient parser.
Plus, you can try an additional feature that allows you to format code with syntax errors.

This is an **opt-in feature** that allows developers to experiment with a formatter that can work with an error resilient parser.

> WARNING: all options are marked as **BETA** because this might change, once we will add support of a configuration file
If you want to set Rome formatter as your default formatter, you can do so by opening the [command palette]
If you want to set Rome as your default formatter, you can do so by opening the [command palette]
and select `Format Document With ...` , then `Configure Default Formatter` and finally select `Rome`. The option will
appear only for documents that Rome supports.

Expand Down Expand Up @@ -82,7 +83,7 @@ Here's an example of how a code will look like before and after the formatter do
Before running the formatter
```js
const expr =
const expr =
// rome-ignore format: the array should not be formatted
[
(2*n)/(r-l), 0, (r+l)/(r-l), 0,
Expand All @@ -100,7 +101,7 @@ const expr = [
];
```
After running the formatter
After running the formatter
```js
const expr =
Expand Down Expand Up @@ -132,31 +133,31 @@ const expr = [
];
```
As you can see the first array, which has a suppression comment, is left untouched!
As you can see the first array, which has a suppression comment, is left untouched!
### Differences with Prettier/dprint
Rome formatter uses a CST to implement its algorithms - as supposed to Prettier or dprint, which use an
AST -, which means that it has to deal with a different set of problems e.g. comments and how to place them.
Our formatter uses a CST to implement its algorithms, as opposed to Prettier or dprint, which use an
AST. This means that it has to deal with a different set of problems e.g. comments and how to place them.
As you might know, comments can appear almost everywhere inside a program, which can make the implementation
of a formatter more difficult.
In a CST, comments are attached to tokens, so it's possible to extract this information when inspecting
a single node.
a single node.
Considering these assumptions, the Rome team had to create some heuristics and concepts in order to
Considering these assumptions, the Rome team had to create some heuristics and concepts in order to
**consistently format comments inside a program**.
#### Comments
The placements of some comments might be different, for example in JavaScript functions and JavaScript classes.
The placements of some comments might be different, for example in JavaScript functions and JavaScript classes.
A function has a "head" and a "body":
- the head is where we define the name of the function and its signature (its parameters, return type, etc.);
- the body is where we define the implementation of the function, usually - but not only - inside a block `{}`;
Our formatter marks a function head as a hard group, while the body is a normal group. This means that all
Our formatter marks a function head as a hard group, while the body is a normal group. This means that all
the comments inside the head are "pushed out" and moved outside it, making the formatting **always consistent**.
Here's an example against Prettier/dprint, we place comments inside the head of a function:
Expand All @@ -167,7 +168,7 @@ function // something
let a = "f";
}
function a(b, c) // something
function a(b, c) // something
{
let a = "f";
}
Expand Down Expand Up @@ -200,9 +201,9 @@ function a(b, c) {
Please check our [playground] and its result
#### Migrate from other formatters
#### Migration from other formatters
Rome doesn't support a lot of options like other web formatters, which means that particular styles
Rome doesn't support a lot of options like other web formatters, which means that particular styles
won't be available to all developers.
To migrate from suppression comments of the old formatter, it's recommended to run a global search and replace against the code
Expand All @@ -214,10 +215,10 @@ base and replace the formatting comment with:
Then, you are free to change the reason of the suppression that you want.
Run Rome formatter and make sure that **the code that was ignored is still the same**.
Run the formatter and make sure that **the code that was ignored is still the same**.
[VS Code extension]: https://marketplace.visualstudio.com/items?itemName=rome.rome
[release page]: https://github.com/rome/tools/releases
[playground]: https://play.rome.tools/?lineWidth=80&indentStyle=tab&indentWidth=2&typescript=true&jsx=false#ZnVuY3Rpb24gLy8gc29tZXRoaW5nCiBhKGIsIGMpICB7CiAgbGV0IGEgPSAiZiI7Cn0KCmZ1bmN0aW9uIGEoYiwgYykgLy8gc29tZXRoaW5nIAp7CiAgICBsZXQgYSA9ICJmIjsKfQ==
[command palette]: https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette
[command palette]: https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette

0 comments on commit fdf6bb0

Please sign in to comment.