Visual Studio Code で JavaScript開発環境の構築

    はじめに

    今まで有料の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ファイルをコマンド一つでブラウザで開くことできる。

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

    参考リンク