VS Codeをなぜ、使い続けているのか？
前書き
この記事を読んでいるエンジニアの皆さんは、それぞれ異なるエディタを使用しているかと思います。読者自身が使用しているエディタの良し悪しについては詳しいと考えているため、私がVS Codeと他のエディタを比較をすることは、限界があります。また、VS Code と他のエディタの機能や快適さを比較できません。
そこで、私が毎日使用している VS Code の良さをアピールすることで、VS Code を使ってもらう機会を作りたいと思っています。
ここで説明しないこと
-
カスタマイズしたキーコンフィグの紹介
ただし、これから紹介する VS Code の機能に好みのキーコンフィグを割り当てることは可能です。 -
他のエディタとの比較(Vim系 JetBrain系 Helix等の新興エディタ系)
目次
- VS Codeとは
- 毎月のアップデート
- VS Codeのデフォルト機能
- 拡張機能（エクステンション）が豊富で魅力
- まとめ
1. VS Codeとは
VS Code とは、2015年から天下の Microsoft が開発し続けているエディタです。Windows, Linux, Mac OS で使用することができます。
開発言語は主に Typescript で、Electron というフレームワークを使用して開発されています。このフレームワークはSlackでも採用されています。
デフォルトで対応している言語は、Javascript , Typescript , C++ 等があります。
2022年4月で7周年をむかえた！Web 版もリリースされています。そのため、自分のローカル環境をいじらずに、気軽に試すことができます。
VS Code公式サイト ←デスクトップApp のダウンロードはこちらから
VS Code Web版 ←Web 版のページはこちら
使用する際には機能制限がなく、半永久に無料で使い続けることが可能なエディタです。
開発言語である Javascript や Typescript が廃れない限り、VS Code の開発は止まらなそうであるから、安心して使い続けられます。
2. 毎月のアップデート
基本無料で使用できる！無料で使用できる分、他のサービスの利用料や技術書の購入代金に回すこともできます。
無料で使用できることは、もちろん素晴らしいですが、さらに定期的にアップデートが来るため、それが楽しみで仕方ないです。
毎月のアップデートにより、今まで拡張機能でのみ実現できるモノが、デフォルトで実現できることがあります。例えば、括弧のペアを識別して色付けしてくれる機能等がデフォルト機能として、取り込まれました。
デフォルトで入っている機能が増えるため、ユーザーによっては不要な機能が増える場合があるとは思いますが、設定次第で無効にすることもできます。
3. VS Codeのデフォルト機能
拡張機能を追加せずとも、インストールして即時にエディタとして使用できます。デフォルトで入っている機能について、ご紹介します。
ファイル名検索
VS Code で開いている親ディレクトリを起点に全ファイル名を検索できます。ただ、検索するだけではなく部分一致で検索することが可能です。
また、node_modules など滅多に中身を見ることがないファイル群を、検索対象から除外することが設定可能であるため、検索スピードが速くなるかつ使用メモリを抑えることが可能です。
キーコンフィグ： command + p
正規表現を活用できる文字列検索 ファイル内のみ or ディレクトリの全文検索
VS Code には文字列検索の方法が二つあります。
① １つのファイルに対しての文字列検索
② 親ディレクトリ配下にある全ファイルに対しての文字列検索
この2つの方法それぞれで、以下3つのオプションをつけて、検索することができます。
- 大文字小文字を区別して検索する
- 正規表現で検索する
- 単語で検索する
この検索オプションを組み合わせて、ファイル内の文字列の個別 or 一括置換もできます。
変数名や CSS のクラス名を変更することが簡単にできます。
キーコンフィグ： command + f / command + shift + f
ファイル内の文字列置換
ファイル内の文字列を一括または特定のものだけを置換することができます。
キーコンフィグ： command + option + f
複数行を同時に編集できる
カーソルを複数行に選択して操作できます。
同じような変数を宣言したい時やメソッドを書く際には便利です。
連続していない行でなくても、カーソルを複数増やして、同時編集することができます。
さらに、文字列を同時に削除したいときには重宝します。
また、行をまるごと入れ替えることも可能です。
キーコンフィグ： command + option + ↑ or ↓
ウィンドウを複数並べられること
行数が長いファイルを編集したいときやビューファイルと CSS を並行で編集したい時には大変便利です。
メモリが許す限り、ワークベンチを分割することが可能であり、diff を確認したい時にも有効です。
git操作
VS Code 上でブランチ切ったり、ブランチ切り替えすることが UI 上で可能です。
デフォルトのままだと、あまり使いやすくありません。
なぜなら、デフォルトであるブランチを切ったりするためのアイコンが小さいためです。それにより、マウスではクリックしづらいです。
これを解消するために、自分好みのショートカットキーを設定すると化けます。
例として
git branchでブランチを作成したい場合は、私はこのようなキーを割り当てています。
git branch : command + g + b
VS Code上のターミナルでコマンド叩ける
シェルを指定することで Zsh でも Bash でも Fish でも VS Code のターミナルで操作することができます。
iTerm や Kitty のように、細かいカスタマイズはできないもののコマンドを実行するのには、困らないです。
ただし、ワークベンチのフォントサイズとターミナルでサイズ統一できないので、使い勝手はあまり良くないと思っています。
また、私は Zsh の peco でコマンドの履歴を貯めていきたいと考えているため、VS Code 上のターミナルはあまり使いません。VS Code 上のターミナルでコマンドを叩いても、コマンドの履歴が貯まらないためです。用途としては、即席でファイル作成をするくらいです。
複数端末間で設定の同期ができる
仕事用、プライベート用で PC を分けている時に、VS Code の設定、拡張機能をまるごと同期することが可能です。
イメージは dotfiles のような感じです。Github か Microsoft のアカウントを保有していれば使用可能な機能です。
4. 拡張機能の魅力
VS Code のデフォルトの機能でも、コードを書くことはできます。
しかし、以下のような弱点は存在します。
・Ruby や Golang 等の他の言語でコードを書く際には、補完が出ないor 構文解析に対応していない？ため syntax highlight が正しく表示されません。
・全角スペースが入っている or インデントがずれているときに分かりづらい
この弱点を補うためやコードを書くことを効率化したいために、拡張機能を入れていきます。
VS Code の拡張機能のインストール、アンインストールは単純化されています。
iPhone の App Store のようにアプリを検索して、インストールボタンを押すだけで、拡張機能を VS Code へ入れ込むことができます。また、アンインストールボタンを押せば、ワンクリックでアンインストールすることができます。
私視点で入れて良かった拡張機能群を紹介します。
ただし、エンジニア歴１年なので、設定はまだまだ荒削りで全然研げていません。もっと使いやすくすることはできるはず...
Japanese Language Pack for Visual Studio Code
VS Code の日本語化
デフォルトの表示される言語が英語のために、メニュー等の名前を日本語へ変換できます。
英語のままでもなんとかなるが、細かい設定をしだすと、全文が英語ではきついので日本語化を適用しています。
zenkaku
全角スペースがあれば、それを四角形のボーダー線で囲ってくれる機能です。
エンジニアになったばかりの時に、よく全角がコードに紛れ込んでおり、PR で指摘されることが多く使用していました。
この拡張機能は使用しているフォント次第で、入れなくても良いと考えています。
SF Mono Squareを使用していれば、全角スペースを表してくれます。現在は、私は、この拡張機能は使用していません。
Trailing Spaces
行末に半角スペースや全角スペースがないかの検知をしてくれます。
コードに半角スペースが入っている場合、視覚的に教えてくれる割と便利。エンジニアになったばかりの時に、何度も Haml-lint で指摘されてしまったためです。
Tabnine AI Autocomplete
AI が編集しているファイルの前後の行を解析し、補完入力候補を提示してくれます。
多くのプログラミング言語に対応しているだけではなく、日本語入力の補完にも対応しています。
利点としては、変数名を入力するためにコピペする必要がなくなるし、綴りを間違えることもないです。また、メソッド名の候補を提示してくれるため、便利です。
しかし、メモリ使用量が500MB 前後使用するため、メモリに余裕がある PC でないと、負荷が重くなります。アップデートごとに、使用されるメモリは低下しています。
GitLens
ファイル単位、行単位で Git の歴史を調べることができる拡張機能です。
例えば、目に留まったコードはどの PR で作成されたのかを知りたいときに重宝します。
またファイルの歴史を辿ることが可能であるため、どういう風に Dockerfile が作成されて、改修及び変化しているのかを把握することに役に立ちました。
常時、機能がアクティブになっているため、とても良いです。
Path Intellisense
ファイルパスの補完入力をしてくれる拡張機能です。
- インポートしたい js のパスを指定したいとき
- 背景画像を指定するために画像のパスを指定したいとき
わざわざ、ファイルツリーを確認しなくてもパスの補完を表示してくれます。
このような場面で、大いに役立つ拡張機能です。
GitHub Pull Requests and Issues
GitHub 公式の拡張機能です。
VS Code 上で PR を作成したり、イシューを作成することができる拡張機能です。デフォルトの Git 操作の機能と組み合わせて使用することができます。
例えば、VS Code 上で commit を積んで、リモートへ push した後に、Pull Request を作成することができます。
さらに、PR のコメントのやり取りを VS Code で行う機能も付いています。個人的には New Relicよりも使いやすいと感じます。
Github Actionsの進行状況を確認できたらさらに⭕️
私は、VS Code でコードを書いて、GitHub desktopというアプリで push、pull をしていましたが、それらのアプリ構成から VS Code のみへ集約することができました。
endwise
class とか def の後に end がないとき、エンターを押して改行すると自動的に end を補ってくれる拡張機能です。発動しない時がたまにあります。
indent-rainbow
インデントを色付けで区別してくれる拡張機能です。インデントが入り組んでいるビューファイルでは、とても助かる機能です。色も自由につけることもできます。
Hamlで効果を発揮する機能です。
Database Client
データベースへ接続し、レコード編集、検索を行うことができる拡張機能です。サクサク動いて、操作はしやすいです。
しかし、編集した箇所が色付けされないため、Table Plus の操作性と比べるとイマイチなところもあります。
そのため、ローカルのデータベースへ接続するのみで使用しています。
5. まとめ
無料で使用できて、軽量で高機能で使用できるエディタは VS Code で決まり！！！！！！
VS Code にレッツトライ！
Discussion