🥰

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

6 min read

VSCodeで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>[]; 

(+ 未使用の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';

括弧のペアを色分けする

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

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

設定方法

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

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

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

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

最後に

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

Discussion

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