Code Monkey home page Code Monkey logo

vim-prettier's Introduction

vim-prettier

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


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

INSTALL

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

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

or simply enable for all formats by:

" post install (yarn install | npm install) then load plugin only for editing supported files
Plug 'prettier/vim-prettier', { 'do': 'yarn install' }

For those using vim-pathogen, you can run the following in a terminal:

cd ~/.vim/bundle
git clone https://github.com/prettier/vim-prettier

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

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

USAGE

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

<Leader>p

or

:Prettier

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

:PrettierAsync

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

:PrettierVersion

You can send commands to the resolved prettier cli by:

:PrettierCli <q-args>

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

:PrettierCliPath

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

:PrettierCliVersion

Configuration

Change the mapping to run from the default of <Leader>p

nmap <Leader>py <Plug>(Prettier)

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

let g:prettier#autoformat = 0

Set the prettier CLI executable path

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

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,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*.md Prettier

Running before saving async (vim 8+):

let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*.md 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,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*.md PrettierAsync

Overwrite default prettier configuration

Note: vim-prettier default settings differ from prettier intentionally. However they can be configured by:

" max line length 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|css|less|scss|json|graphql|markdown
g:prettier#config#parser = 'flow'

" cli-override|file-override|prefer-file
g:prettier#config#config_precedence = 'prefer-file'

" always|never|preserve
g:prettier#config#prose_wrap = 'preserve'

REQUIREMENT(S)

If prettier installation can't be found no code formatting will happen

vim-prettier's People

Contributors

mitermayer avatar vutran avatar chemzqm avatar casprwang avatar eddiezane avatar frankychung avatar haegin avatar niftylettuce avatar nicoder avatar

Watchers

James Cloos avatar Mauro Bringolf avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.