Visual Studio Code（VSCode）をインストールし、Flutter開発環境を整える話
本記事をご覧いただき、誠に有難うございます。
投稿主の無能と申します。
前回まででFlutterの環境構築を整え、実際にFlutterのデモアプリを起動させることができました。
今回は、Visual Studio Code（VSCode）をインストールし、VSCodeのFlutter開発環境を整えたいと思います。
Visual Studio Code（VSCode）をインストールする
Visual Studio Code（VSCode）ってどんなエディタ？
Visual Studio Code（以下VSCode）はMicrosoft社が開発したエディタで、シンプルでありながらもカスタマイズ性に優れており、開発者にとってはもう定番となっているような存在
です。
しかもMacやLinuxでも使えるクロスプラットフォーム対応でありながら、フリーで使えるオープンソースのエディタとなっています。
無能も普段Chromeブラウザの次にVSCodeをインストールし、シンプルなテキストエディタとしても真っ先にWindwosのメモ帳から置き換えて使っています。
Flutterも公式でVSCodeを紹介しています。
Flutter公式のエディタのセットアップの手順の中で、Android Studioと共に紹介されている
無能はVSCodeで開発していきたいと考えておりますので、Android Studioでの開発を考えている方とのエディタ操作等に相違が出てくる可能性があることを、予めご了承ください。
VSCodeをDLする
「vscode」で検索すると直ぐに公式のDLページが見付かります。
Visual Studio Code公式DLページ：https://code.visualstudio.com/download
OS毎に分かれているのでWindowsを選択します。
なお、常に安定した最新版がDLされます。
VSCodeのDLページでWindwosを選択
DLが開始されます。
DLが開始される
DL完了後、インストーラを起動します。
DL完了後、インストーラを起動する
現在（2022/2月時点）のバージョンは1.64となっています。
このインストーラを起動すると、最初に使用許諾について同意を求められますので、同意して次に進みます。
インストーラを起動するとVSCodeの使用許諾への同意が求められるので、同意して次へ進む
次にVSCodeのインストール先の指定を聞かれます。
今回はデフォルトのまま進めます。
インストール先の指定
今回はデフォルトのまま
次にスタートメニューの登録に関しての質問です。
今回はデフォルトのまま進めます。
スタートメニュー登録に関する質問
今回はデフォルト
次は追加タスクの選択です。
デフォルトでは
- サポートされているファイルの種類のエディターとしてCodeを登録する
- PATHへの追加
の2項目にチェックが入っています。
追加タスクの選択画面
デフォルトでは2項目にチェックが入っている
「サポートされているファイルの種類のエディターとしてCodeを登録する」は、VSCodeがサポートしている（≒VSCodeで読み込める）ファイルへの関連付けが行われます。これにチェックを入れると、テキストファイル（.txt）等のVSCodeで読み込めるファイルはVSCodeで開くようになります。
「PATHへの追加」は、環境変数Pathへの追加になります。任意フォルダ\flutter\binをPath
に追加した時と同様です。Pathに追加されると、「ファイル名を指定して実行」ダイアログやコンソールで「code」と入力するとVSCodeが呼び出し可能になります。
無能の環境では更に2項目にチェックを入れ、「デスクトップ上にアイコンを作成する」以外の項目全てにチェックを入れます。
無能の環境では「デスクトップ上にアイコンを作成する」以外の項目にチェックを入れる
追加の
- エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する
- エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する
の2項目について簡単に説明します。
先ずコンテキストメニューですが、所謂右クリックで表示されるメニューの事です。
そのコンテキストメニューがファイル・ディレクトリ（フォルダ）で各々「Codeで開く」が追加されます。
ファイル単体でコンテキストメニューが追加されるのは理解できるが、何故フォルダ（ディレクトリ）もコンテキストメニューが追加されるのか？という疑問ですが、これはVSCodeの機能として、フォルダ（ディレクトリ）上で「Codeで開く」の操作を行った場合に、そのフォルダ（ディレクトリ）を1つのグループとして扱ってくれる機能があるためです。（図参照）
ディレクトリ（フォルダ）上で「Codeで開く」を行った場合
この機能が普段使いでも結構便利なので、無能は追加タスクとして選択しています。
勿論この「追加タスクの選択」も任意となります。必要な機能を選択してください。
次にインストール準備完了となります。
項目に相違無いかを確認し、次へ進みます。
インストール準備完了画面
項目に相違無いか確認し次へ進む
インストールが開始・完了します。
インストール中
インストール完了
「Visual Studio Codeを実行する」にチェックを入れたまま完了し、VSCodeを起動します。
Visual Studio Codeを起動した
エクステンションをインストールする
VSCodeではエクステンションと呼ばれる拡張機能があります。
Android Studioで言うところのプラグインですね。
様々なエクステンションがありますが、ここではFlutter関連のものだけを入れていきます。
日本語化エクステンション
何はともあれVSCodeの日本語化ですね。
エクステンションを開き（エクステンションのアイコンをクリック、またはCtrl+Shift+Xキー）検索バーに「Japanese」を入力します。
すると一番上に「Japanese Language Pack for Visual Studio Code」が表示されるので、インストールボタンを押下します。
エクステンションを開く（アイコンをクリック、またはCtrl+Shift+Xキー）
エクステンションの検索バーに「Japanese」を入力
一番上に「Japanese Language Pack for Visual Studio Code」が表示されるので、インストールボタンを押下
右下にVSCodeの再起動の確認メッセージが表示されるので、「Restart」を押下してVSCodeを再起動します。
VSCodeの再起動確認メッセージ
「Restart」でVSCodeを再起動する
日本語化が完了した
Flutter関連のエクステンション
Flutter関連のエクステンションは、Android Studioと同様にFlutterとDartの2つとなります。Flutterのエクステンションをインストールすると、自動的に関連してDartのエクステンションがインストールされます。
エクステンション（日本語化適用後は拡張機能）を開き、検索バーに「flutter」を入力し、一番上に出てきた「Flutter」をインストールします。
エクステンション（日本語化適用後は拡張機能）を開き、検索バーに「flutter」を入力
一番上に出てきた「Flutter」をインストール
Flutterをインストールし終わると、同時にDartエクステンションもインストールが完了しています。
Flutterのインストールが完了すると、同時にDartエクステンションもインストールが完了している
これでVSCodeでのFlutter開発環境が整いました。
お疲れさまでした。
今回のエクステンションはあくまでもFlutter開発に必要最低限のものだけをインストールしたので、Flutterに限らずその他エクステンションについては、ご自身で良いものを選んでインストールしてください。
まとめ
本記事では
- VSCodeをインストールした
- VSCodeを日本語化し、Flutter関連のエクステンション（拡張機能）をインストールした
という事を行いました。
次は、どのようなアプリを開発するのかを考えて設計してみたいと思います。
本記事もご覧頂き、誠に有難うございます。
ではまた。
コメント
コメントを投稿