👨‍💻

【Flutter Tips】VSCodeでFlutterを快適に開発するためのTips表

2022/12/04に公開約2,700字

こんにちは、Saeです。
私は「さえないエンジニア」から「さえたエンジニア」へクラスチェンジするために、日々レベル上げに勤しんでます。

皆さんは、Fluuterを開発する時のIDEは何を使ってますか?

僕は元々Androidの開発をやっていたこともあり、現在はAndroid Studioを使っております。
ただ公式のmediumの情報によると、最近はVSCodeが主流のようです。


https://medium.com/flutter/studying-developers-usage-of-ides-for-flutter-development-4c0a648a48

そして兼ねてから思っていた不満から、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 + p
2. Dartと入力し、Add Dependencyを選択
3. インストールしたいパッケージを選択
DevToolsを開く 1. command + shift + p
2. 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

ログインするとコメントできます