Neovimでのフロントエンド開発環境 2022
投稿が予定より大幅に遅れてしまい申し訳ありません。 忙しかったのと記事のボリュームが想定より大きくなってしまい執筆に時間がかかってしまいました。 はじめに フロントエンドエンジニア(主にReact)をしているYano (@yuki_ycino) といいます。 去年のAdvent Calendarでは Neovimでのフロントエンド開発環境 2021 という記事を書きました。 この1年でかなり情勢が変わったので現在の状況について解説する記事となります。 去年に引き続きこの記事では主にLSPによる開発サポート及び現代の開発における必須プラグインの紹介をメインに進めています。 具体的には coc.nvim とNeovim built-inのLSP実装であるnvim-lspでの設定の2つについて解説と具体的な設定の紹介をしようと思います。 自分はcoc.nvimを普段使っており、nvim-lspを
coc.nvimのサポートプラグインを管理する
B! 0 0 0 0 Vim/NeoVimをVSCodeのような開発環境にしてくれるプラグインであるcoc.nvimの 各言語などに対するサポートプラグインの管理方法について。 coc.nvim サポートプラグインのインストール方法 サポートプラグインの管理方法 coc.nvim coc.nvimはVim/NeoVimをVSCodeのような開発環境にしてくれるプラグイン。 coc.nvim自体のインストールは.vimrc/init.vimなどの中で 適当なプラグインマネージャーを使って管理します。 dein.vimなら .vimrc 1 2 3 if has('nvim-0.4.0') || has('patch-8.1.1719') call dein#add('neoclide/coc.nvim') endif Vimならpatch 8.1.1719, NeoVimなら0.4.0以降で
coc.vimの補完メニューの色を変える - ハイパーマッスルエンジニア
coc.vimの補完メニューの選択中の色を変更したかったが苦戦したのでここに記す。 補完メニューの色を変えるには:h CocFloatingによるとPmenuが割り当てられていると書いてあったので、選択中の色を示すPmenuSelを変更したが反映されなかった。 " これは反映されなかった hi PmenuSel guifg=#cccccc guibg=#2a3d75 解決策はここにあった。 https://github.com/neoclide/coc.nvim/issues/4011 " coc.vimの補完メニューの選択中の色を変更 hi CocMenuSel guifg=#cccccc guibg=#2a3d75 選択中の色を青っぽくできた 選択中の色ではなくメニュー自体の色を変えたいときは下記 hi CocFloating guifg=#c29976 guibg=#001622 終
coc.nvimの補完メニュー（ポップアップメニュー）の仕様が変わったらしい - Qiita
coc.nvimの補完メニューの仕様が変わったらしい 記事を書いた背景 coc.nvimの0.0.82で補完メニューの仕様が変わったようです。 詳しくは以下のプロリクエスト、もしくは:h coc-completionに詳しく書いています。 [WIP] Custom completion menu #3862 それに伴い関数名などが変更されたため、設定の一部を変更する必要があります。今後、新しいバージョンを利用する方は、過去の記事がほとんど使えなくなると思われます。8/9現在、Googleで検索したところ、日本語でこの件を扱っている記事が見当たらないため、簡単にですがまとめておこうと思いました。 しかし、筆者自身もこのアップデートを知って、1,2時間程度でこの記事を書いてるため、理解が甘いところがあるかもしれませんがご了承ください。 変更点 以下がこれまで有効だった設定です。 " Enter
coc.nvimでウィンドウ分割して定義ジャンプしたい
初めに 普段coc.nvimを使ってよく定義ジャンプしていますが、たまに画面分割して定義ジャンプしたいことがあります。 coc.nvimがデフォルトで用意している<Plug>(coc-definition)ではそれができないので、ちょっとだけ手を入れる必要があります。 やり方 vimrcに次の設定を追加して、<C-t>で定義ジャンプする再のウィンドウの開き方を指定できます。 " [ " {"text": "(e)dit", "value": "edit"} " {"text": "(n)ew", "value": "new"} " ] " NOTE: text must contains '()' to detect input and its must be 1 character function! ChoseAction(actions) abort echo join(map(co
[第11回] Neovimのすゝめ – LSPをセットアップ（coc編）
はじめに最近、Neovimの環境構築しましたが、UI設定、キーマッピング、オプション、プラグイン...と沢山の設定が必要でした。Vimを使うなら環境構築の壁を自力で乗り越えてこそ！という見方もありますが、LSPでLanguage Serverと連携必須になったり設定ファイルがVim Script(.vimrc)からLua言語になったりと、壁は高くなる一方です。これからVimを始める入門者には厳しいんじゃないかなぁ...と思うので設定したついでに記事に残しておきたいと思います。私自身はVSCodeがベータ版の頃からメインエディタとして使っていた為、VSCodeで出... LSP LSPとはLanguage Server Protocolの略です。 手っ取り早く伝えると、これを入れるとプログラミング言語の構文解析・構文ハイライト・静的エラーチェック・リファレンス参照・入力補完といった機能がNe
![[第11回] Neovimのすゝめ – LSPをセットアップ（coc編）](https://cdn-ak-scissors.b.st-hatena.com/image/square/ad297586600864842e5d0d7f724052e45d5dda33/height=288;version=1;width=512/https%3A%2F%2Fwonwon-eater.com%2Fwp-content%2Fuploads%2F2021%2F10%2Fneovim-coc-730x410.png)
Coc.nvimを触ってみようアドベントカレンダー 17日目 – coc-git | DevelopersIO
とっても楽しいcoc.nvimを触ってみようというアドベントカレンダーです。�17日目はcoc-git。GitHub及びGitLabを使っている場合に、少し操作がお手軽になります。 Coc.nvimを触ってみよう Advent Calendar 2021 17日目です。 今回は coc-git です。 coc-git について gitリポジトリのステータス取得及び操作が可能になるcoc拡張です。GitHub及びGitLabのAPIキーを使うことでリモートリポジトリの情報取得等も可能になります。 coc-git をインストールする vimを起動した状態で以下のコマンドを実行します。 :CocInstall coc-git GitHub及びGitLabの操作をする場合は、.envrc にAPIキーを設定しておきます。 echo "export GITHUB_API_TOKEN=PERSONAL
coc.nvim で JSON/YAML Schema による YAML ファイルの補完を行う方法 - Qiita
はじめに 私は普段 neovim 上で coc.nvim を使ったコード補完を行っている。仕事で JSON Schema もしくは YAML Schema を使って YAML ファイルの記入を補完したくなったので neovim + coc.nvim 環境上で、JSON Schema もしくは YAML Schema を使った YAML ファイル上での補完をセットアップする方法を解説する。 セットアップ方法 本稿では coc.nvim は既にセットアップされているものとする。coc.nvim をセットアップしていない人は適当な記事を参照してセットアップされたし。 coc 上で yaml をインストールする 最初に coc-yaml をインストールする。リンク先にある通り、 と neovim のコマンドで叩くだけである。 YAML ファイルのスキーマを指定する スキーマの指定方法には何種類かが
CocCommandをワンラインでやってみた | DevelopersIO
blog 2022-02-09-140000 vim起動時に、編集するファイル名に加えてコマンドを渡すと以下の順で処理されます。 ファイルが読み込まれる autocommandとmodelineが適用される 引数のコマンドが実行される 引数にコマンドを渡す習慣がなかったこともあり、「渡せたんだ」という感想でした。これを知ったキッカケはCoc拡張の更新手順です。ファイルの編集画面を経由せずに実行できるのは手軽です。更新手順含めて色々ためしてみました。 vimを開かず1コマンドで更新してみる 手続きは以下の通り。 vim -c 'CocUpdateSync|q' via: Update extensions 導入済みの拡張が多い場合、処理時間が長くなる上にいつ終わるのかわかりません。おすすめは末尾の q を外すことです。 vim -c 'CocUpdateSync' 以下のように表示されます。
Coc.nvimを触ってみようアドベントカレンダー 18日目 – coc-gist | DevelopersIO
Coc.nvimを触ってみよう Advent Calendar 2021 18日目です。 今回は coc-gist です。 coc-gist について vimからGitHub Gistの作成、更新、一覧確認が手軽にできるcoc拡張です。 coc-gist をインストールする vimを起動した状態で以下のコマンドを実行します。 :CocInstall coc-gist インストール完了後にToken発行の選択がでます。ここで y を入力します。 coc-todolist-syncというアプリケーションに対して承認が求められます。これは分かりにくい代物かもしれませんが、coc-gistの認証に使われているキーの名前です。 承諾すると完了です。 なお、GitHubのAuthrized OAuth Appsからcoc-todolist-syncを外しても、ローカル側ではキャッシュされているためco
Coc.nvimを触ってみようアドベントカレンダー 15日目 – coc-rls | DevelopersIO
とっても楽しいcoc.nvimを触ってみようというアドベントカレンダーです。�15日目はcoc-rls。vimでRustを触りたい場合にはこの拡張を入れておけばとりあえず問題なしです。 Coc.nvimを触ってみよう Advent Calendar 2021 15日目です。 今回は coc-rls です。 coc-rls について Rustのコード補完、lintを行うcoc拡張です。vscode-rustのforkとなります。 coc-rls をインストールする まずはrustupにて各種コンポーネントをインストールします。 % curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh info: downloading installer Welcome to Rust! This will download and i
Coc.nvimを触ってみようアドベントカレンダー 14日目 – coc-toml | DevelopersIO
Coc.nvimを触ってみよう Advent Calendar 2021 14日目です。 今回は coc-toml です。 coc-toml について Taploを使った、TOMLのcoc拡張です。Taplo自体便利ですが、coc拡張はより便利になっています。 coc-toml をインストールする vimを起動した状態で以下のコマンドを実行します。 :CocInstall coc-toml 依存モジュールにtaploが指定されているため、追加でTaploをインストールする必要はありません。 使ってみる まずは vim test.toml 等で適当なtomlファイルを編集している状態にした上で、スキーマをダウンロードしましょう。スキーマをダウンロードすることで、独自の設定を持つtomlファイルに対して設定に沿って正確にlintされるようになります。 :CocCommand toml.down
maguro.dev - coc.nvim の拡張機能である coc-pairs で改行時にカーソル位置を望む場所にもってくる方法
カッコ補完プラグイン coc-pairs で、改行後のカーソル位置がクールな感じになるように設定する方法について調べました。 TL;DR coc-pairs で改行時にカーソル位置を（大半のエンジニアが）望む位置にもってくるためには、.vimrc 等の設定ファイルに以下の記述をした上で、 inoremap <silent><expr> <cr> pumvisible() ? coc#_select_confirm() : "\<C-g>u\<CR>\<c-r>=coc#on_enter()\<CR>" Vim上で :CocConfig を実行して開く coc-settings.json に以下の設定を書けばOKです。 { // 前略 "coc.preferences.formatOnType": true } ↓設定後↓ （ "coc.preferences.formatOnType":
Coc.nvimの拡張を環境変数経由でNeoVim起動時に自動インストールされるようにしてみた | DevelopersIO
環境移行時に、NeoVim拡張のCoc.nvimが独自に持っている拡張をインストールしなおす方法を探した結果、若干手作業が必要だったもののなんとかなったという記録です。 PCの交換に伴うセットアップ作業を進める際に、前環境の設定ファイルをAirDrop経由にて取り出す、という手続きが最近の常套手段となりつつあります。他の物理デバイスを介さないのはとても気楽です。 ただ、割と大変なケースがありました。NeoVimの拡張であるcoc.nvimです。手元の環境ではNeoVim自体はdein.tomlを引っ張れば即完了で、coc.nvim本体もNeoVim初回起動時にインストールされます。が、coc.nvimの独自拡張は話が別です。 coc.nvimの拡張を大量導入していたためにインストールコマンドを打つのが億劫でしたが、一応の対応手段があったため紹介含めて書いてみることにします。 Cocインスト
ShellScriptでの事故防止としてShellCheckを適用してみた | DevelopersIO
ShellScriptの誤動作をチェックするためにShellCheckでLintを掛けてみました。兎に角Warningsを解消するのが大変でしたが、事故を防ぐには有効だと思います。 Linterを用いてのチェックを行う場合、個人的に一番厄介なのはシェルスクリプト。いずれの環境でも問題なく動かせることを見送るとしても、それでもWarning表示がなかなか消えません。 ShellCheckを使った、OSX環境でのWarning対処として実践してみたことについて書いてみました。 ShellCheck環境の設定 ShellCheckを有効にしておきます。 brew install shellcheck この記事での実行は coc-diagnostic にて。 :CocInstall coc-diagnostic とあるスクリプトのWarning潰し よくあるシェルスクリプトもWarningの宝庫で
coc.nvimでPHPStanやPHP_CodeSnifferを使う - Qiita
coc.nvimはVimのLSPクライアント・プラグインの一つです。 cocは自分自身がVimプラグインでありながら、拡張機能（エクステンション）の機構を持っており、LSPサーバをエクステンションをとしてインストールすることで機能を追加することができます。 PHPのLSPサーバのcocエクステンションもいくつかあります。例えばPHPのLSPサーバであるIntelephenseのcocエクステンションとしてcoc-phplsがあります。 coc-phplsをインストールするとcoc経由でPHPの自動補完・定義ジャンプ・ホバー（ヒント）表示・バグ検出などの機能を使えるようになります。 coc-phplsだけでもある程度のバグ検知は可能ですが、Intelephenseが提供するバグ検出は現時点ではPHPStanに比べると弱く、またPHP_CodeSnifferのようにコーディング規約違反を検出す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
coc.nvimのphpls拡張の代わりにintelephenseを入れた - Qiita
coc-lists/Readme.md at master · neoclide/coc-lists
VimでモダンなRuby開発環境を構築する
GitHub - kqito/coc-deepl: deepl extension for coc.nvim