PIYO - Tech & Life -

Emacs卒業なるか。JS用のエディタとしてVS Code使い始める際に設定したこと。

Emacs VSCode IDE

普段使いのエディターはEmacsでして、仕事で一番書いている割合の多いRailsやテキストを書く際に使っています。

JavaScriptが面倒です。JSXやVueコンポーネントなど少々複雑なフォーマットのファイルを編集したり、サクっとESlintを書けたりするのがうまくいきません。いや、できないことはないけど惜しい感じで便利ではないのです。

そこでこれまではWebStormを使ってきました。有償のIDEで必要な機能は大体揃っているし、JSの対応もバッチリでほぼ言うことありません。

WebStormの唯一の欠点は鈍重であることです。いちいち動作が遅いし、メモリを食うので他のアプリケーションへの影響もあります。正確にいえばメモリ使用上限は設定ファイルで書き換えられますが、メモリを食わないようにすると動作がもっと遅くなるという状況に陥るため詰んでいます。

そこで大体としてVisual Studio Codeを試してみることにしました。なんとなくイメージ的にJavaScriptな人がよく使っている印象があったからです。

入れたもの・変えた設定メモ

前置きが長くなりましたが、EmacsユーザーとしてCodeにも入れておきたい拡張や設定などをメモしておきます。

というのも、しばらく使ってみて諦める可能性が高く、そしてさらにしらばく経ってからまたVS Codeに戻ってみようと思うことになるのが目に見えているからです。そうです、「VS Codeでも使ってみるか」と思ったの、これで3回目ぐらいです。

EmacsとWebStorm(というかJetBrains系)のいいとこどりというか、無理なくできる範囲で設定しました。

ようこそ画面非表示

GHQ

各ソースコードをGHQ管理にしているので入れてあります。いつも開くプロジェクトはctrl+rでいいけど、たまに開くプロジェクトの場合はGHQ必須です。

https://marketplace.visualstudio.com/items?itemName=marchrock.vscode-ghq

Expand Selection

カーソル位置を基準に選択範囲を広げられる拡張、必須です。選択するのって大体変数とか文字列といった単位なので。

https://marketplace.visualstudio.com/items?itemName=letrieu.expand-region

ESLint

ESLintを入れて保存のたびauto fixさせるようにしました。

Monokai Theme

最初から入っているMonokaiテーマはRubyのインスタンス変数@hogehogeをハイライトしれくれませんでしたので、他のMonokaiを入れました。

https://marketplace.visualstudio.com/items?itemName=GoliafRS.monokai-grs

マルチカーソル

VS Codeに最初からはいってますね。cmd+dでいけそうなのでひとまず使ってみます。

プロジェクトツリー

サイドバーにちょっとクセがありました。

Macだとenterキーでリネームになってしまいますが、リネームはめったにありませんのでそのまま開いてほしい。あとはエディターグループを新しく開くのも好きじゃなかったのでちょっと設定をいじりました。

enterにあたっていたrenameFileをはずし、ctrl+enterにもっていくことで、enterでファイルを開けるようになりました。

    {
        "key": "ctrl+enter",
        "command": "renameFile",
        "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
    },
    {
        "key": "enter",
        "command": "-renameFile",
        "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
    },

画面分割

Emacsユーザーとしては画面をゴリゴリに分割したいという要望があります。そこを求めてしまうとEmacsからは出られなくなりますのである程度妥協します。

VS Codeではcmd+1cmd+2などのキーでグループという列に移動できます。グループにはエディターのタブが含まれる感じ。今画面上にあるグループよりもひとつ上のグループへ移動しようとする(ショートカットキーを押す)と自動的にあたらしいグループが作られます。

例)グループ2まである場合、cmd+3でグループ3が開く。cmd+4は何も起こらない。

最近開いたファイルへの移動

最近開いたファイルへ移動する手段がほしい。Emacsでいうところのopen-recentみたいなやつ。これは最近開いたファイルというよりは、同時に編集しているファイルへ戻りたいという意図が強いです。

僕はWebStorm等のIDEに合わせてcmd+equickOpenを割り当てています。

Bookmark

  • ブックマークのトグル
  • 次のブックマークへ移動
  • 前へ移動

の3つにEmacs時代と同じキーバインドを割り当てました。

キーボードで選択

マウスやカーソルキーで範囲選択をするは大変です。Emacsのようにmark setして起点を設定したら、通常のカーソル移動(ctrl+nなど)で移動しながら選択範囲をいじれるほうが断然よいです。

なのでこれを入れました。キーバインドは多少調整してあります。

http://yng.hatenablog.jp/entry/2016/03/06/114836

ctrl deleteで文字削除

    {
        "key": "ctrl+backspace",
        "command": "deleteWordPartLeft",
        "when": "textInputFocus && !editorReadonly"
    },

ctrl kで削除&コピー

VS Codeに最初からあるctrl+kは右側を削除するだけで、ペーストすることができません。そりゃこまるってことで↓をいれています。

https://marketplace.visualstudio.com/items?itemName=cou929.vscode-cut-all-right

Wakatime

https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

ctrl+gをエスケープに

Emacsのようにctrl+gでなんでもキャンセルしたいです。↓を参考にいろんなキャンセル系をctrl+gに割り当てました。

https://qiita.com/uehaj/items/f2c71325c9f7dc10357c

でもすべてには対応しきれていないので、Mac全体を統制しているhammerspoon側での対応をしたほうがいいんじゃないかと思っています。

https://github.com/Hammerspoon/hammerspoon

solargraph

Ruby用のLanugage Serverのsolargraphというのも入れてみました。Railsを書くときにあると良さそうだったので。

https://github.com/castwide/solargraph

こちらもちょっと参考にしました。

https://seroku.jp/wp/visual-studio-code-%E3%81%A7-ruby-on-rails-%E9%96%8B%E7%99%BA%E3%81%AB%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD/

おわり

JavaScriptを書くのにはやはりいいですね。WebStormより起動が速いし、ESLintとかはサクッと効いてくれるので。

一番よく書くRubyのサポートが若干弱い気もしますが、そもそもそんなものEmacsではなかったようなもんなので、まずまず使えています。