https://prettier.netlify.app/assets/js/279d284d.ea1602a9.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["168"],{9159(e,n,r){r.r(n),r.d(n,{metadata:()=>i,default:()=>h,frontMatter:()=>o,contentTitle:()=>a,toc:()=>c,assets:()=>l});var i=JSON.parse('{"id":"vim","title":"Vim Setup","description":"Vim users can install either vim-prettier, which is Prettier specific, or Neoformat or ALE which are generalized lint/format engines with support for Prettier.","source":"@site/../docs/vim.md","sourceDirName":".","slug":"/vim","permalink":"/docs/next/vim","draft":false,"unlisted":false,"editUrl":"https://github.com/prettier/prettier/edit/main/docs/vim.md","tags":[],"version":"current","frontMatter":{"id":"vim","title":"Vim Setup"},"sidebar":"docs","previous":{"title":"WebStorm Setup","permalink":"/docs/next/webstorm"},"next":{"title":"Watching For Changes","permalink":"/docs/next/watching-files"}}'),t=r(4848),s=r(8453);let o={id:"vim",title:"Vim Setup"},a,l={},c=[{value:"vim-prettier",id:"vim-prettier",level:2},{value:"Neoformat",id:"neoformat",level:2},{value:"ALE",id:"ale",level:2},{value:"coc-prettier",id:"coc-prettier",level:2},{value:"Running manually",id:"running-manually",level:2}];function d(e){let n={a:"a",code:"code",em:"em",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["Vim users can install either ",(0,t.jsx)(n.a,{href:"https://github.com/prettier/vim-prettier",children:"vim-prettier"}),", which is Prettier specific, or ",(0,t.jsx)(n.a,{href:"https://github.com/sbdchd/neoformat",children:"Neoformat"})," or ",(0,t.jsx)(n.a,{href:"https://github.com/dense-analysis/ale",children:"ALE"})," which are generalized lint/format engines with support for Prettier."]}),"\n",(0,t.jsx)(n.h2,{id:"vim-prettier",children:(0,t.jsx)(n.a,{href:"https://github.com/prettier/vim-prettier",children:"vim-prettier"})}),"\n",(0,t.jsxs)(n.p,{children:["See the ",(0,t.jsx)(n.a,{href:"https://github.com/prettier/vim-prettier",children:"vim-prettier"})," readme for installation and usage instructions."]}),"\n",(0,t.jsx)(n.h2,{id:"neoformat",children:(0,t.jsx)(n.a,{href:"https://github.com/sbdchd/neoformat",children:"Neoformat"})}),"\n",(0,t.jsxs)(n.p,{children:["The best way to install Neoformat is with your favorite plugin manager for Vim, such as ",(0,t.jsx)(n.a,{href:"https://github.com/junegunn/vim-plug",children:"vim-plug"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"Plug 'sbdchd/neoformat'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["In order for Neoformat to use a project-local version of Prettier (i.e. to use ",(0,t.jsx)(n.code,{children:"node_modules/.bin/prettier"})," instead of looking for ",(0,t.jsx)(n.code,{children:"prettier"})," on ",(0,t.jsx)(n.code,{children:"$PATH"}),"), you must set the ",(0,t.jsx)(n.code,{children:"neoformat_try_node_exe"})," option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"let g:neoformat_try_node_exe = 1\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Run ",(0,t.jsx)(n.code,{children:":Neoformat"})," or ",(0,t.jsx)(n.code,{children:":Neoformat prettier"})," in a supported file to run Prettier."]}),"\n",(0,t.jsx)(n.p,{children:"To have Neoformat run Prettier on save:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"autocmd BufWritePre *.js Neoformat\n"})}),"\n",(0,t.jsxs)(n.p,{children:["You can also make Vim format your code more frequently, by setting an ",(0,t.jsx)(n.code,{children:"autocmd"})," for other events. Here are a couple of useful ones:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"TextChanged"}),": after a change was made to the text in Normal mode"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"InsertLeave"}),": when leaving Insert mode"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["For example, you can format on both of the above events together with ",(0,t.jsx)(n.code,{children:"BufWritePre"})," like this:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"autocmd BufWritePre,TextChanged,InsertLeave *.js Neoformat\n"})}),"\n",(0,t.jsxs)(n.p,{children:["See ",(0,t.jsx)(n.code,{children:":help autocmd-events"})," in Vim for details."]}),"\n",(0,t.jsxs)(n.p,{children:["It\u2019s recommended to use a ",(0,t.jsx)(n.a,{href:"/docs/next/configuration",children:"config file"}),", but you can also add options in your ",(0,t.jsx)(n.code,{children:".vimrc"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:'autocmd FileType javascript setlocal formatprg=prettier\\ --single-quote\\ --trailing-comma\\ es5\n" Use formatprg when available\nlet g:neoformat_try_formatprg = 1\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Each space in Prettier options should be escaped with ",(0,t.jsx)(n.code,{children:"\\"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"ale",children:(0,t.jsx)(n.a,{href:"https://github.com/dense-analysis/ale",children:"ALE"})}),"\n",(0,t.jsx)(n.p,{children:"ALE requires either Vim 8 or Neovim as ALE makes use of the asynchronous abilities that both Vim 8 and Neovim provide."}),"\n",(0,t.jsxs)(n.p,{children:["The best way to install ALE is with your favorite plugin manager for Vim, such as ",(0,t.jsx)(n.a,{href:"https://github.com/junegunn/vim-plug",children:"vim-plug"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"Plug 'dense-analysis/ale'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["You can find further instructions on the ",(0,t.jsx)(n.a,{href:"https://github.com/dense-analysis/ale#3-installation",children:"ALE repository"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"ALE will try to use Prettier installed locally before looking for a global installation."}),"\n",(0,t.jsx)(n.p,{children:"Enable the Prettier fixer for the languages you use:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"let g:ale_fixers = {\n\\   'javascript': ['prettier'],\n\\   'css': ['prettier'],\n\\}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["ALE supports both ",(0,t.jsx)(n.em,{children:"linters"})," and ",(0,t.jsx)(n.em,{children:"fixers"}),". If you don\u2019t specify which ",(0,t.jsx)(n.em,{children:"linters"})," to run, ",(0,t.jsx)(n.strong,{children:"all available tools for all supported languages will be run,"})," and you might get a correctly formatted file with a bunch of lint errors. To disable this behavior you can tell ALE to run only linters you've explicitly configured (more info in the ",(0,t.jsx)(n.a,{href:"https://github.com/dense-analysis/ale/blob/ed8104b6ab10f63c78e49b60d2468ae2656250e9/README.md#faq-disable-linters",children:"FAQ"}),"):"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"let g:ale_linters_explicit = 1\n"})}),"\n",(0,t.jsxs)(n.p,{children:["You can then run ",(0,t.jsx)(n.code,{children:":ALEFix"})," in a JavaScript or CSS file to run Prettier."]}),"\n",(0,t.jsx)(n.p,{children:"To have ALE run Prettier on save:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"let g:ale_fix_on_save = 1\n"})}),"\n",(0,t.jsxs)(n.p,{children:["It\u2019s recommended to use a ",(0,t.jsx)(n.a,{href:"/docs/next/configuration",children:"config file"}),", but you can also add options in your ",(0,t.jsx)(n.code,{children:".vimrc"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"let g:ale_javascript_prettier_options = '--single-quote --trailing-comma all'\n"})}),"\n",(0,t.jsx)(n.h2,{id:"coc-prettier",children:(0,t.jsx)(n.a,{href:"https://github.com/neoclide/coc-prettier",children:"coc-prettier"})}),"\n",(0,t.jsxs)(n.p,{children:["Prettier extension for ",(0,t.jsx)(n.a,{href:"https://github.com/neoclide/coc.nvim",children:"coc.nvim"}

1)," which requires neovim or vim8.1.\nInstall coc.nvim with your favorite plugin manager, such as ",(0,t.jsx)(n.a,{href:"https://github.com/junegunn/vim-plug",children:"vim-plug"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"Plug 'neoclide/coc.nvim', {'branch': 'release'}\n"})}),"\n",(0,t.jsx)(n.p,{children:"And install coc-prettier by command:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"CocInstall coc-prettier\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Setup ",(0,t.jsx)(n.code,{children:"Prettier"})," command in your ",(0,t.jsx)(n.code,{children:"init.vim"})," or ",(0,t.jsx)(n.code,{children:".vimrc"})]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"command! -nargs=0 Prettier :call CocAction('runCommand', 'prettier.formatFile')\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Update your ",(0,t.jsx)(n.code,{children:"coc-settings.json"})," for languages that you want format on save."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-json",children:'{\n  "coc.preferences.formatOnSaveFiletypes": ["css", "markdown"]\n}\n'})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://github.com/neoclide/coc-prettier",children:"coc-prettier"})," have same configurations of ",(0,t.jsx)(n.a,{href:"https://github.com/prettier/prettier-vscode",children:"prettier-vscode"}),", open ",(0,t.jsx)(n.code,{children:"coc-settings.json"})," by ",(0,t.jsx)(n.code,{children:":CocConfig"})," to get autocompletion support."]}),"\n",(0,t.jsx)(n.h2,{id:"running-manually",children:"Running manually"}),"\n",(0,t.jsxs)(n.p,{children:["If you want something really bare-bones, you can create a custom key binding. In this example, ",(0,t.jsx)(n.code,{children:"gp"}),' (mnemonic: "get pretty") is used to run prettier (with options) in the currently active buffer:']}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-vim",children:"nnoremap gp :silent %!prettier --stdin-filepath %<CR>\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Note that if there\u2019s a syntax error in your code, the whole buffer will be replaced with an error message. You\u2019ll need to press ",(0,t.jsx)(n.code,{children:"u"})," to get your code back."]}),"\n",(0,t.jsx)(n.p,{children:"Another disadvantage of this approach is that the cursor position won\u2019t be preserved."})]})}function h(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453(e,n,r){r.d(n,{R:()=>o,x:()=>a});var i=r(6540);let t={},s=i.createContext(t);function o(e){let n=i.useContext(s);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);