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.
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)
6861npm install --save-dev prettier
6962
70- # npm (global):
63+ # npm (globally)
7164npm 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+
111123There are three available options to format code:
112124
1131251 . ** Command Palette:** From the command palette (<kbd >ctrl/cmd + shift + p</kbd >), type ** JsPrettier Format Code** .
1141262 . ** Context Menu:** Right-click anywhere in the file to bring up the context menu and select ** JsPrettier Format Code** .
1151273 . ** 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
459472JsPrettier 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.
561573However, 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
563575config(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
566578replacement for Prettier:
567579
568580` ` ` bash
@@ -573,32 +585,34 @@ npm install @prettier/plugin-php
573585### Prettier Community Plugins
574586
575587Here'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)
578590to format ` * .gohtml ` files.
579591
580592And 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
593607Please 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