推奨する環境設定

  • 推奨する基本設定
  • 関連リンク

今回は、デザデジが推奨するVisual Studio Codeの環境設定について説明していきます。
※こちらの環境設定を必ずしも行う必要はありません。

推奨する基本設定

インデント幅の変更

Visual Studio Codeの既定のTabキーによるインデント幅は「スペース4つ」ですが、多くのプロジェクトやスタイルガイドでは「スペース2つ」が推奨されており、GoogleやAirbnbのJavaScriptスタイルガイドでは「スペース2つ」が標準です。したがって、インデント幅を「スペース2つ」に変更することをおすすめします。

  • インデント幅の変更方法
    Codeの基本設定の設定を選択、もしくは左下の歯車アイコンから設定を選択してください。
    ショートコード:Command⌘ + ,

    Editor: Tab Size の設定を4から2に変更してください。
    設定はこれで完了です。

自動保存

自動保存とは文字通りファイルを編集した後に自動で保存してくれる機能です。
※手動保存は保存するタイミングと内容を意図的に管理できる利点はありますが、自動保存でスムーズな作業を行いたい方のみ推奨しています。

  • off(自動保存したくない方)
    自動保存しない
  • afterDelay(非推奨)
    別途指定したミリ秒経過後に自動保存
  • onFocusChange(推奨)
    エディタがフォーカスを失ったときに自動保存
  • onWindowChange(推奨)
    ウィンドウがフォーカスを失ったときに自動保存

保存方法の変更

Codeの基本設定の設定を選択、もしくは左下の歯車アイコンから設定を選択してください。
ショートコード:Command⌘ + ,

検索窓で「auto save」と検索してください。

Files: Auto SaveからonFocusChangeもしくは、onWindowChangeを選択してください。

「Auto Save When No Errors」は、ファイルにエラーがない場合にのみ自動保存を行う機能です。
エラーを避けつつ自動保存の利便性を享受できるため、チェックしておきましょう。

これで自動保存は完了です。

以上、「推奨する環境設定」について説明でした。

また、「コーディング環境の準備」のステップも全て完了となります。
引き続き、別のステップも進めていきましょう。

関連リンク

コーディング環境の準備

全 6 動画
  • コーディングとは?

    コーディングとは?

    02:21
  • GoogleChromeのインストール

    GoogleChromeのインストール

    01:42
  • VSCodeのインストール

    VSCodeのインストール

    01:58
  • VSCodeの基本操作

    VSCodeの基本操作

    03:20
  • プロジェクトファイルの作成

    プロジェクトファイルの作成

    03:03
  • 推奨する環境設定

    推奨する環境設定

    02:06