普段使いのエディターは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必須です。

Expand Selection

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

ESLint

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

Monokai Theme

最初から入っているMonokaiテーマはRubyのインスタンス変数@hogehogeをハイライトしれくれませんでしたので、他の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は右側を削除するだけで、ペーストすることができません。そりゃこまるってことで↓をいれています。

Wakatime

ctrl+gをエスケープに

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

Qiita
TouchBarつきのMacBookでは、エスケープキーが使いにくいので、Escapeキーの代りに `^[`を割り当てます。`Cmd-K` `Cmd-s` からkeybindigs.jsonを開いて以下を追加。 ```javascr...

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

Hammerspoon/hammerspoon
Staggeringly powerful OS X desktop automation with Lua - Hammerspoon/hammerspoon

solargraph

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

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

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

Visual Studio Code で Ruby on Rails 開発におすすめ拡張機能 | SEROKUジャーナル
「SEROKU フリーランス(以下、SEROKU)」の中の人をやっている ryosuke です。 今回は我々が業務で使用しているコードエディタである Visual Studio Code を使って Ruby on Railsを使用した開発をするときの設定やおすすめ拡張機能について取り上げます。 Visual Studio Code (vscode) とは Microsoft が主体となって開発、提供しているプログラミングコードエディタです。オープンソースであり、無料で利用することができます。vscodeに類似するエディタにGithubが開発しているAtomがありますが、後発のvscodeの方がスピードや利便性が高かったため、WESEEKでは早い段階で使用するエディタをatomからvscodeに移行しました。 vscodeは主要なプログラミング言語の一部に標準で対応していますが、 VS code Marketplace などで公開されている拡張機能(Extension)を追加でインストールすることで、対応するプログラミング言語を増やすことができます。 対応したプログラミング言語で記述されたプログラムソースファイルをvscodeで扱うとき、以下の挙げる便利な機能の恩恵を得られます。 Syntax highlight 入力補完 (IntelliSense) Lint と自動訂正 コードナビゲーション (methodなどの定義へのジャンプ、 注目しているmethodなどを利用している箇所の表示) デバッグ コードリファクタ コードを書く人にとっては言うまでもありませんが、これらの機能はプログラミングの効率や正確さに大きく影響するといって過言ではありません。こういった機能がないエディタ、例えばWindowsに標準で付属するメモ帳でプログラミングをするというのは、さながらプロの道具を使わずに仕事をする料理人や機械工場、土木現場の技術者に例えてもよいでしょう。 プロジェクトでのvscodeの設定を統一する vscodeは400を超える設定項目があり、自分の好みにカスタマイズすることができます。vscodeのメニューから「ファイル」 -> 「基本設定」 -> 「設定」 を選ぶことで設定を編集する画面が表示されます。個人で変更した設定はsettings

おわり

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

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