VSCodeのインストールと基本機能 | 開発ツールの選び方 | JavaScript 超完全入門 基本から発展までのすべて

2024.09.21
スポンサーリンク
スポンサーリンク
amazon
スマイルSALE
--:--:--
～
ad. 価格範囲を指定して商品を探せます

VSCodeとは？

Visual Studio Code（VSCode）は、Microsoftが開発・提供している無料のソースコードエディターです。Windows、macOS、Linuxで利用でき、JavaScriptをはじめ、多くのプログラミング言語に対応しています。

軽快に動作しながらも、コード補完やデバッグ、Git連携、豊富な拡張機能などを備えており、初心者からプロまで幅広く利用されています。

VSCodeの主な特徴

機能 説明
コード補完 入力中に候補を表示し、効率よくコードを書ける。
シンタックスハイライト 構文ごとに色分けされ、コードが読みやすくなる。
統合ターミナル エディター内でコマンドを実行できる。
デバッグ機能 ブレークポイントやステップ実行が利用できる。
Git連携 変更内容の確認やコミットをVSCode内で行える。
拡張機能 機能を追加して自分好みの開発環境を構築できる。

VSCodeをインストールする

VSCodeは公式サイトから無料でダウンロードできます。

  1. VSCode公式サイトへアクセスする。
  2. 利用しているOS用のインストーラーをダウンロードする。
  3. インストーラーを実行し、画面の案内に従ってインストールする。
  4. VSCodeを起動する。

インストール後は、フォルダーを開くだけで開発を始めることができます。

JavaScriptファイルを作成する

JavaScriptファイルは、拡張子.jsを付けて保存します。

例えば、次のようなファイルを作成します。

console.log("Hello, World!");

保存すると、自動的にJavaScriptとして認識され、構文の色分けやコード補完が有効になります。

おすすめの拡張機能

VSCodeでは拡張機能を追加することで、さらに便利になります。

拡張機能 用途
ESLint コードの問題点をリアルタイムでチェックする。
Prettier コードを自動で整形する。
Live Server HTMLファイルをブラウザで簡単に確認できる。
GitHub Copilot（任意） AIによるコード補完を利用できる。

ESLintを導入する

ESLintは、JavaScriptの文法ミスや品質上の問題を検出するツールです。

  1. 拡張機能から「ESLint」を検索してインストールする。
  2. プロジェクトへESLintをインストールする。
  3. 設定ファイルを作成する。

インストールは次のコマンドで行えます。

npm install --save-dev eslint

Prettierを導入する

Prettierはコードを自動で整形するツールです。

保存時に自動整形する設定を有効にすると、コードの見た目を常に統一できます。

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

この設定は、VSCodeのsettings.jsonへ追加します。

VSCodeを使うメリット

  • 無料で利用できる。
  • 軽量で動作が速い。
  • JavaScriptとの相性が非常によい。
  • 拡張機能が豊富で自由にカスタマイズできる。
  • Gitやターミナルが統合されている。

まとめ

  • VSCodeはMicrosoftが提供する無料のコードエディターである。
  • JavaScriptをはじめ、多くの言語に対応している。
  • コード補完やデバッグなど開発に便利な機能が豊富である。
  • ESLintやPrettierを導入すると、さらに開発効率が向上する。
  • 初心者からプロまで幅広く利用されている。

スポンサーリンク