SublimeText3ユーザーがShift_JIS案件のためにVisual Studio Codeを使ってみた話 #VisualStudioCode

SublimeText3とShift_JIS問題

Sublime Text3は軽くて無駄がなくてスタイリッシュで大好き。
でも、Shift_JISだけには勝てない。
Convert to UTF8というプラグインもあるが、単体ではうまく動かず、Codec33というプラグインも必要になる。しかもCodec33を導入してもうまく扱えない時も多い。
私の環境下でもうまくShift_JISを扱ってくれなかった。

なぜVisualStudioCodeか

最近人気者なので、機会があったらさわってみたかったから。
日本語対応に強い（環境設置も日本語で行えるほど適応している）と聞いていたから。

もともとはGUI・アプリっぽいリッチな画面デザインが嫌いだった。オシャレじゃない。

今回はUTF-8とShift_JISの両方の案件を同時進行で行うことになり、いちいち文字コード設定したり間違えたりが面倒くさかったので、Shift_JISを使うのはVisualStudioCode, UTF-8はSublimeText3とエディタを2つ使い分けたかった。
サブとしてなら許せるかな…と思ったVisualStudioCodeも、使ってみたらとっても便利でした。SublimeText3と比べて便利だと感じた点も書いています。

設定した項目

1.設定ファイルを上書き
・文字コードをデフォルトでShift_JISに設定
・タブを2スペースにする
・タブとスペースを同様に扱う
・空白行を表示する
・行を画面サイズで折り返す
2.カラーをmonokaiに設定
3.ターミナルから起動できるようにする

1.設定ファイルを上書き

設定系は左上の「Code」（VisualStudioCodeは略称がCodeなんですね）→「基本設定」→「ユーザー設定」からsetting.jsonファイルに書き込む形式。ここはSublimeText3と変わらない。

ちなみにわたしはこのような設定にしています。

{　
    "files.encoding": "shiftjis",　
    "editor.tabSize": "2",
    "editor.insertSpaces": true,
    "editor.renderWhitespace": "boundary",
    "editor.wordWrap": true,
    "extensions.autoUpdate": true,
}

2.カラーをmonokaiに設定

「Code」→「基本設定」→「配色テーマ」から「Monokai」を選択する。

3.ターミナルから起動できるようにする

/usr/local/binにシンボリックリンクを貼ってパスを通す。
下記コマンドを叩いてターミナルを再起動すれば、次回からターミナルで
subl {ファイル名、ディレクトリ名}
と叩くことでファイルやフォルダごと開くことができる。

sudo ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl

こちらの記事を参考にしました。
http://qiita.com/hirokishirai/items/6b008623d1ea05b4d92e

便利だと思った点

日本語ドキュメント

ヘルプも日本語、プラグインも日本語のSublimeText3に比べるとはるかに導入時の心理的負担が少なかった。わからないことをググって解決するまでもなく、ほとんどのことは画面上の説明を見ればわかる。これは意外にとっても便利で時間短縮！

特に良かったのが設定のオプションのページ。
ユーザー設定用ファイルを開くと、オプションが書いてあるページが左側に開いて２画面になりますが（SublimeText3も同じ）、ここに一部日本語がある！基本は英語ですが、一部のオプションは日本語になっていて初見者にはとっても便利だと思いました！
また、デフォルトでプルダウンになっていて、見通しが良く意外と便利！

プラグインの導入が簡単

視覚的に左カラムのリストから選んで追加・削除できるし、追加したプラグインは一覧になるので、SublimeText3のように間違ってインストールして削除が面倒、とかどんなプラグイン入れてたか忘れちゃったとか、更新メッセージが都度きてうるさい…ということがない。更新があるものは更新通知マークが付くので、自分の好きなときにまとめて更新することが出来る。WordPressのプラグインの管理みたい。

ファイルのアイコンが表示できる

「コード」→「基本設定」→「ファイルアイコンの設定」から選べる。
reactのアイコンとか、純粋にかわいい。

ctrl+shift+@でターミナルを開いて操作できる

ctrl+shift+@
画面下（右に開く人もいるかも）にターミナルが開いて、コマンドを叩ける。
npm installしたファイルなどがすぐに確認できて、これ地味にとっても便利！SublimeTsxt3でもできるのかもしれないけど、知りませんでした...