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必須です。

vscode-ghq - Visual Studio Marketplace
Extension for Visual Studio Code - ghq interface for Visual Studio Code

Expand Selection

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

expand-region - Visual Studio Marketplace
Extension for Visual Studio Code - expand selection , It works similar to ExpandRegion for Emacs and “Structural Selection” (Control-W) in the JetBrains IDE's (i.e. IntelliJ IDEA).

ESLint

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

Monokai Theme

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

Monokai GRS - Visual Studio Marketplace
Extension for Visual Studio Code - Dark theme based on color shema Monokai

マルチカーソル

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など)で移動しながら選択範囲をいじれるほうが断然よいです。

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

Visual Studio Code でEmacsのリージョン選択できるExtensionを作ってみた - にわとりプログラマーの備忘録
Visual Studio Code でEmacsのリージョン選択を行えるextensionを作ってみました。 https://github.com/t-yng/vscode-emacs-region 作り方については、 こちらのEXTENSIONSのページを参考にしました。 [開発環境] OS : OS X El Capitan プロジェクトの雛形を作成 雛形の生成にはYeomanとgenerator-code(Yoemanにおけるvscodeのextension生成ツール)を利用します。 Yeomanとはアプリケーション開発における、雛形の作成やビルドなどの作業をサポートしてくれる便利ツー…

ctrl deleteで文字削除

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

ctrl kで削除&コピー

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

Cut All Right - Visual Studio Marketplace
Extension for Visual Studio Code - Cut rest of line. Like `Delete All Right` but cut it and store to clipboard.

Wakatime

WakaTime - Visual Studio Marketplace
Extension for Visual Studio Code - Metrics, insights, and time tracking automatically generated from your programming activity.

ctrl+gをエスケープに

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

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

GitHub - Hammerspoon/hammerspoon: Staggeringly powerful macOS desktop automation with Lua
Staggeringly powerful macOS desktop automation with Lua - GitHub - Hammerspoon/hammerspoon: Staggeringly powerful macOS desktop automation with Lua

solargraph

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

GitHub - castwide/solargraph: A Ruby language server.
A Ruby language server. Contribute to castwide/solargraph development by creating an account on GitHub.

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

おわり

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

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