Flutterはじめる

【Flutter】VSCodeで自動整形（コードフォーマット）する

本記事の目標

VSCodeで、ファイル保存時に自動でコードフォーマットするように設定する

流れ

  1. VSCodeでDartプラグインのインストール（Flutterプラグインを入れると同時にDartプラグインもインストールされるみたい...？）
  2. VSCodeで「settings.json」ファイルを開いてDartの設定を入力する

Dartプラグインのインストール

VSCodeを開いたら左側に「正方形のブロックが一個仲間外れにされたマーク」（下画像の矢印先）があると思うのでそれをクリックして

検索ウィンドウに「dart」と入力してみてください

一番上に「Dart」プラグイン（下画像の角丸長方形）が出てくるので「Install」をクリックしてください

もし「Install」ボタンが表示されていない場合はすでにインストールされているので飛ばして「settings.jsonを編集」に飛んでください！

（Flutterプラグインをインストールしていたら自動でDartプラグインもインストールされているかも知れません！）

Dartプラグインのインストール

これでインストールが始まります

インストールが完了したら「Dart」プラグインの導入は完了です！

settings.jsonを編集

VSCodeで「command + Shift + P」を押してコマンドパレットを開いてください

開いたら「setting」と入力して候補に現れる「Preferences: Open Settings (JSON)」をクリックしてください

※「Preferences: Open Default Settings (JSON)」というのもあるのですが開くのはDefaultがついていない方です！

コマンドパレット

開いたら以下コードを追加してください

"[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.rulers": [
        80
    ],
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": false,
    "editor.defaultFormatter": "Dart-Code.dart-code",
    "editor.formatOnPaste": true
},

追加後はこんな感じになっているかなと思います

setting.jsonの編集

これでファイル保存時に自動で整形してくれるようになるはずです！

  • この記事を書いた人

てるりんぴっく

-Flutterはじめる