VSCodeはMicrosoftが提供する高機能コードエディタです。
WindowsだけでなくMacOSやLinuxなどのクロスプラットフォームに対応しています。
豊富な拡張機能があり、開発用のエディタとして高いシェアを占めています。
今回はVSCode初期セットアップのおすすめを紹介いたします。
Windows 11へインストール
インストーラーをダウンロード
VSCodeのインストーラーをホームページからダウンロードします。
「Download for Windows」のボタンでダウンロードしてください。
インストール
ダウンロードしたインストーラーを実行します。
ソフトウェアライセンスに同意します。
インストールフォルダを指定します。
ショートカットを作成する場所を選択します。
追加タスクの選択をします。アイコンの追加以外は既定のままでOKです。
インストールします。
完了したら立ち上げましょう。
初期設定
言語設定
最初期は言語が英語になっているので、日本語の拡張機能をインストールします。
赤丸の拡張機能を開きます。
検索ボックスで「japanese」と検索し、Japanese Languageの拡張機能をインストールします。
インストールが完了したら再起動を求められるので、赤丸を押して再起動します。
日本語になりました。
GitHub Copilotのインストール
GitHub CopilotはVSCodeに組み込まれたCopilotで、プロンプトで指示を出すとある程度適切にコーディング、ファイル作成/編集、コマンド実行を行ってくれます。
これはコードを書く上で欠かせない存在になっているので、初期設定の一環としてインストールしましょう。
拡張機能から「github」と検索し、GitHub Copilotをインストールします。
GitHubにサインインします。
Continue with GitHubを押すとブラウザが立ち上がり、GitHubサインインページが開きます。
GitHubアカウントの作成
既にアカウントがある場合はサインインしてください。
アカウントを持っていない場合はCreate an accountから作成します。
普通のアカウント作成の要領で作成していきます。
アカウント作成時の画像認証がむずいです
GitHub Copilotのインストール確認
ログインが完了したらVSCodeに戻ります。
アカウントを作成しているとVSCode側でタイムアウトされるような動きになるので、その際は再度作成したアカウントでVSCodeからサインインしてください。
サインインが完了すると、このように色々なLLMモデルを選ぶことができるようになります。
適当に触ってみる
これからプログラムファイルを生成していくので、ローカルのファイル保存場所を指定する必要があります。
フォルダーを開くから適当なフォルダを選択してください。
左上の赤線でフォルダーを開いていることが分かるので右下の赤丸で適当なindex.htmlファイルを作ってもらいます。
右側のような返答が返ってきて、特に触ることもなく左のフォルダ配下にindex.htmlファイルが生成されました。
ファイルを開いて保持します。
エクスプローラーからダブルクリックしてブラウザで見てみます。
こんな感じでオリジナルのindex.html画面を生成することができました。
まとめ
今回はVSCodeの初期セットアップについて解説しました。
またGitHub Copilotについても少し触れました。
index.htmlだけではなく、bicepファイル、yamlファイルなど色々対応できることと、必要な拡張機能などがあれば都度Copilotが提案・案内をしてくれるので、コードの開発だけではなく、開発環境のサポートも含めて心強いガイドになります。
GitHub Copilotは無料で使えますがトークンかなにかの上限がありますので、上限を超えたら課金が必要になります。
自動課金ではなく、GitHubからクレカなどの支払い情報を登録して課金が開始されますので、課金が来るまでは無料でよいと思います。
ぜひ使ってみてください！
コメント