マークアップエンジニアにおいてエディタは、もっとも身近なツールのひとつで、あなたもきっと日頃使い慣れたエディタでコーディングをしていることだろう。わたしはAtom editorが主ツールでいかなるシーンにおいても活用しているが、それと同時に不便さも覚える。
あなたは不便を感じたとき、どうするだろうか？
我慢してそのまま使い続ける？
拡張機能で解消する？
別のエディタを検討する？
わたし自身は、しばらくAtomを使い続けて、なかなか手放すことができなかったのだけれど、いよいよ不満に耐えかねてVSCodeへ乗り換えを実施した。
その手順を記しておきたい。
もくじ
なぜVSCodeか？
単純にトレンドだから。安直ではあるが、Atomを使った理由もフロントエンド界隈でトレンドだったから乗り換えたと記憶している。
VSCodeを選択した理由は上述のとおりだが、乗り換えに踏み切った要因は、不便さを覚えた作業をVSCodeで試したところスムーズに動作したことが挙げられる。プロジェクトフォルダを多数表示させなければならないとき、フリーズしたり落ちたりするケースが頻発した。ところがVSCodeだと平然と動作し続けるではないか。これにはとても心を動かされた。
冒頭にも述べたとおり、日頃使い慣れたエディタでコーディングしているわけで、ツールの不良は作業者のストレスとなって、果ては仕事のクオリティに影響するかもしれない。
そう思ったら居ても立ってもいられず乗り換えに踏み切った。そういう次第だ。
設定したこと
エディタの乗り換えにおいて重要なのが「操作感」。乗り換えた直後も大体同じように作業できるか否かが重要だ。Atom editorは長年使い続けたことで、いくつかの拡張機能やショートカットキーなど身体が覚えている操作というものなど一緒にしておきたい。それを踏まえて以下のようにした。
「ようこそページ」をOFF
初期インストールしたときには必ず表示されるスクリーンで、ヘルプや設定等へのリンクが示されているが大体不要だろう。「起動時にウェルカムページを表示」のチェックを外すことで今後表示しないようにする。
「Trim Final Newlines」をON
最後の行以降の空白行を削除したい。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Trim Final Newlines」を入力することで対象のものが見つかる。「有効にすると、ファイルの保存時に最終行以降の新しい行をトリミングします。」にチェックを付ける。
「Trim Trailing Whitespace」をON
行末尾の半角を削除したい。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Trim Trailing Whitespace」を入力することで対象のものが見つかる。「有効にすると、ファイルの保存時に末尾の空白をトリミングします。」にチェックを付ける。
タブサイズを変える
1つのタブに相当する半角スペース数を変更したい。デフォルトでは1回のタブキー入力で、4つ半角スペースが挿入される。これを2つ半角スペースにする。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Tab Size」を入力することで対象のものが見つかる。「4 → 2」にする。
フォントサイズを変える
フォントサイズを変更したい。デフォルト値は12pxだ。これを13pxにする。ツールバーの「Code – 基本設定 – 設定」からVSCodeの定画面を開く。スクリーン上部の検索フィールドに「Font Size」を入力することで対象のものが見つかる。「12 → 13」にする。
空白文字を表示する
空白を視覚化したい。ドットになるあれだ。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Render Whitespace」を入力することで対象のものが見つかる。セレクトボックス値を「boundary」にする。
日本語化する
VSCodeを日本語化したい。 ツールバーの「Code – 基本設定 – 拡張機能」からEXTENSIONSサイドバーを表示する。サイドバー上部の検索フィールドに「Japanese Language Pack for Visual Studio Code」を入力することで対象のものが見つかる。インストールする。
HTML, JSXタグをハイライトする
HTMLタグにカーソルが合っているとき関連する開始タグ、終了タグがハイライトするあれだ。 ツールバーの「Code – 基本設定 – 拡張機能」からEXTENSIONSサイドバーを表示する。サイドバー上部の検索フィールドに「Highlight Matching Tag」を入力することで対象のものが見つかる。インストールする。
JavaScriptのスニペットを追加する
JavaScriptの入力補助してくれるあれだ。わたしの場合は、clの入力がconsole.log(obj)に補完される機能が絶対不可欠で無くてはならない拡張機能だ。ツールバーの「Code – 基本設定 – 拡張機能」からEXTENSIONSサイドバーを表示する。サイドバー上部の検索フィールドに「JavaScript Snippets」を入力することで対象のものが見つかる。インストールする。どうも類似した名称のものが多く紛らわしい。もっともインストール数が多いものと判断するとよいだろう。
EditorConfigを追加する
エディタ環境を統一してくれるあれだ。操作感という側面ではないが、導入していないことで不統一を起こさないとも言い切れない。とりあえず入れておきたい。ツールバーの「Code – 基本設定 – 拡張機能」からEXTENSIONSサイドバーを表示する。サイドバー上部の検索フィールドに「EditorConfig for VS Code」を入力することで対象のものが見つかる。インストールする。
ESLintを追加する
構文チェックするあれだ。JavaScriptに触れる機会があるならば必須ともいえるリンティングツールの定番は入れておきたい。ツールバーの「Code – 基本設定 – 拡張機能」からEXTENSIONSサイドバーを表示する。サイドバー上部の検索フィールドに「ESLint」を入力することで対象のものが見つかる。インストールする。
テーマを変える
VSCodeの見栄えを変更したい。Sublime Text – Atom – VSCodeと渡り移ってきた身としては、できればmonokaiにしたい思いがある。ツールバーの「Code – 基本設定 – 拡張機能」からEXTENSIONSサイドバーを表示する。サイドバー上部の検索フィールドに「One Monokai Theme」を入力することで対象のものが見つかる。インストールする。これも類似したものが多数存在している。好みの問題だろうからインストールしてみて判断すると良さそうだ。
アイコンテーマを変える
テーマ変更でアイコンも程よく変わる。しかしデザイン性に乏しくイマイチ感がある。テーマと同様にアイコンテーマも豊かにしたい。ツールバーの「Code – 基本設定 – 拡張機能」からEXTENSIONSサイドバーを表示する。サイドバー上部の検索フィールドに「Material Icon Theme」を入力することで対象のものが見つかる。インストールする。
「Emmetのラップ変換」のショートカットキー
既存のソースコードを選択指定してタグ展開するあれだ。だいたいcontrol+Wかな？Sublime Textの頃からの設定を引き継いでいたのか定かではないが、control+Wにしたい。ツールバーの「Code – 基本設定 – キーボードショートカット」から設定画面を開く。スクリーン上部の検索フィールドに「Emmet Wrap with」を入力することで対象のものが見つかる。対象コマンドに「control+W」をキーバインドする。留意点としては、「control+W」のキーバインドが存在していること。上書いてしまうため、問題ないか確認のうえ。
「行の削除」のショートカットキー
カーソル行を削除するあれだ。Atomでは「control+shift+K」だったが、VSCodeでは「shift+command+K」が割り当てられている。操作感が嫌だからAtom風にしたい。ツールバーの「Code – 基本設定 – キーボードショートカット」から設定画面を開く。スクリーン上部の検索フィールドに「行の削除」を入力することで対象のものが見つかる。対象コマンドに「control+shift+K」をキーバインドする。
まとめ
AtomからVSCodeに乗り換えた手順の共有だった。
Atomの操作感をだいたい再現するものを目指したのだけれど、そのそも私のAtomの操作感が周知されていないのだから再現したか判断に困ると思う。だけど静的サイトのコーディング等において要点は抑えてあるはず。もしVSCode乗り換えを検討しているならば参考になるかもしれない。
実際は、上記以外にも拡張機能をインストールしているが、それはまたの話で。
