はじめに

今まで有料のJetbrain IDEをつかっていたのだけれども、見た目のダサさに愛想が尽きた.そこで、いろいろ探していたところ Visual Studio Codeの美しさに一目惚れしてしまったのだった.

あんなに、あんなに、あんなに、Microsoftが嫌いだったのに・・・.

ということで、Visual Studio Codeの紹介と、JavaScript, Reactの開発環境構築をしたので紹介する。

見た目の設定

ルックスが最重要の設定項目である！！

というわけで、まずは外観の設定からはじめよう! ここでは、以下のテーマとフォントをオススメする。

続いて、フォントサイズとフォントの設定。

{
    "workbench.colorTheme": "Level Up", /* テーマ */
    "editor.fontSize" : 14,             /* フォント */
    "editor.fontWeight": "bold",
    "window.zoomLevel": 1,              /* 外枠のサイズ */
}

Image from Gyazo

アイコンもカッチョよく。

JavaScriptの設定

優れたIDEが揃えるべき機能は以下のとおり。

  • シンタックスハイライト/ インデント
  • 検索・置換
  • タグジャンプ
  • コード補間
  • エラーチェック
  • リファクタリング
  • インタープリタ・デバッカ
  • プロジェクト管理

vscodeを JavaScriptの最強エディタにするためには以下のツールが必要だ。

シンタックスハイライト/インデント ... defaultでOk
検索・置換  ... defaultでOk
タグジャンプ  ... defaultでOk
コード補間 ... defaultでOk
エラーチェック .. ESLint
リファクタリング ... deualtでOK, JavaScript Booster
インタープリタ・デバッカ ... Debugger for Chrome, Quokka.js
プロジェクト管理 ... defaultでOk

なんたることか、ほとんどDefaultでOkだ。つおい。やることがなかった。

とりあえず、足りない機能をちまちま追加します。

ESLint

定番の静的解析ツール。

設定が必要。

$ npm install eslint --global
$ eslint --init

Prettier + Format on Save

保存時にフォーマット整形できる。

設定が必要。

$ npm install prettier --global
$ yarn add -D eslint-plugin-prettier eslint-config-prettier

Debugger for Chrome

ブレークボイントをはって、Chromeでデバッグできるらしい。

JavaScript Booster

WebStormに激しく感化されたものだとか。賢いリファクタリングをSuggestしてくれる。

Auto Import

オートインポート.

スニペット関連

入れれば便利だけれども、自分はあまりつかわない。

Reactの設定

公式にまとまっている。

Web開発関連

HTML, CSSまわりの便利機能も調べておく。

  • HTML Snippets … HTMLのスニペット群
  • HTML CSS Class Completion … HTMLを解析してCSS補完

View in Browser

選択中のHTMLファイルをコマンド一つでブラウザで開くことできる。

設定のクラウド共有・保存

参考リンク