プログラミング

【画像付き】VSコード(Visual Studio Code)の初期設定を分かりやすく説明

プログラミングを始めようと思いVSコードを導入したのですが、

初期設定が分かりません

質問

 

このような疑問を解決します!

 

VS codeのインストール方法

Download Visual Studio CodeをクリックしてOSに合わせたインストーラをダウンロードしましょう。

 

ダウンロード後の設定がOSによって少し異なります。

◆ Macの方
ダウンロードしたZipファイルを展開するとDownloadフォルダにアプリケーションが格納されますので、
ドラッグ&ドロップでアプリケーションフォルダへ移動させて下さい。

◆ Windowsの方
ダウンロードしたZipファイルを展開するとVSCodeのセットアップ画面が開かれます。
下記手順に沿って進めましょう。

  • 使用許諾契約書の同意:「同意する」を選択して「次へ」をクリック
  • 追加するタスクの選択:「PATHへの追加(再起動後に使用可能)」を選択して「次へ」をクリック
  • インストール準備完了:「インストール」をクリック

インストールが完了したらアイコンをクリックして開いてみましょう。
下記画像のようにVSCodeの画面が表示されます。

 ◆Zipファイルとは

Zipとは、複数のファイルを単一のファイルのように圧縮してまとめるファイル形式です。
通常のフォルダでも同じことは出来ますが、圧縮という手順を踏むことで、データを軽量化できます。
メール送信やダウンロードなどの時、ファイル受信にかかる時間を短縮することができます。
Zipファイル化することを「圧縮」、元のファイル状態に戻すことを「解凍」と呼びます。

VSCodeの初期設定

VSCodeでは左下の歯車アイコンから設定を変更することができます。
より使いやすくするためにカリキュラムでは下記設定を行います。

  • 日本語設定
  • ソースコードに関する設定

 

こちらのサイトで指定した設定以外に、使ったら役立ちそう効率が良くなりそうと思う設定は積極的に取り入れていきましょう!
設定は元に戻すことが可能ですので、気になる設定は試してみることをおすすめします。

日本語設定

VSCodeのデフォルト言語は英語です。

英語が得意な人以外は日本語に設定しましょう。

左下歯車アイコンから「Command Palette...」をクリックしてください。
表示されたフォームに「Configure Display Language」と入力し、
入力フォームの下に表示された「Configure Display Language」をクリックしてください。

「en」「Install additional languages...」の二つが表示されますので、
「Install additional languages...」をクリックします。

下記画像のように左サイドバーに言語を選択するメニューが左側に表示されるので、
「Japanese Language Pack for Visual Studio Code」を選択しましょう。

メイン画面の緑ボタン「Install」をクリックしてインストールを行います。

インストール後に画面右下に「In order to use VS Code in Japanese, VS Code needs to restart.」が表示されますので「Restart Now」をクリックして再起動しましょう。
※ 表示されなかった場合は一度VSCodeを閉じて再度立ち上げれば大丈夫です。

下記画面のように日本語で表示されていれば成功です。

ソースコードに関する設定

ソースコードを記述していく上で推奨する設定を行います。
左下「歯車アイコン」「設定」をクリックしてください。
いくつかの設定を変更していきます。検索フォームもあるのでスクロールして見つからない場合は検索して探してください。

下記項目を修正します。

  • Auto Save:off → afterDelay
  • Tab Size:4→2
  • Tab Completion:off→on
  • Format On Save:チェックを入れる

 

VSCodeの拡張機能

VSCodeには拡張機能と呼ばれる、VSCodeの使い勝手をよくするために追加できる機能があります。

拡張機能なしでも充実しているVSCodeですが、
拡張機能を入れると「効率が良くなる」「エラー解消が早くなる」といった、
開発をスムーズに進めるためのメリットがたくさんあります。

拡張機能は基本的に、VSCode作成者以外の方が作成し公開しているケースがほとんどです。
ブラウザで「VSCode 拡張機能 〇〇」などと検索すると多くの検索結果が出てきます。(〇〇は言語名など)
下記におすすめの拡張機能を記載しますので、インストールしていきましょう。

主にHTML/CSSのエラー防止機能やコード整形を行うための拡張機能です。

※ 下記に記載のない拡張機能をインストールする場合はその拡張機能がどういう機能なのかは把握するようにしましょう。

拡張機能はとても便利ですが、入れすぎは良くないです。

  • Auto Close Tag
  • Auto Rename Tag
  • Code Spell Checker
  • HTML CSS Support
  • HTML Snippets
  • HTMLHint
  • Trailing Spaces
  • Prettier - Code formatter

 

拡張機能のインストール

それでは実際にインストールを行なっていきます。
左サイドバーの上から5つ目のアイコンをクリックし、
表示されたフォームに上記の拡張機能を入力します。

リストが表示されたら該当の項目をクリックし、
インストール画面が表示されたらインストールボタンをクリックします。

インストールが終了したら再度フォームから拡張機能の名前を入力し、
全てのインストールを終えましょう。

※ インストールが終了したらインストールボタンの箇所に「再読み込みが必要です」と表示されることもあります。
その場合は「再読み込みが必要です」をクリックしてVSCodeの再起動を行いましょう。

 

これでVScodeの設定は完了です。

お疲れ様でした。

-プログラミング
-, , , ,