👨💻
【Flutter】VSCodeでの快適な開発を実現するためのTips集
こんにちは、Saeです。
私は「さえないエンジニア」から「さえたエンジニア」へクラスチェンジするために、日々レベル上げに勤しんでます。
皆さんは、Fluuterを開発する時のIDEは何を使ってますか？
僕は元々Androidの開発をやっていたこともあり、現在はAndroid Studioを使っております。
ただ公式のmediumの情報によると、最近はVSCodeが主流のようです。
そして兼ねてから思っていた不満から、VSCodeに乗り換えたい欲もふつふつ湧いてきました。
- やっぱAndroid Studio重い
- 便利な拡張機能が多そう
- 使っているGitのGUIがVSCodeの拡張機能
- VSCodeの方がUIがすき
そこで今回はAndroid Studio以上に、VSCodeで快適に開発するためのTipsを表形式でまとめていきたいと思います。（随時更新予定です。）
VSCodeを快適に開発するためのTips表
ショートカット / 操作
| 動作 | キー | 備考 |
|---|---|---|
| ファイル名の検索 | command + P |
|
| 定義へ移動 | f12 |
|
| 実装へ移動 | command + f12 |
|
| 参照へ移動 | shift + f12 |
|
| 変数として抽出 | 1. 変数へ抽出したい場所を選択 2. リファクタ 3. Exctract Local Variable
|
|
| 関数へ抽出 | 1. 関数へ抽出したい場所を選択 2. リファクタ 3. Exctract method |
|
| ブロックの挿入 | 1. 挿入したい場所を選択 2. リファクタ 3. 挿入したい処理を選択 |
挿入できる処理の種類 ・if ・for ・try-catch…etc |
| ファイル内を検索 | command + shift + F |
•フォルダ配下を指定したい場合、含めるファイル（詳細検索）フォルダのパスを記載 • 「ツリーとして表示」を押せば、ディレクトリ形式で表示 |
| 選択 | • 1行：command + shift + 矢印キー• 単語： command + alt + 矢印キー
|
|
| クラス・変数・関数名の変更 | 1. 変更したい対象を選択 2. f2 / 右クリック:シンボルの変更
|
|
| 選択した文字列を全ての変更 | 1. 変更したい対象を選択 2. command + f2 / 右クリック:全ての出現箇所を変更
|
|
| コードの問題を修正（Quick fix） | command + . |
|
| 実行 / デバッグ | F5 |
・profile / release 実行は、lauch.hsonの「flutterMode」を指定 |
| パッケージの追加 | 1. command + shift + p2. Dartと入力し、Add Dependencyを選択3. インストールしたいパッケージを選択 |
|
| DevToolsを開く | 1. command + shift + p2. devToolと入力し、Open Devtoolsを選択3. 表示したいDevtoolsを選択 |
拡張機能
| 拡張機能 | 内容 | URL |
|---|---|---|
| Version Lens | pubspec.yamlから、パッケージの最新verが見れる | https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens |
| Error Lens | エラー、警告などをエディター上に直接表示できる | https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens |
| Better Comments | TODOなどのコメントを強調表示してくれる | https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments |
| Todo Tree | TODOなどのコメント箇所を一覧で表示可能 | https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree |
| Remove Comments | 指定したコメントタイプを全て削除できる（プロジェクト作成時のデフォルトコメント削除に役立つ） | https://marketplace.visualstudio.com/items?itemName=plibither8.remove-comments |
| Thunder Client | Rest APIクライアント（Post ManのVSCode verみたいなやつ） | https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client |
| GitHub Copilot | コメントを書いたら、いい感じのロジック・ウィジェットを書いてくれるすごいやつ |
Discussion