stable

編集

Vim セットアップ

Vimユーザーは、Prettier専用のvim-prettier、またはPrettierをサポートする汎用的なlint/フォーマットエンジンであるNeoformatやALEのいずれかをインストールできます。

vim-prettier

インストールと使用方法については、vim-prettierのREADMEをご覧ください。

Neoformat

Neoformatをインストールする最良の方法は、vim-plugなどのVim用のお気に入りのプラグインマネージャーを使用することです。

Plug 'sbdchd/neoformat'

NeoformatでプロジェクトローカルバージョンのPrettierを使用する（つまり、$PATHでprettierを探す代わりにnode_modules/.bin/prettierを使用する）には、neoformat_try_node_exeオプションを設定する必要があります。

let g:neoformat_try_node_exe = 1

サポートされているファイルで:Neoformatまたは:Neoformat prettierを実行して、Prettierを実行します。

保存時にNeoformatでPrettierを実行するには

autocmd BufWritePre *.js Neoformat

他のイベントのautocmdを設定することで、Vimにコードをより頻繁にフォーマットさせることができます。以下にいくつかの便利なものを示します。

  • TextChanged：ノーマルモードでテキストに変更が加えられた後
  • InsertLeave：インサートモードを終了するとき

たとえば、上記の両方のイベントとBufWritePreを組み合わせてフォーマットできます。

autocmd BufWritePre,TextChanged,InsertLeave *.js Neoformat

詳細については、Vimで:help autocmd-eventsを参照してください。

設定ファイルを使用することをお勧めしますが、.vimrcにオプションを追加することもできます。

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

Prettierオプションの各スペースは、\でエスケープする必要があります。

ALE

ALEでは、Vim 8またはNeovimが必要です。これは、ALEがVim 8とNeovimの両方が提供する非同期機能を使用するためです。

ALEをインストールする最良の方法は、vim-plugなどのVim用のお気に入りのプラグインマネージャーを使用することです。

Plug 'dense-analysis/ale'

詳細な手順については、ALEリポジトリを参照してください。

ALEは、グローバルインストールを探す前に、ローカルにインストールされたPrettierを使用しようとします。

使用する言語のPrettierフィクサーを有効にします。

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

ALEは*リンター*と*フィクサー*の両方をサポートします。実行する*リンター*を指定しない場合、**サポートされているすべての言語の利用可能なすべてのツールが実行**され、リンターエラーが多数表示された状態で正しくフォーマットされたファイルが表示される場合があります。この動作を無効にするには、明示的に構成したリンターのみを実行するようにALEに指示できます（詳細については、FAQを参照してください）

let g:ale_linters_explicit = 1

その後、JavaScriptまたはCSSファイルで:ALEFixを実行して、Prettierを実行できます。

保存時にALEでPrettierを実行するには

let g:ale_fix_on_save = 1

設定ファイルを使用することをお勧めしますが、.vimrcにオプションを追加することもできます。

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

coc-prettier

coc.nvimのPrettier拡張機能。neovimまたはvim8.1が必要です。vim-plugなどの、お気に入りのプラグインマネージャーでcoc.nvimをインストールします。

Plug 'neoclide/coc.nvim', {'branch': 'release'}

そして、コマンドでcoc-prettierをインストールします。

CocInstall coc-prettier

init.vimまたは.vimrcにPrettierコマンドを設定します。

command! -nargs=0 Prettier :call CocAction('runCommand', 'prettier.formatFile')

保存時にフォーマットする言語のcoc-settings.jsonを更新します。

{
  "coc.preferences.formatOnSaveFiletypes": ["css", "markdown"]
}

coc-prettierは、prettier-vscodeと同じ構成を持っています。:CocConfigでcoc-settings.jsonを開いて、オートコンプリートのサポートを取得します。

手動実行

本当に最小限のものが欲しい場合は、カスタムキーバインディングを作成できます。この例では、現在アクティブなバッファーでprettier（オプション付き）を実行するために、gp（ニーモニック：「get pretty」）が使用されています。

nnoremap gp :silent %!prettier --stdin-filepath %<CR>

コードに構文エラーがある場合、バッファー全体がエラーメッセージで置き換えられることに注意してください。コードを元に戻すには、uを押す必要があります。

このアプローチのもう1つの欠点は、カーソルの位置が保持されないことです。

← WebStorm セットアップ変更の監視 →