VSCode初心者向けの最低限の設定と使い方
最近転職しまして。
お仕事でVSCode使う様になったので防備録というか、初心者向けというか自分向けにまとめました。
便利だよねVSCode。
VSCodeとは？
まずはVSCode（Visual Studio Code）について。
Visual Studio Code、VSCodeとはMicrosoft社が提供する無料のオープンソースのコードエディターです。Windows、MacOS、Linuxなどさまざまなプラットフォームで利用することができます。
VSCodeは軽量でありながら多機能なエディターです。コードの作成や編集、デバッグ、GitHubとの連携など、開発に必要な機能が簡単に利用することができます。
つまり多機能すぎて迷子になります。なのでこういう記事が必要になる、と言う事で。
VSCodeが最大に便利なのは拡張機能を利用して機能を追加することができる事。
これにより自分の開発環境をカスタマイズし、作業効率を向上させることができるのが最大の特徴なんだと思っています。
そんな間口の広さと無料という所からVSCodeは初心者から上級者まで幅広いユーザーに対応しており、使い方を学ぶための情報も豊富にありすぎて困る位です。
VSCodeのインストール方法
ダウンロードからインストールまでのステップ
VSCodeを使う手順をダウンロードからインストールまでのステップを説明します。
- 公式のダウンロードページ（https://code.visualstudio.com/download）にアクセスします。
- ダウンロードページでお使いのプラットフォーム（WindowsまたはMac）に応じたインストーラーを選択しダウンロードします。
- ダウンロードが完了したらインストーラーを実行します。
- インストーラーが起動すると、利用規約の画面が表示されるのでチェックボックスにチェックを入れ、次へボタンをクリックします。
- インストール先のフォルダを選択しますが特に変更する必要ないのでそのまま次へボタンをクリックします。
- インストールするコンポーネントを選択する画面が表示されますが、初心者はそのまま次へボタンをクリックしましょう。玄人はこんな記事見ないだろ。
- インストールの準備が完了したらインストールボタンが表示されるのでクリックします。
- インストールが完了すると完了画面が表示されるので完了ボタンをクリックします。
これでVSCodeのインストール完了です。
インストール後はVSCodeを起動して、基本的な使い方を学ぶための動画やチュートリアルを参考にしてください。
無茶苦茶機能多いので大変だけど。
それとVSCodeを活用してHTMLやCSSの学習を行いたい場合。検索刷れば関連情報（HTMLやCSSの解説した動画やチュートリアルなど）が大量に出てくるのでそれらを参考にしてください。
VSCodeの基本的な使い方
まずはエディタの操作方法から。
基本的なエディタの操作方法
VSCodeのエディタでコードを編集する基本的な操作方法は以下。
- ファイルの新規作成や既存のファイルの開き方
- テキストの入力や編集方法
- ファイルの保存や名前を付ける方法
- ファイルの閉じ方やエディタの終了方法
これもザックリ割愛します。探すと一杯出てくるし、基本的には各OSのアプリの動作に準じてるからそこまで困る事も無いと思います。
便利なショートカットの使い方
それよりもショートカットキーの方が大事な気がします。
より効率的に使うにはショートカットキーの活用が必須ですが、基本となるのは以下のようなショートカットキーかと思います。
- コードのコピー・切り取り・貼り付け
- 選択したコードのインデントの変更
- エディタ内の文字列の検索・置換
- 行の結合・分割
ちなみにショートカットキーは大体メニューに表示されているので覚えましょう。
VSCodeの設定方法
VSCodeの設定は、ユーザーレベルの設定とワークスペースレベルの設定の2つがあります。
ユーザーレベルの設定はVSCode全体の設定を変更するためのものであり、ワークスペースレベルの設定は特定のプロジェクトやフォルダに対してのみ設定を適用するためのものです。
これ結構ややこしいので後回しでもいい気がしますけどね。
Userの設定と外観の変更方法
VSCodeのユーザーレベルの設定を変更するには、左下の歯車アイコンをクリックして表示されるメニューから「設定」を選択します（Macの場合は「Code」メニューから「環境設定」を選択します）。
設定画面が表示されるので、ここでさまざまな項目を変更することができます。
例えば、テーマやアイコンの変更を行いたい場合は、「外観」セクションを選択し、テーマやアイコンのプルダウンメニューから選択します。また、フォントサイズや行の折り返し方法などの表示設定も変更することができます。
設定を変更した後は自動的に保存されますが、変更を破棄する場合は「戻す」ボタンをクリックすると元の設定に戻すことができます。
Workspaceの概念とその設定方法
ワークスペースレベルの設定を行うにはフォルダをワークスペースとして開く必要があります。
フォルダを開くにはVSCodeを起動し、メニューの「ファイル」→「フォルダを開く」を選択して対象のフォルダを選ぶだけです。
ワークスペースレベルの設定はワークスペースを開いた後、対象のフォルダをクリックして表示されるサイドバーメニューの「設定」アイコン（歯車アイコン）をクリックしてワークスペースの設定画面を表示する事になります。
ユーザーレベルの設定と同様にさまざまな項目を変更することができますが、ワークスペースの設定は特定のプロジェクトやフォルダにのみ適用なので注意してください。
設定の変更が終わったら、設定画面を閉じるだけで変更内容は保存されます。
VSCodeの便利な拡張機能
これがVSCodeのキモなのかも。
拡張機能が便利すぎるという点です。この拡張機能次第で開発効率がガラッと変わります。
拡張機能のインストール方法
VSCodeに拡張機能の追加は以下の手順になります。
- VSCodeを起動します。
- サイドバーの最下部にある拡張機能ボタン（四角いパズルピースのアイコン）をクリックします。
- 表示された検索バーに追加したい拡張機能の名前を入力します。
- 検索結果から選択した拡張機能をクリックします。
- 拡張機能のページが表示されるので、「インストール」ボタンをクリックします。
- インストールが完了したら、VSCodeを再起動します。
これで拡張機能がVSCodeに追加されます。
初心者向けにおすすめの拡張機能
最後にちょっとだけ。
VSCodeの拡張機能のうち、特に初心者におすすめのいくつかを紹介します。
- Emmet：HTMLやCSSのコーディングを効率化するツールです。短い記法でHTMLやCSSを記述することができ、手間を省くことができます。
- Git Lens：Gitの操作をサポートするツールです。コードの変更履歴やブランチの切り替えなど、Gitの操作を簡単に行うことができます。
- Python：Python言語の開発をサポートする拡張機能です。シンタックスハイライトやデバッグ機能など、Pythonの開発に必要な機能が揃っています。
これらの拡張機能はVSCode上での開発作業を効率化するのに役立ちます。
詳細はまた別にて。
