●目次
プログラミング学習や開発環境を整える上で、コードエディタの選定は非常に重要です。その中でも、Visual Studio Code（VSCode）は多くの開発者に支持されている強力なエディタです。
初心者の方でも迷わず設定できるように、スクリーンショット付きでわかりやすく説明します。
VsCodeのダウンロード・インストール
VSCodeの公式でOSを選択してダウンロード・インストールする！
公式サイトのトップページにアクセスすると、あなたのOSに合わせたダウンロードボタンが自動で表示されます。使用しているOSに応じて、以下の手順に従ってください。
- Visual Studio Code公式サイト
- 「macOS用ダウンロード」をクリックします。
ダウンロードが開始され、VSCode-darwin-universal.zipというファイルが取得されます。 - ダウンロードした
VSCode-darwin-universal.zipをダブルクリックして解凍します。 - 解凍されたアプリケーションを「Applications」フォルダにドラッグ＆ドロップします。
- LaunchpadまたはFinderからVSCodeを起動します。
VsCode初期設定
インストールが完了したら、最初の設定を行いましょう。
VSCodeを起動すると、ウェルカムページが表示されます。ここで基本的な設定を行うことができます。
テーマの選択
VSCodeには、複数のカラーテーマが用意されています。
ライトテーマやダークテーマなど、自分の好みに合わせてテーマを選択しましょう。
テーマは後からでも設定できますので、まずは好きなものを選んでください。
拡張機能のインストール
VSCodeの拡張機能は、エディタをより強力にするためのものです。
画面左側の「拡張機能アイコン」をクリックし、必要な拡張機能をインストールしましょう。
- Japanese Language Pack for Visual Studio Code：日本語翻訳
- Prettier – Code formatter: コード整形ツール。特にチーム開発でのフォーマット統一に便利。
- ESLint: JavaScriptやTypeScriptのコード品質向上に使用するリンター。
- Bracket Pair Colorizer 2: 括弧のペアを色分けして視覚的にわかりやすくする。
- Path Intellisense: ファイルパスを入力時に自動補完。
- Live Server: 開発中にリアルタイムでブラウザに変更を反映。
- Auto Rename Tag: タグを変更すると対応する閉じタグも自動で変更される。
Visual Studio Code（VsCodeコードエディター）は、初心者から上級者までを使うコードエディターです。
プログラミング言語を学ぶ過程で一番最初に学習して、一番多く利用すると言っても過言ではないツールになっています。
なので、初めのうちからインストール・ダウンロードの仕方、初期設定、ツール理解を深めていくことが大切です。