🥰

【Flutter】VSCodeでの開発が便利👍になる機能、設定まとめ

2021/09/12に公開約6,600字11件のコメント

VSCodeでFlutterの開発をする際に時間節約になる公式機能や設定をまとめました(サードパーティの拡張以外です。またFlutterに特有のものでないものもあります)。

他におすすめがあればコメントで教えてください。

ツリー構造のガイドを表示する

Android Studio/IntellliJ ではおなじみのエディタ上に表示されるガイドです。

コード構造を把握しやすくするための拡張は色々ありますが、この表示が個人的には一番わかりやすいです。

ツリー構造のガイド
ツリー構造のガイド

設定方法

  1. コマンドパレット(Ctrl/Cmd+Shift+P)から「Preferences: Open Settings (JSON)」を呼び出す
  2. JSONに以下のエントリーを追加する
{
    "dart.previewFlutterUiGuides": true,
    // 以下はオプション
    "dart.previewFlutterUiGuidesCustomTracking": true,
    "dart.closingLabels": false,
}
  1. VSCodeを再起動する

公式から補足

  • 画像で線がダッシュになっている😭 のは、フォントサイズや行の高さなどによる影響みたいです。つながった線にするには editor.lineHeight を15で固定する必要があるとのこと
  • dart.previewFlutterUiGuidesCustomTracking も併せてtrueにすることで描画の遅延を防ぐことができます
  • この表示によってクロージングラベル(下記画像)が不要になる人もいるかと思います。クロージングラベルを非表示にするには dart.closingLabels をfalseにします

クロージングラベル
クロージングラベル

カスタムのSnippetを追加する

自分の使い方や癖に合ったカスタムができるので、一度設定してしまえばかなりの時間節約になると思います。

カスタムSnippet
カスタムSnippet / ファイル名からクラスを自動生成

設定方法

  1. コマンドパレット(Ctrl/Cmd+Shift+P)から「Preferences: Configure User Snippets」>「dart.json (Dart)」を呼び出す
  2. JSONに以下のフォーマットでエントリーを追加する
{
	"Snippetの名称": {
		"prefix": "トリガーキーワード",
		"body": [
			"実際のコード",
			"次の行はこのようにする",
		],
		"description": "Snippetの説明",
}

補足

個人的に使っているおすすめの設定

クラス名にファイル名を自動で反映
	"Named class": {
		"prefix": "Named class",
		"body": [
			"class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g} {",
			"  $1",
			"}",
		],
		"description": "Named class",
	},

snippet generator コピペリンク

ファイル作成後、prefixの項目通り named〜 とエディタに入れればSnippetが補完の一覧に出てくるので、選択してtabかenter。これでクラス名がファイル名そのままになります(大文字小文字、アンダーバーのありなしも自動調整)。

たとえば「todo_model.dart」というファイルだと、「TodoModel」というクラスが作成できます。上記サンプルは何も継承しない素のクラス用ですが、似たような使い方で、StatelessWidgetやRiverpod等のConsumerWidget用のSnippetも作ると便利です。

ファイル保存時の自動アクションを追加する

Ctrl/Cmd+Sで保存したときに自動で行ってくれるアクションを追加することで時間節約になります。

設定方法

  1. コマンドパレット(Ctrl/Cmd+Shift+P)から「Preferences: Open Settings (JSON)」を呼び出す
  2. JSONに以下のエントリーを追加する
{
    // ①コード整形の場合
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        // ②コード修正の場合
        "source.fixAll": true,
	// ③importの順番整理の場合
        "source.organizeImports": true,
    },
}

②コード修正について

最近追加された「Fix All」コマンドです。
"PROBLEMS"として上がってくるもののうち、書いた本人が判断する必要性の薄いものが自動修正されるっぽいです。

たとえば、、

const duration = const Duration();
// ↓↓↓
const duration = Duration();

final text = "text";
// ↓↓↓
const text = "text";

final list= List<int>();
// ↓↓↓
final list= <int>[]; 

(2022.02.14 追記)
(+ 未使用のimportなど) 👉 ③の機能でした。

③importの順番整理について

Effective Dartのベストプラクティスに沿った順番になります。

たとえば、、

import 'package:my_app/todo_list.dart';
import 'dart:math';
import 'package:my_app/todo_model.dart';
import 'package:flutter/material.dart';

// ↓↓↓

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:my_app/todo_list.dart';
import 'package:my_app/todo_model.dart';

(2022.02.14 追記)
未使用 import の自動削除は②ではなく、こちらの "source.organizeImports" の機能でした。私の勘違いか、仕様変更があったのかもしれません。

括弧のペアを色分けする

拡張のBracket Pair Colorizerが有名ですが、最近公式のものが追加されました。

Bracket Pair Colorizerよりも大きめのファイルでの描画パフォーマンスが良いそうです。(ただしコメントアウトしたときも色付けが残るなどの違いあり)

設定方法

  1. コマンドパレット(Ctrl/Cmd+Shift+P)から「Preferences: Open Settings (JSON)」を呼び出す
  2. JSONに以下のエントリーを追加する
{
    "editor.bracketPairColorization.enabled": true,
}

(2021.11.05 追記)
また以下の設定を追加することで括弧間に補助線を表示させることができます。

{
    "editor.guides.bracketPairs": true,
}

括弧の色分けと補助線追加
括弧の色分けと補助線追加

依存パッケージをコマンドパレットから追加する

最近追加された「Dart: Add Dependency」と「Dart: Add Dev Dependency」コマンドです。

依存パッケージの追加
依存パッケージの追加

クラス名変更時にファイル名を自動で変える

(2021.10.5 追記)
クラス名を変更するとファイル名がそれに合わせる形で自動的に変更されます。また別ファイルの参照リンクも変更してくれます。(参考

条件は以下の通り。

  • Dart SDKのバージョンが2.15以上であること
  • クラス名とファイル名が一致していること(大文字小文字、アンダースコアは無視される)
  • Rename Symbol (F2) を使ってクラス名を変更すること
  • 設定が以下の通りになっていること
{
    // Dart Code v3.28 より前: "dart.previewLsp": true,
    // Dart Code v3.28 以降 ↓
    "dart.useLsp": true,
    // always, prompt(選択制), never のオプションあり
    "dart.renameFilesWithClasses": "always",
}

最後に

以上です。ハッピーFlutterライフを!

Discussion

最近追加された「Fix All」コマンドです。
"PROBLEMS"として上がってくるもののうち、書いた本人が判断する必要性の薄いものが自動修正されるっぽいです。
(+ 未使用のimportなど)

"source.fixAll": trueとしつつ、未使用のimportだけは維持する方法は無いですかね?🤔

以下のようにfreezedでは一時的に未使用状態(自動生成後はそのファイルから参照されるため不使用ではなくなる)の import 'package:flutter/foundation.dart';を書いておく必要があって、自動生成実行前の保存時にそれが自動的に消される挙動が悩ましいなと思っています 🤔
未使用importの自動削除だけはオフにして、適宜手動のショートカット実行で済ませたいイメージです🐶

The reason being, importing foundation.dart also imports classes to make an object nicely readable in Flutter's devtool.
If you import foundation.dart, Freezed will automatically do it for you.
https://github.com/rrousselGit/freezed/blob/master/packages/freezed/README.md#run-the-generator

monoさん、コメントありがとうございます。

いま手元で確認してみたら、未使用importの削除は "source.organizeImports" で制御されているようです!"source.fixAll" ではありませんでした(私が勘違いしてたか、見直しがあったのかもしれません。記事修正します💦)。

なので "source.organizeImports": false としつつ "source.fixAll": true とすれば未使用でも残してくれると思うのですが、import の順番の自動修正はできなくなりそうです。

ご返信ありがとうございます。

"source.organizeImports": false としつつ "source.fixAll": true とすれば未使用でも残してくれると思うのですが

それはすでに試してますが、"source.fixAll": trueが勝ってしまうようで、効かないです🤔(記述の順番など変えても同様)
freezed使う上で不便に感じたりしてないですか?

手元のバージョンなどはこちらで、どれも現時点での正式最新版です:

  • Flutter 2.10.1
  • VS Code 1.64.2
  • VS Code Flutter extension: 3.34.0

import の順番の自動修正はできなくなりそうです。

以下に書いた通り、それが望む挙動です。

未使用importの自動削除だけはオフにして、適宜手動のショートカット実行で済ませたいイメージです🐶

"source.organizeImports": false
"source.fixAll": true

を私は

  • Flutter 2.8.1
  • VS Code 1.64.2
  • VS Code Flutter extension: 3.34.0

で試したのですが、monoさんのイメージしてる動作になっているようでした(自動削除、順番修正オフ)。ところが monoさんと同じ環境の端末で試してみたところ、

  • Flutter 2.10.1
  • VS Code 1.64.2
  • VS Code Flutter extension: 3.34.0

同じ settings.json の設定で挙動が異なり、おっしゃる通り import が source.fixAll により自動削除されてしまいました。確かにこれだと不便ですね。

SDK のバグか何かでしょうか?🤔

なるほど、Flutter 2.10系でfixAllがorganizeImportsを包含する感じになったのかもしれないです🤔
原因はともかく、現stable最新だと以前と違ってorganizeImportsのみオフができなさそうということですね。ありがとうございます🙏

"dart.previewLsp": true,

v3.28.0のアップデートでdart.previewLspからdart.useLspに変わっていました。

"dart.useLsp": true,

#3613: The dart.previewLsp setting has been renamed to dart.useLsp.

https://dartcode.org/releases/v3-28/

やまげんさん、ありがとうございます!追記しておきます!😃

久しぶりに見たら、更新していたつもりが反映されておらず今追加しました。。失礼しました!

ありがとうございます!
有益な記事たくさん書かれてて、いつも参考にさせていただいています😆

他におすすめがあればコメントで教えてください。

"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
    "pubspec.yaml": ".flutter-plugins, .packages, .dart_tool, .flutter-plugins-dependencies, .metadata, .packages, pubspec.lock, build.yaml, analysis_options.yaml, all_lint_rules.yaml",
    ".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",
    "readme.*": "authors, backers.md, changelog*, citation*, code_of_conduct.md, codeowners, contributing.md, contributors, copying, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors.md",
    "*.dart": "$(capture).g.dart, $(capture).freezed.dart",
},

これが.freezed.dartとかをnestしてくれてよかったです。(monoさんがtweetしてて知りました)
https://gist.github.com/gaetschwartz/b5fed3ebf7594c54472c6ecf11eed2e1

情報ありがとうございます!追加させていただきます。

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