普段お仕事で使っているエディターは、RubyMineやPhpStomeといった有償で高機能なIDE（もちろん会社提供）なのですが、趣味でプログラミングするときはほとんどjsしか触らないので、無料・軽量・ある程度高機能なものを探していました。
噂には聞いていたVisual Studio Code（通称VSCode）を試してみました。
VSCodeインストール手順
こちらの記事を参考にさせていただきました。
MacOSでVisual Studio Codeをインストールする手順 – Qiita
VSCodeに入れた拡張機能
標準でemmet（HTML、CSSの入力補完）が入っているし、シンタックスハイライトも多くの言語に対応していそうです。
Language Support in Visual Studio Code
何も拡張機能を追加しなくてもさくさく開発できそうでした。
が、もっと便利にしたいので以下の機能を入れました。
- Japanese Language Pack
VSCodeを日本語化するための機能です。 - Visual Studio IntelliCode
JavaScriptの入力候補を表示してくれる機能です。Python、Java、TypeScriptにも対応。 - Bracket Pair Colorizer
ブロック（{}）の開始と終了の対応をわかりやすくカラーリングしてくれる機能です。 - Path Intellisense
ファイルパスの入力補完を表示してくれる機能です。 - HTMLHint
HTMLの構文チェックをして誤りを表示してくれる機能です。 - ESLint
JavaScriptの静的チェックをして、バグ、非推奨な書き方などを教えてくれる機能です。 - Prettier
自動コードフォーマット。VSCode自体にも標準のフォーマットの機能はありますが、たぶん標準より高機能。 - vscode-styled-components
CSS in JSの代表であるstyled-components用のシンタックスハイライトをしてくれる機能です。
今回はstyled-componentsではなくemotionを使いたかったのですが、emotionもこの拡張機能でシンタックスハイライトできました。
便利ショートカット
コマンドパレット起動COMMAND + SHIFT + P
ターミナル表示SHIFT + CNTROL + ^
コードフォーマットの設定
保存時に自動フォーマットする方法など、こちらを参考にさせていただきました。
Visual Studio CodeでPrettierを使用してコードをフォーマットする方法 | DigitalOcean
