VS Code使うから設定とか変える

普段エディタはSublime Text使ってて別段乗り換える気も無いんですが、故あって友人にVSCodeの使い方とか紹介しなきゃならなくなったんであれこれ適当に書きます。

今回はわりと身内向けに近い記事なんで、諸々お遊び気味に書いてます。

そもそもなんでエディタ導入するんですのん

「しんどいから」、以上。

…まあ確かにWindows標準のメモ帳でもHTMLとかCSSとか編集できますけども。そこはあれですよ、XP時代のペイントでも絵は描けるけどレイヤーの概念もないようなソフトで絵を描くのは苦行に等しいのと同じ話で。名前のよく挙がるエディタってのはそういう機能面での優位性があるわけですな。

まあフロント系の作業はゴリゴリのプログラマーみたいに何千何万行のテキストと向き合ったりすることはあんまりないんで（注：あるにはある）最悪エディタなんてなんでもいいんですけど、最低限シンタックスハイライトは欲しいです。シンタックスハイライト：コード内のテキストを適宜色分けして見やすくしてくれるやーつ。

なんで、秀丸エディタでもサクラエディタでもTeraPadでもなんでもいいっちゃいいんですけど。まあどうせなら特化したエディタを使った方が作業効率が上がるからみんな使うわけですな。

えっ？ホームページビルダー？　うーん、今のご時世GUI的にサイト作りたいにしてももっと良い選択肢があるんじゃないかな……

エディタ選びのコツ

どういうのが良いのか分からんって人はこういう基準で選んだらいいと思います。

• 高機能
• 動作が軽い
• 使いやすい・学習コストが少ない
• 利用者が多く、評判がいい（≒日本語のドキュメントも充実している）
• まめに更新されている・サポートが手厚い

ここでは、しばしば名前の挙がるSublime Text・Visual Studio Code（以下、VS Codeと表記）・Brackets・Atomの4エディタを中心に比較してみます。なお、AtomやBracketsについてはほぼエアプ知識で書いてるので注意です。

機能について

「これはこうこうこういう強みがあって、こっちはこれで…」みたいなカタログスペックで盛り上がるオタクめいた話を期待した人には申し訳ないんですが、ぶっちゃけどれも同じです。基準としては、Emmet（後述）が使えるかどうかってとこですかねー。Emmetが使えるエディタだったら大体どれも一緒感あります。というのも、基本エディタの機能というのはパクリパクられが主なので。便利なプラグインってのはどこでも移植されるもんなんです。まあ強いて言うならレベルですが、プラグインなしでも一番良い感じなのはBracketsかな（デフォルトでライブビュー編集とかが出来るあたりがラクでよい）。あとGitHubたくさん使うならAtomがオススメ（…と言われていた時代があった）。

参考：
史上最強のエディタBracketsに出会ってしまった
乗り換え安心、SublimeTextからAtom移行してみて感じた違い

動作速度について

まあ言わずもがなーって感じですが。10年ぐらい前のWeb制作では主流となっていたDreamweaverが今ではあまり使われなくなった最大の要因は重かったからだと自分は推測してます（今はある程度改善されてるかもしれないですけどね）。要するにHTML書くためだけにVisual Studio Communityみたいな大仰なものを起動するのは時間とマシンパワーの無駄遣いってことです。

（プラグインの入れてる数とかにも依りますが、）起動速度はSublime Textが一番早いですね。なお、置換やUndo操作に関してはVS Codeが優位らしいです。AtomやBracketsはそれらに比べるとややもっさり気味という意見を聞きますね。

参考：
Sublime Text VS Atom VS Brackets VS Visual Studio Code スピード対決

使いやすさについて

これは結構エディタによって差が出るところです。差って言ってもショートカットキーの違いとかメニューやヘルプの充実度合いとかそんなもんで、初学者からすればどれも同じに感じる気がしますが。これから新しくマークアップの仕事を始めるって人はプラグイン入れても日本語周りが怪しいSublime Textよりは、デフォルトで日本語対応しているVS CodeやBracketsのがオススメかもしんないですね。

まあなんというか、よほど普段から愛用していて慣れ親しんでいる or これから使い方を勉強しようという強い意気込みが無い限りSpacemacsとかVimとか使う必要はないんじゃないですかねーって感じがしています（VimmerとかEmacserとかをdisってるわけじゃないんで筆者の家のポストに虫の死骸とか詰めようとしないでくださいね）。

利用者数について

Google トレンドで「Atom, Brackets, Visual Studio Code, Sublime Text – すべての国、2016/12/28～2019/01/28」の 人気度の動向 を見る – https://t.co/E9aG0aVOEj

— kannkyo (@kannkyoshi) 2019年1月28日

VS Codeが断トツ人気っぽいですね。ちなみに国内でもトップでした。今回この記事でVS Codeをメインにで取り扱うのはこのためです。VS Codeはマークアップ単体に特化してるエディタではないのでその点は留意する必要がありますが、裏を返せばプログラマーとかも好んで使ってたりもするんでその辺と連携取る時に潰しが効くってことですねー。

サポートについて

Webの世界ってのは1～2年更新が滞るとオワコン認定されて人が離れてくんで重要な観点になります。まあMicrosoft製のVS CodeとAdobe製のBracketsは安泰そうですね。GitHub製のAtomは（GitHubがMicrosoftに買収されたため）この先どうなるか気にかけられていましたが今後も開発やサポートが継続されるようです。

Sublime Textは個人開発なのでそこのところ不安ですねー（シェアウェア形式でのマネタイズをしているとはいえ）。今のところは更新が続いているので大丈夫だと思うんですけど、まあ時代の流れとともに滅びる日が来る可能性はあります。

おすすめエディタ比較

結局一番いいエディタはどれ！？　年収は？　彼女はいるの？　調べてみました。

VS Codeは他のエディタと比べて飛び抜けて優れている部分はないようですが、ユーザー数が多くて欠点も少ない優等生タイプなようですね。
……って

そやないねん。

普通のアフィブログだったら『徹底解析！一番優秀なコーディング用エディタはどれだ！？　2019年版』みたいなしょ～もないタイトルで記事書いてたでしょうよ。アホか。あのな、おれたちが考えなきゃいけないことはそういうことじゃないんだ。

エディタってえのはただの道具なんすよ。それぞれがそれぞれの目的に応じて作られてるわけで、そこに優劣なんてものはないんだ。ゆえに「このエディタはここがスゴくてこのエディタはここがカス」なんて使い手の能力不足を棚上げした主張や信者特有の色眼鏡フィルターでの論争なんてものは不毛なんだ。そういう考え方は人間のエゴなんだ。わかるか？　ミーハー根性で立場や主張をコロコロ変えるようなやつに明日はないんだ。「お前の信じるエディタを信じろ」「お前の信じるお前を信じろ」、それに尽きるわけですよ（ガイナ立ちしながら）。

こいつまた急にシャドーボクシング始めたな。まあいいや、一応自分の言葉でもレビューしておきますと。個人的な所感としては、VS Codeは痒いところに手が届くエディタって印象ですかねー。例えるなら、Sublime TextがFirefoxだとするとVS CodeはChromeみたいなイメージがあります。ほら、Sublime Textってプラグインマシマシになりがちだし。

BracketsもほとんどJS書かないとかだったら十分じゃないかなって気がします。選択肢としてはなしではないかな（JSとjQuery何が違うのか分かんねみたいな初学者にはBracketsの方が適してそう）、と。

Atomについてですが、VS CodeがあればAtomはゴミなのでアンインストールして問題ない。とか言われているようで、あまり風向きがよろしくないようです（筆者的にはそんなこき下ろす必要あるかなあと思ってますが）。

えーと。実はエディタの比較とか今回の本題じゃないんですよね。仲間内でVS Code使おうぜってなったからとりあえずVS Codeについて触れるっす。やっと本題に入ったな。あ、ここまでは前座のギャグみたいなもんです（なげーよ）。

VS Code諸設定

プラグインの話より先に設定周りからいたします。インストールのやり方とかは省くんでとりあえず適当に済ませておいてください。

色を変える

左端ツールバー下部の歯車アイコン>『配色テーマ』で一覧が表示されます。

自分はSublime Textを使ってるのでそれに近い「Monokai Dimmed」にしてますが、まあデフォルトでダークテーマに設定されてるんで変える必要はないかもしれないすね。目が疲れる白背景じゃなきゃなんでもオッケーみたいなところある。

フォントを変える

歯車アイコン>設定でなんか諸々の変更画面が出てきます（「Ctrl/Cmd」+「’」キーでも可）。

『Editor: Font Family』ってとこでデフォルトのフォントを変えることができます。OSによって違うらしいですがWindows版のデフォルトだと「Consolas, ‘Courier New’, monospace」って表示されてるかと思います。

自分は「Ricty Diminished」に設定してます（ここからダウンロードできます）。とりあえず日本語に対応していて、アルファベットの「O」と「0」が区別しやすくて、等幅のフォントだったらなんでもいいです。…まあ他の選択肢って言ってもMyricaかSource Han Code JPかってぐらいな気もしますが。

インデントとか

同じく設定画面から変更可能です。

『Editor: Tab Size』にてTabキーを押した時に挿入される半角スペースの数を設定できます。デフォルトは4ですがお好みで。

また、『Editor: Render Whitespace』を「boundary」にすることで、単語間の半角スペース以外の空白文字はビュレット（中黒みたいなやつ）で強調表示してくれるようになります。変に紛れ込んだ半角スペースとかを察知できるようになるのでおすすめ。

あと、「タブインデントじゃないと気が狂う」って人は検索窓から「insertspaces」って検索すると下記のような画面が出てくるんで、『Editor: Insert Spaces』のチェックを外すとタブインデントになります。

覚えておきたい機能＆ショートカットキー

便利機能や自分がよく使いそうなショートカットキーを紹介しておきます。

Emmet

今からEmmet（旧称：Zen-Coding）というプラグインについて紹介します。プラグインと言ってもVS Codeでは標準搭載されてるんでなんかインストールしたりする必要はないです。

では……突然ですが、コピペを使わずにこの記述を10秒で書いてください。

出来ました？　もしEmmetの存在を知らなければ「できるわけがないッ！」って4回ぐらい言いたくなるかもしれませんね。

( ･´ｰ･｀)どや

この技さえ知っていれば「html」を「htnk」とtypoするしょうもないミス込みでもTabキー一発で10秒以内に書けてしまうのです。ね？Emmetについて勉強したくなったでしょ？　じゃああとは頑張って記法を覚えてくれ（丸投げ）。

Emmetの設定

どうも最近のバージョンだとTabキーで動かないことがある&デフォルトだと<lang=”en”>って表示されるのがウザいんで、その辺の設定をしときましょう。

設定画面の検索ボックスに「emmet」って打って、『Trigger Expansion On Tab』にチェックを入れるとTabキーでEmmetが動くようになります。

んで、langを変える方法についてですが、上記画面の『settings.json で編集』をクリックするか「%APPDATA%\Code\User\settings.json」から直接開くかすると下図のようなファイルが出てくるんで、

ってな記述を追加してやりましょう。

なお、筆者のようなSublime Textに骨まで浸かっているような人間はTabキーよりCtrl+Eで展開するやり方に慣れ親しんでることかと思います。設定方法は下記リンクを参照。

参考：
Visual Studio CodeでEmmetの展開をctrl+eにする方法

画面分割

編集画面（「エディタグループ」というのが正式名称らしい）右上の本みたいなアイコンを押すと、画面を分割することができます。

なお、「Shift」+「Alt」+「2」キーでも同様のことが出来ます（「Ctrl/Cmd」+「\」でも同様）。分割した画面上のタブを全部消すか「Shift」+「Alt」+「1」キーを押すと画面数を元に戻せます。

HTMLとCSSを一緒に編集したいとかそういう時に便利なんすよね。

ショートカットキーもろもろ

Ctrl+Sとかに関しては言わんでも分かるよな？　感はあるが一応。

• Ctrl/Cmd+P
  コマンドパレットを開く（「Escape」で閉じる）。任意のファイルを開きたい時とかに使う。
• Ctrl/Cmd+Shift+P
  「>」が入力された状態のコマンドパレットを開く。拡張機能を使いたい時とかに使う。「F1」キーでも代用可。
• Ctrl/Cmd+B
  サイドバーを開閉
• Ctrl/Cmd+@
  ターミナルを開閉
• Ctrl/Cmd++
  画面を拡大表示
• Ctrl/Cmd+–
  画面を縮小表示
• Ctrl/Cmd+N
  新規タブ
• Ctrl/Cmd+W
  現在のタブを閉じる
• Ctrl/Cmd+Shift+W
  VS Codeを閉じる
• Ctrl/Cmd+S
  上書き保存
• Ctrl/Cmd+Shift+S
  名前をつけて保存
• Ctrl/Cmd+F
  エディタ内検索（検索ウィンドウ内で「Alt」+「R」キーかアスタリスクアイコンを押すと正規表現モードになる）
• Ctrl/Cmd+H
  エディタ内置換
• Ctrl/Cmd+D
  選択されている文字列を複数選択（個別）
• Ctrl/Cmd+L
  行選択
• Ctrl/Cmd+Shift+L
  選択列されている文字を複数選択（一括）

範囲選択系は説明がめんどいので下のGIFアニメを参照されたし。

書き忘れてたけどCtrl/Cmd+Shift+LでCtrl+Dの一括選択版ができたり、Ctrl/Cmd+/で選択範囲をコメントアウトできたりもします。

だいたいこのぐらい覚えておけば作業効率で不満を抱くことはあんまないかなあという気がしますが、もっと極めてショートカットキー界のマスターオブパペッツ（？）になりたい人向けの参考リンクは下記。

参考：
キーボードから手を離さずにVS Codeで開発したいという気持ちを大切にしています
Visual Studio Code キーボード ショートカット

なお、「設定」>「キーボードショートカット」からショートカットキーの設定を変更することができますので、デフォルトの配置が気に食わなかったら適宜変えるとよいでしょう。

おすすめのプラグインとか

あんまメインで使ってないのにおすすめも何もあるかみたいなところはありますが、まあ一応紹介。

なお、拡張機能の追加とかはここでできます（「Ctrl/Cmd」+「Shift」+「X」でも開けます）。プラグイン名を検索欄に入力して、一覧表示された内容をクリックし、インストールするという流れです。

日本語・文字列関連

プラグイン入れてないとSJIS見ただけでギャフベロハギャベバブジョハバみたいになっちゃうSublime Textと違って、だいぶラクです。

Japanese Word Handler

「Ctrl/Cmd」+「←/→」などの操作時の移動や選択範囲がびみょいので、上手いことやってもらうために導入しています。

日本語を解析する機能が、VS Code には実装されていないことが原因。なお、カーソルの単語移動については英語以外を想定しないデザインと明言している (#25208)

だそうで。

Zenkaku

おすすめとか言っておきながら導入してないです。全角スペースを強調表示してくれます。自分はフォントをRicty Diminishedにしてるので導入してないです（全角スペースの強調表示がフォント側でされているため）。

Encode Decode

「Ctrl/Cmd」+「Alt」+「C」キーでHTMLエンティティ（など）に変換してくれるやつ。これのおかげでいちいち&lt;だの&gt;だのを毎回ググらずに済むんである。

タスクランナー代替

npm initして”scripts”内にアレコレしたり、gulpfile.jsをどうのこうのだのしなくても大体なんとかなる世の中になってきた。

Live Server

右クリックで「Open with Live Server」を選択するか「Alt/Cmd」+「l」→「Alt/Cmd」+「o」でライブラリロード機能つきの簡易ローカルサーバーを起動できる（「Alt/Cmd」+「l」→「Alt/Cmd」+「c」でWatch停止）。詳しくはこれを読まれたし（丸投げ）。

Gulp立ち上げるよりよっぽどはっやーい。

open in browser

右クリックで「Open In Other Browser」を選択するか「Shift」+「Alt」+「b」で任意のブラウザでHTMLファイルを開く。ローカルサーバー立ち上げるとかじゃなくてただ単に他のブラウザで確認したいって時に使う。

Live Sass Compiler

Sassファイルをwatchしてよしなにやってくれる。これのおかげでわざわざKoala起動しなくてもよくなったね。（※Sassについての説明は省きます）

マークアップ関連

実はな、Sublime Textで言うところのAutoFileNameとか各種SnipettsとかCodeIntelとか要らないんじゃよ。なんでかっていうとデフォルトで全部入ってるからじゃ。PugやSass、TSあたりにもバッチリ対応しているぞ！　神か？

IntelliSense for CSS class names in HTML

class名を自動でサジェストしてくれる。命名で悩みたくない時におすすめ。おれはすきじゃないけどCSSフレームワークと相性がよい。

htmltagwrap

「Alt」+「w」で選択した範囲をタグで囲んでくれる（デフォルトだとpタグ）。

HTMLHint

筆者は入れてないけど、HTMLにあんま慣れてない人は入れておいた方がいいかもしれないやつです。記述ミスや記述ルール違反などを教えてくれます。

その他

GitLens

えっ何これすごい（今までGit関連の拡張機能をエディタに入れてなかった人の感想）。「Ctrl/Cmd」+「Shift」+「G」→「W」キーまたは右クリックから「Open Line Changes with Working File」選択するだけで前バージョンとの差分が見れたりする。

本当はスゴさを伝えるべくなんかスクショ貼りたいんだけど案件のソースとか載せちゃうとまずいからなあ…（サンプルのやつ作るのもめんどいし）

Bracket Pair Colorizer

括弧を強調表示。色分けしてくれるのでだいぶ見やすくなる。

Trailing Spaces

行末の空白を強調表示。それだけと言えばそれだけだがあって損はない。

vscode-input-sequence

「Ctrl/Cmd」+「Alt」+「0」でカーソルの数だけ連番を自動生成してくれる神です。普通にコーディングとか関係ない事務作業でも使うことがある。これあるとマ～ジで楽やねんな。

Code alignment

「Ctrl/Cmd」+「;」→「Ctrl/Cmd」+「;」で=（等号記号）でコードを揃えたりできる。言語化しづらいから動いてるやつ見て。

今入れてないけどいつかインストールするかも

完全に個人用メモです。

• Bookmarks
  読んで字の如し。ブックマークしたやつにジャンプしたりする。
• Rainbow CSV
  CSVファイルを見やすくしてくれる。
• Regex Previewer
  正規表現のプレビュー。

おわりに

完全に最初のくだり蛇足だったわ…（たぶんあれのせいで執筆時間が倍増した）。

まああれですわ。新しく登場したツールがいかに優秀で世を席巻しようと、結局それも数年単位で情勢が変わる水物でしかないんすよね（特にウェブの世界では）。だからといって古いやり方に固執していればいつの間にか老害カテゴライズされてしまうんですが。

常時知識を最新のものにアップデートし続けることができれば理想なんですが、人間のリソースは有限なのでよほどのワーカーホリックでない限りその方法は現実的でないんですね。だから、気合と根性で新しいものを吸収し続けるのも悪くはないんですが、どっちかっていうと自分は「眼の前の技術が数年後に生き残るかどうか」見極める審美眼自体を磨いておいた方がいいかなあとか思ってます。冒頭でかましたエディタに関するああだこうだは、綺麗な言葉に言い換えるとこういう感じのニュアンスなのでした。

まあなんていうか矛盾するようですが『最新トレンドは追っかける』『安易に流行り物に乗っからない』「両方」やらなくっちゃならないってのが「技術屋」の辛いところだな。Sublime Textに慣れきったおじいちゃん（筆者）も時代の流れに取り残されないように頑張りたいと思いまーす。