Skip to content

Commit fc54952

Browse files
committed
docs: improve docs
1 parent 26b5ffd commit fc54952

File tree

3 files changed

+82
-65
lines changed

3 files changed

+82
-65
lines changed

.markdownlint.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"html",
2020
"javascript",
2121
"json",
22+
"jsonc",
2223
"markdown",
2324
"powershell",
2425
"text",
File renamed without changes.

README.md

Lines changed: 81 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
[![ci](https://github.com/jonlabelle/SublimeJsPrettier/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/jonlabelle/SublimeJsPrettier/actions/workflows/ci.yml)
44
[![Package Control Installs](https://img.shields.io/packagecontrol/dt/JsPrettier.svg?label=installs)](https://packagecontrol.io/packages/JsPrettier)
55
[![Latest Release](https://img.shields.io/github/v/tag/jonlabelle/SublimeJsPrettier.svg?label=version&sort=semver)](https://github.com/jonlabelle/SublimeJsPrettier/tags)
6-
[![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/jonlabelle/SublimeJsPrettier/blob/master/LICENSE.txt)
6+
[![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/jonlabelle/SublimeJsPrettier/blob/master/LICENSE)
77

88
> [JsPrettier] is a Sublime Text Plug-in for [Prettier], the opinionated code
99
> formatter.
@@ -25,18 +25,18 @@
2525
- [Install JsPrettier Using Git](#install-jsprettier-using-git)
2626
- [Usage](#usage)
2727
- [Command Scope](#command-scope)
28-
- [Custom Key Binding](#custom-key-binding)
29-
- [Settings](#settings)
30-
- [Sublime Text Settings](#sublime-text-settings)
28+
- [Plug-in Settings and Prettier Options](#plug-in-settings-and-prettier-options)
29+
- [Plug-in Settings](#plug-in-settings)
3130
- [Prettier Options](#prettier-options)
3231
- [Project-level Settings](#project-level-settings)
3332
- [Prettier Configuration Files](#prettier-configuration-files)
3433
- [Prettier Plug-in Support](#prettier-plugin-support)
3534
- [Prettier PHP](#prettier-php)
35+
- [Prettier Community Plugins](#prettier-community-plugins)
3636
- [Issues](#issues)
3737
- [Changes](#changes)
38-
- [Author](#author)
3938
- [License](#license)
39+
- [Author](#author)
4040

4141
</details>
4242

@@ -47,52 +47,62 @@ Operating Systems.
4747

4848
### Requirements
4949

50-
- [Sublime Text] – Text editor for code
51-
- [Node.js] – JavaScript runtime
52-
- [yarn] or [npm] – Package manager for JavaScript
53-
- [Prettier] – Opinionated code formatter (v3 or above)
50+
- [Sublime Text]
51+
- [Node.js]
52+
- [npm], [pnpm], or [yarn]
53+
- [Prettier]
5454

5555
### Install Prettier
5656

57-
If you've already installed [Prettier] \(using one of the [yarn] or [npm]
58-
commands below\), you're all set... otherwise:
57+
If you've already installed [Prettier], you're all set... otherwise:
5958

6059
```bash
61-
# yarn (local):
62-
yarn add prettier --dev
63-
64-
# yarn (global):
65-
yarn global add prettier
66-
67-
# npm (local):
60+
# npm (local)
6861
npm install --save-dev prettier
6962

70-
# npm (global):
63+
# npm (globally)
7164
npm install --global prettier
65+
66+
# pnpm (local)
67+
pnpm add -D prettier
68+
69+
# pnpm (globally)
70+
pnpm add -g prettier
71+
72+
# yarn (local)
73+
yarn add prettier --dev
74+
75+
# yarn (globally)
76+
yarn global add prettier
7277
```
7378

7479
### Install JsPrettier via Package Control
7580

76-
The easiest and recommended way to install JsPrettier is using [Package Control].
81+
The recommended way to install JsPrettier is via [Package Control].
7782

78-
From the **application menu**, navigate to:
83+
From the main application menu:
7984

80-
- `Tools` -> `Command Palette...` -> `Package Control: Install Package`, type
81-
the word **JsPrettier**, then select it to complete the installation.
85+
1. Open the **Tools** Menu
86+
2. Select **Command Palette...**
87+
3. Choose **Package Control: Install Package**
88+
4. Type **JsPrettier** and select it to complete the installation
8289

8390
### Install JsPrettier Manually
8491

85-
1. Download and extract JsPrettier [zip file] to your [Sublime Text Packages directory].
86-
2. Rename the extracted directory from `SublimeJsPrettier-master` to `JsPrettier`.
92+
1. Download the JsPrettier [zip file] from the GitHub repository.
93+
2. Extract the downloaded zip file.
94+
3. Move the extracted directory to your [Sublime Text Packages directory].
95+
4. Rename the extracted directory from `SublimeJsPrettier-master` to `JsPrettier`.
8796

8897
**Default Sublime Text Packages Paths:** <a name="default-st-paths"></a>
8998

9099
- **OS X:** `~/Library/Application Support/Sublime Text [2|3]/Packages`
91100
- **Linux:** `~/.Sublime Text [2|3]/Packages`
92101
- **Windows:** `%APPDATA%/Sublime Text [2|3]/Packages`
93102

94-
> **NOTE** Replace the `[2|3]` part with the appropriate Sublime Text
95-
> version for your installation.
103+
> [!NOTE]
104+
> Replace the `[2|3]` part with the appropriate Sublime Text version for your
105+
> installation.
96106
97107
### Install JsPrettier Using Git
98108

@@ -108,38 +118,38 @@ git clone https://github.com/jonlabelle/SublimeJsPrettier.git "JsPrettier"
108118

109119
## Usage
110120

121+
JsPrettier allows you to format your code using Prettier directly within Sublime Text.
122+
111123
There are three available options to format code:
112124

113125
1. **Command Palette:** From the command palette (<kbd>ctrl/cmd + shift + p</kbd>), type **JsPrettier Format Code**.
114126
2. **Context Menu:** Right-click anywhere in the file to bring up the context menu and select **JsPrettier Format Code**.
115127
3. **Key Binding:** There is no default key binding to run Prettier, but here's how to [add your own].
116128

117-
### Command Scope
118-
119-
`JsPrettier` will attempt to format selections of code first, then the entire
120-
file. When `auto_format_on_save` is `true`, the **entire file** will be formatted.
129+
## Command Scope
121130

122-
### Custom Key Binding
131+
JsPrettier formats selected code first; if no selection is made, it formats the
132+
entire file. When `auto_format_on_save` is enabled, the entire file will be
133+
formatted on save.
123134

124-
To add a [custom key binding], please reference the following example which
125-
binds the `js_prettier` command to <kbd>ctrl + alt + f</kbd>:
135+
To add a [custom key binding], open the Sublime Text key bindings file by
136+
navigating to `Preferences -> Key Bindings` and add the following configuration:
126137

127138
```json
128139
{ "keys": ["ctrl+alt+f"], "command": "js_prettier" }
129140
```
130141

131-
## Settings
142+
## Plug-in Settings and Prettier Options
132143

133-
Plug-in settings and Prettier options can be configured by navigating the
134-
application menu to:
144+
Configure plug-in settings and Prettier options via the application menu:
135145

136146
- **Preferences**
137147
- **Package Settings**
138148
- **JsPrettier**
139149
- **Settings - Default** (to view the defaults)
140150
- **Settings - User** (to override the defaults)
141151

142-
### Sublime Text Settings
152+
### Plug-in Settings
143153

144154
- **debug** (default: ***false***)
145155
When enabled (*true*), debug info will print to the console - useful for
@@ -161,7 +171,7 @@ application menu to:
161171

162172
**Examples:**
163173

164-
```json
174+
```jsonc
165175
{
166176
// macOS and Linux examples:
167177
"prettier_cli_path": "/usr/local/bin/prettier",
@@ -185,7 +195,7 @@ application menu to:
185195

186196
**Examples:**
187197

188-
```json
198+
```jsonc
189199
{
190200
// macOS/Linux:
191201
"node_path": "/usr/local/bin/node",
@@ -253,7 +263,7 @@ application menu to:
253263
254264
- **disable_tab_width_auto_detection** (default: ***false***)
255265
Whether or not to disable the plug-in from automatically setting Prettier's
256-
"[tabWidth / \--tab-width](https://prettier.io/docs/en/options.html#tab-width)"
266+
[--tab-width](https://prettier.io/docs/en/options.html#tab-width)
257267
option, and adhere to the Prettier configured setting.
258268

259269
- **disable_prettier_cursor_offset** (default: ***false***)
@@ -277,12 +287,15 @@ application menu to:
277287

278288
**Examples:**
279289

280-
```json
290+
```jsonc
281291
{
282292
"additional_cli_args": {
283293
"--config": "~/.prettierrc",
294+
// or
284295
"--config": "$HOME/.prettierrc",
296+
// or
285297
"--config": "${project_path}/.prettierrc",
298+
// or
286299
"--config": "/some/absolute/path/to/.prettierrc",
287300
288301
"--config-precedence": "file-override",
@@ -458,8 +471,8 @@ See the Prettier Options [doc page] for more details and examples.
458471

459472
JsPrettier supports [project-level settings], specified in `<project_name>.sublime-project` files.
460473

461-
In order for your project-level settings to override [previous configurations](#settings),
462-
you'll need to add a new `js_prettier` key and section under `settings`, as [seen below].
474+
To override [previous configurations](#plug-in-settings-and-prettier-options) with your project-level settings,
475+
add a new `js_prettier` key and section under `settings` as shown in the [example below](#example-sublime-text-project-file).
463476

464477
#### Example Sublime Text Project File
465478

@@ -523,8 +536,7 @@ key-value item to `additional_cli_args`. Here's an example:
523536
524537
```json
525538
{
526-
"additional_cli_args":
527-
{
539+
"additional_cli_args": {
528540
"--config": "~/some/path/from/my/home/.prettierrc",
529541
"--config-precedence": "prefer-file",
530542
"--ignore-path": "${project_path}/.prettierignore"
@@ -557,12 +569,12 @@ in the user's home directory.
557569
558570
### Prettier PHP
559571
560-
In most cases, [Prettier PHP] works as drop-in replacement for Prettier.
572+
In most cases, [Prettier PHP] works as a drop-in replacement for Prettier.
561573
However, JsPrettier only detects if you're formatting a PHP file (or PHP selection),
562-
and sets the `--parser` to `php` accordingly. Aside from that, it's up to you ensure your
574+
and sets the `--parser` option to `php` accordingly. Aside from that, it's up to you ensure your
563575
config(s) conform to Prettier PHP [options](https://github.com/prettier/plugin-php#configuration).
564576
565-
To **install Prettier PHP** in your project root, and use it as a drop-in
577+
To **install Prettier PHP** in your project root and use it as a drop-in
566578
replacement for Prettier:
567579
568580
```bash
@@ -573,32 +585,34 @@ npm install @prettier/plugin-php
573585
### Prettier Community Plugins
574586
575587
Here's an [example SublimeText project](https://github.com/jonlabelle/SublimeJsPrettier/files/6498394/jsprettier-and-prettier-community-plugin-example.zip)
576-
\(posted in [Issue #239](https://github.com/jonlabelle/SublimeJsPrettier/issues/239)\)
577-
that uses the Prettier Community Plugin [NiklasPor/prettier-plugin-go-template](https://github.com/NiklasPor/prettier-plugin-go-template)
588+
from [#239](https://github.com/jonlabelle/SublimeJsPrettier/issues/239)
589+
that uses the Prettier Community Plugin [prettier-plugin-go-template](https://github.com/NiklasPor/prettier-plugin-go-template)
578590
to format `*.gohtml` files.
579591
580592
And another [example project](https://github.com/jonlabelle/SublimeJsPrettier/files/6527323/jsprettier-and-prettier-plugin-sort-imports.zip)
581-
that uses [@trivago/prettier-plugin-sort-imports](https://github.com/trivago/prettier-plugin-sort-imports)
582-
to sort imports (posted in [Issue #240](https://github.com/jonlabelle/SublimeJsPrettier/issues/240)\).
593+
from [#240](https://github.com/jonlabelle/SublimeJsPrettier/issues/240) that
594+
uses [prettier-plugin-sort-imports](https://github.com/trivago/prettier-plugin-sort-imports)
595+
to sort imports.
583596
584597
## Issues
585598
586-
To report a bug or a make suggestion, please [open a new issue] selecting the
587-
appropriate Issue Template (**Bug report** or **Feature request**). Be sure to
588-
follow the guidelines outlined in each template... otherwise your submission
589-
will be subject to immediate closure.
599+
To report a bug or make a suggestion, please [open a new issue] selecting the
600+
appropriate issue template: [Bug], [Feature], or [Question].
601+
602+
Be sure to follow the guidelines outlined in each template; otherwise, your
603+
submission may be closed.
590604
591605
## Changes
592606
593607
Please visit the [Changelog] page for a complete list of changes.
594608
595-
## Author
609+
## License
596610
597-
Jon LaBelle
611+
[MIT]
598612
599-
## License
613+
## Author
600614
601-
[MIT License]
615+
[Jon LaBelle](https://github.com/jonlabelle)
602616
603617
[Watch a Quick Demo]: https://github.com/jonlabelle/SublimeJsPrettier/blob/master/screenshots/demo.gif
604618
[Prettier]: https://prettier.io
@@ -611,20 +625,22 @@ Jon LaBelle
611625
[***translate_tabs_to_spaces***]: https://sublime-text-unofficial-documentation.readthedocs.io/en/latest/reference/settings.html#whitespace-and-indentation
612626
[yarn]: https://yarnpkg.com
613627
[npm]: https://www.npmjs.com
628+
[pnpm]: https://pnpm.io
614629
[zip file]: https://github.com/jonlabelle/SublimeJsPrettier/archive/master.zip
615630
[Sublime Text Packages directory]: #default-st-paths
616631
[custom key binding]: https://sublime-text-unofficial-documentation.readthedocs.io/en/latest/customization/key_bindings.html
617632
[Prettier Configuration files]: https://prettier.io/docs/en/configuration.html
618633
[Changelog]: https://github.com/jonlabelle/SublimeJsPrettier/blob/master/CHANGELOG.md
619-
[MIT License]: https://github.com/jonlabelle/SublimeJsPrettier/blob/master/LICENSE.txt
634+
[MIT]: https://github.com/jonlabelle/SublimeJsPrettier/blob/master/LICENSE
620635
[doc page]: https://prettier.io/docs/en/options.html
621-
[`--ignore-path`]: https://prettier.io/docs/en/cli.html#ignore-path
636+
[`--ignore-path`]: https://prettier.io/docs/en/cli.html#--ignore-path
622637
[whitespace-sensitive formatting]: https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
623638
[`parser`]: https://prettier.io/docs/en/options.html#parser
624639
[`--log-level`]: https://prettier.io/docs/en/cli.html#--log-level
625640
[Prettier PHP]: https://github.com/prettier/plugin-php
626641
[open a new issue]: https://github.com/jonlabelle/SublimeJsPrettier/issues/
627642
[Prettier v1.17+]: https://prettier.io/blog/2019/04/12/1.17.0.html
628-
[seen below]: #example-sublime-text-project-file "See the Sublime Text project file example"
629-
[add your own]: #custom-key-binding "See how to add a custom key binding to run Prettier"
630643
[\.editorconfig]: https://editorconfig.org/
644+
[Bug]: https://github.com/jonlabelle/SublimeJsPrettier/issues/new?assignees=jonlabelle&labels=investigating&projects=&template=bug.yml&title=%5BBug%5D+
645+
[Feature]: https://github.com/jonlabelle/SublimeJsPrettier/issues/new?assignees=jonlabelle&labels=enhancement&projects=&template=feature.yml&title=%5BEnhancement%5D+
646+
[Question]: https://github.com/jonlabelle/SublimeJsPrettier/issues/new?assignees=&labels=question&projects=&template=question.yml&title=%5BQuestion%5D+

0 commit comments

Comments
 (0)