prettier

6.9 KiB

Raw Blame History

id	title
vim	Vim Setup

Vim users can simply install either sbdchd/neoformat, w0rp/ale, or prettier/vim-prettier.

Neoformat

Neoformat - Installation

Add sbdchd/neoformat to your list based on the tool you use:

Plug 'sbdchd/neoformat'

Neoformat - Usage

Then make Neoformat run on save:

autocmd BufWritePre *.js Neoformat

Neoformat - Other `autocmd` events

You can also make Vim format your code more frequently, by setting an autocmd for other events. Here are a couple of useful ones:

TextChanged: after a change was made to the text in Normal mode
InsertLeave: when leaving Insert mode

For example, you can format on both of the above events together with BufWritePre like this:

autocmd BufWritePre,TextChanged,InsertLeave *.js Neoformat

See :help autocmd-events in Vim for details.

Neoformat - Customizing Prettier

If your project requires settings other than the default Prettier settings, you can pass arguments to do so in your .vimrc or vim project, you can do so:

autocmd FileType javascript setlocal formatprg=prettier\ --stdin\ --parser\ flow\ --single-quote\ --trailing-comma\ es5
" Use formatprg when available
let g:neoformat_try_formatprg = 1

Each space in prettier options should be escaped with \.

vim-prettier

vim-prettier - Installation

Install with vim-plug, assumes node and yarn|npm installed globally.

By default it will auto format javascript, typescript, less, scss and css files that have "@format" annotation in the header of the file.

" post install (yarn install | npm install) then load plugin only for editing supported files
Plug 'prettier/vim-prettier', {
    \ 'do': 'npm install',
    \ 'for': ['javascript', 'typescript', 'css', 'less', 'scss'] }

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

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

vim-prettier executable resolution:

Tranverse parents and search for Prettier installation inside node_modules
Look for a global prettier installation
Use locally installed vim-prettier prettier executable

vim-prettier - Usage

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

<Leader>p

:Prettier

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

:PrettierAsync

vim-prettier - Configuration

Disable auto formatting of files that have "@format" tag

let g:prettier#autoformat = 0

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

let g:prettier#exec_cmd_async = 1

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

let g:prettier#quickfix_enabled = 0

To enable vim-prettier to run in files without requiring the "@format" doc tag. First disable the default autoformat, then update to your own custom behaviour

Running before saving sync:

let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.css,*.scss,*.less Prettier

Running before saving async (vim 8+):

let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.css,*.scss,*.less PrettierAsync

Running before saving, changing text or leaving insert mode:

" when running at every change you may want to disable quickfix
let g:prettier#quickfix_enabled = 0

let g:prettier#autoformat = 0
autocmd BufWritePre,TextChanged,InsertLeave *.js,*.css,*.scss,*.less PrettierAsync

Vim-prettier default formatting settings are different from the prettier defaults, but they can be configured

" max line lengh that prettier will wrap on
g:prettier#config#print_width = 80

" number of spaces per indentation level
g:prettier#config#tab_width = 2

" use tabs over spaces
g:prettier#config#use_tabs = 'false'

" print semicolons
g:prettier#config#semi = 'true'

" single quotes over double quotes
g:prettier#config#single_quote = 'true'

" print spaces between brackets
g:prettier#config#bracket_spacing = 'false'

" put > on the last line instead of new line
g:prettier#config#jsx_bracket_same_line = 'true'

" none|es5|all
g:prettier#config#trailing_comma = 'all'

" flow|babylon|typescript|postcss
g:prettier#config#parser = 'flow'

ALE

ALE - Installation

ALE is an asynchronous lint engine for Vim that also has the ability to run formatters over code, including Prettier. For ALE to work you'll have to be using either Vim 8 or Neovim as ALE makes use of the asynchronous abilities that both Vim 8 and Neovim provide.

The best way to install ALE is with your favourite plugin manager for Vim, such as Vim-Plug:

Plug 'w0rp/ale'

You can find further instructions on the ALE repository.

ALE - Usage

Once you've installed ALE you need to enable the Prettier fixer:

let g:ale_fixers = {}
let g:ale_fixers['javascript'] = ['prettier']

ALE will first use the Prettier installed locally (in node_modules/.bin/prettier) before looking for a global installation.

You can then run :ALEFix in a JavaScript file to run Prettier.

ALE - Configuration

To have ALE run prettier when you save a file you can tell ALE to run automatically:

let g:ale_fix_on_save = 1

To configure Prettier, you can set g:ale_javascript_prettier_options. This is a string that will be passed through to the Prettier command line tool:

let g:ale_javascript_prettier_options = '--single-quote --trailing-comma es5'

If you use Prettier config files, you must set g:ale_javascript_prettier_use_local_config to have ALE respect them:

let g:ale_javascript_prettier_use_local_config = 1

Running manually

Running Prettier manually in Vim

If you need a little more control over when prettier is run, you can create a custom key binding. In this example, gp (mnemonic: "get pretty") is used to run prettier (with options) in the currently active buffer:

nnoremap gp :silent %!prettier --stdin --trailing-comma all --single-quote<CR>

6.9 KiB Raw Blame History