Visual Studio Code!おすすめの初期設定解説!コーディングの環境を整えていきましょう!

  • マンツーマン
    個別講義開催中!

    エラーの解消から、
    実装方法まで丁寧に教えます!
    講師が答えられるなら、
    基本的にどんな内容でも
    OK!

    詳細はこちら!
  • 質問し放題プラン!
  • スクール形式講義も

    プロを目指したい方
    講義を何回も受けたい方はこちら!
    個別のカリキュラムを作成し、
    長期的にサポート!

    詳細はこちら!
  • discordコミュニティ
※撮影時点での設定方法と現在の方法には若干の違いがあります。
10:40あたりで触れているEmmetのVariablesの設定について、現在の手順は以下の通りです。
1. 検索欄で「emmet variables」と入力します。
2. 検索結果のトップに「Emmet: Variables」という項目が表示されます。
3. その後「項目の追加」をクリックし、「項目」フィールドにlangと入力し、「値」フィールドにはjaと入力します。これで設定は完了です。

今回は、Visual Studio Code(通称VSCode、ビジュアルスタジオコード)のおすすめ初期設定について解説していきます。VSCodeは、多くのデベロッパーに愛されるコードエディターで、インデックスやスタイルの設定が必要になります。

・タブのサイズ
タブのサイズを空白4つではなく、空白2つに設定することで、コードが見やすくなります。これは、特に多くのインデントが必要な場面で役立ちます。

・空白の表示
コード内の空白やインデントを視覚的に確認するために、「レンダーホワイトスペース」の設定を変更して、すべての空白文字を表示するようにします。

・Tabキーの動作
Tabキーを押すとスペースが挿入されるように設定することで、コードの整形がしやすくなります。

・インデントガイド
インデントの深さを視覚的に確認するために、インデントガイドを表示する設定をオンにします。

・パンくずリスト
ファイルの階層構造を上部に表示する「パンくずリスト」機能を利用すると、どのフォルダやファイルにいるのかが一目でわかります。

VSCodeはカスタマイズが非常に豊富なので、初めて使う方でも、自分の好みや作業スタイルに合わせて設定を変更できます。しかし、上記の設定は特に初心者にとって、コーディングをスムーズに進めるための基本的なものと言えるでしょう。

最後に補足ですが、VSCodeの設定は左上のメニューからアクセス可能です。また、macとwindowsでは表示が少し異なるので、ご注意ください。

この動画の内容を基に、VSCodeの環境を整えて、快適なコーディングライフをスタートしましょう!

関連する動画リスト

もっとみる