Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/prettier/vim-prettier

A Vim plugin for Prettier
https://github.com/prettier/vim-prettier

prettier prettier-js vim vim-plugins

Last synced: 3 days ago
JSON representation

A Vim plugin for Prettier

Awesome Lists containing this project

README 

        
## vim-prettier 



A vim plugin wrapper for prettier, pre-configured with custom default prettier

settings.



---



**NOTE**: If you want to fallback to older version of prettier/vim-prettier please add this to your `.vimrc`:



```vim

Plug 'prettier/vim-prettier', {

  \ 'do': 'yarn install --frozen-lockfile --production',

  \ 'branch': 'release/0.x'

  \ }

```



---



By default it will auto format **javascript**, **typescript**, **less**,

**scss**, **css**, **json**, **graphql** and **markdown** files if they

have/support the "@format" pragma annotation in the header of the file.



![vim-prettier](/media/vim-prettier.gif?raw=true 'vim-prettier')



### INSTALL



To install with vim 8+ plugins, simply clone to your `~/.vim/pack/plugins/start` directory, and add `packloadall` to your `.vimrc` (if you haven't already).



```bash

mkdir -p ~/.vim/pack/plugins/start

git clone https://github.com/prettier/vim-prettier ~/.vim/pack/plugins/start/vim-prettier

```



`.vimrc`:

```vim

packloadall

```



Install with [vim-plug](https://github.com/junegunn/vim-plug), assumes node and

yarn|npm installed globally.



```vim

" post install (yarn install | npm install) then load plugin only for editing supported files

Plug 'prettier/vim-prettier', {

  \ 'do': 'yarn install --frozen-lockfile --production',

  \ 'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql', 'markdown', 'vue', 'svelte', 'yaml', 'html'] }

```



or simply enable for all formats by:



```vim

" post install (yarn install | npm install) then load plugin only for editing supported files

Plug 'prettier/vim-prettier', { 'do': 'yarn install --frozen-lockfile --production' }

```



For those using [vim-pathogen](https://github.com/tpope/vim-pathogen), you can run the following in a terminal:



```

cd ~/.vim/bundle

git clone https://github.com/prettier/vim-prettier

```



If using [dein](https://github.com/Shougo/dein.vim), add the following to your dein config:



```vim

call dein#add('prettier/vim-prettier', {'build': 'npm install'})

```



If using other vim plugin managers or doing manual setup make sure to have

`prettier` installed globally or go to your vim-prettier directory and either do

`npm install` or `yarn install --frozen-lockfile`



### Prettier Executable resolution



When installed via vim-plug, a default prettier executable is installed inside

vim-prettier.



vim-prettier executable resolution:



1.  Look for user defined prettier cli path from vim configuration file

2.  Traverse parents and search for Prettier installation inside `node_modules`

3.  Look for a global prettier installation

4.  Use locally installed vim-prettier prettier executable



### Prettier Stylelint



To use an alternative command, like

[`prettier-stylelint`](https://github.com/hugomrdias/prettier-stylelint), set

this at the buffer level, e.g.:



```vim

au FileType css,scss let b:prettier_exec_cmd = "prettier-stylelint"

```



vim-prettier will look for the executable in the same places it looks for

`prettier`, and will fall back to `prettier` if it can't find

`b:prettier_exec_cmd`



### USAGE



Prettier by default will run on auto save but can also be manually triggered by:



```vim

p

```



or



```vim

:Prettier

```



If your are on vim 8+ you can also trigger async formatting by:



```vim

:PrettierAsync

```



You can send to prettier your entire buffer but ensure that it formats only your selection.



**note:** differs from `:PrettierFragment` by sending the entire buffer to prettier, allowing identation level to be preserved, but it requires the whole file to be valid.



```vim

:PrettierPartial

```



You can send to prettier your current selection as a fragment of same type as the file being edited.



**note:** differs from `:PrettierPartial` by sending only the current selection to prettier, this allows for faster formatting but wont preserve indentation.



```vim

:PrettierFragment

```



You can check what is the `vim-prettier` plugin version by:



```vim

:PrettierVersion

```



You can send commands to the resolved `prettier` cli by:



```

:PrettierCli 

```



You can check what is the resolved `prettier` cli path by:



```vim

:PrettierCliPath

```



You can check what is the resolved `prettier` cli version by:



```vim

:PrettierCliVersion

```



### Configuration



Change the mapping to run from the default of `p`



```vim

nmap py (Prettier)

```



Enable auto formatting of files that have "@format" or "@prettier" tag



```vim

let g:prettier#autoformat = 1

```



Allow auto formatting for files without "@format" or "@prettier" tag



```vim

let g:prettier#autoformat_require_pragma = 0

```



**NOTE** The previous two options can be used together for autoformatting files on save without `@format` or `@prettier` tags



```vim

let g:prettier#autoformat = 1

let g:prettier#autoformat_require_pragma = 0

```



Toggle the `g:prettier#autoformat` setting based on whether a config file can be found in the current directory or any parent directory. Note that this will override the `g:prettier#autoformat` setting!



```vim

let g:prettier#autoformat_config_present = 1

```



A list containing all config file names to search for when using the `g:prettier#autoformat_config_present` option.



```vim

let g:prettier#autoformat_config_files = [...]

```



Set the prettier CLI executable path



```vim

let g:prettier#exec_cmd_path = "~/path/to/cli/prettier"

```



The command `:Prettier` by default is synchronous but can also be forced async



```vim

let g:prettier#exec_cmd_async = 1

```



By default parsing errors will open the quickfix but can also be disabled



```vim

let g:prettier#quickfix_enabled = 0

```



By default selection formatting will be running `:PrettierFragment` but we can set

`:PrettierPartial` as the default selection formatting by:



```vim

let g:prettier#partial_format=1

```



By default we auto focus on the quickfix when there are errors but can also be disabled



```vim

let g:prettier#quickfix_auto_focus = 0

```



To run vim-prettier not only before saving, but also after changing text or leaving insert mode:



```vim

" when running at every change you may want to disable quickfix

let g:prettier#quickfix_enabled = 0



autocmd TextChanged,InsertLeave *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*.md,*.vue,*.svelte,*.yaml,*.html PrettierAsync

```



### Overwrite default prettier configuration



**Note:** vim-prettier default settings differ from prettier intentionally.

However they can be configured by:



```vim

" Max line length that prettier will wrap on: a number or 'auto' (use

" textwidth).

" default: 'auto'

let g:prettier#config#print_width = 'auto'



" number of spaces per indentation level: a number or 'auto' (use

" softtabstop)

" default: 'auto'

let g:prettier#config#tab_width = 'auto'



" use tabs instead of spaces: true, false, or auto (use the expandtab setting).

" default: 'auto'

let g:prettier#config#use_tabs = 'auto'



" flow|babylon|typescript|css|less|scss|json|graphql|markdown or empty string

" (let prettier choose).

" default: ''

let g:prettier#config#parser = ''



" cli-override|file-override|prefer-file

" default: 'file-override'

let g:prettier#config#config_precedence = 'file-override'



" always|never|preserve

" default: 'preserve'

let g:prettier#config#prose_wrap = 'preserve'



" css|strict|ignore

" default: 'css'

let g:prettier#config#html_whitespace_sensitivity = 'css'



" false|true

" default: 'false'

let g:prettier#config#require_pragma = 'false'



" Define the flavor of line endings

" lf|crlf|cr|all

" defaut: 'lf'

let g:prettier#config#end_of_line = get(g:, 'prettier#config#end_of_line', 'lf')

```



### REQUIREMENT(S)



If the `prettier` executable can't be found by Vim, no code formatting will happen