VSCodeの設定・ショートカット集 - Ki-Kobayashi/flutter_wiki GitHub Wiki

.

🟩 ショートカット

  • 警告修正・Widget操作：　ctrl + .
  • コマンド： ctrl + shit + P
  • ファイル検索： ctrl + P
  • 変数名の一括変更：shift + Command + L

.

🟩 その他：作業効率UP

.

🟡 フォントの拡大・縮小をする設定(Ctrl + マウスホイール)

  1. メニューバーから「ファイル(F)」→「ユーザー設定」→「設定」をクリック
  2. 下記画像の設定

.

🟡 VSCodeの外観サイズの変更

■ ショートカット

  • 拡大 ： Ctrl  +  ;
  • 縮小 ： Ctrl  +  -
  • ズームのリセット ： Ctrl  + 0

.

🟡 Dartでファイル保存時にセミコロンを自動挿入

【ワークスペースではなく、Userの方が良さそう。チーム共有したいなら、ワークスペースかな】 　　ワークスペースのsetting.json

.

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

★参考元：https://zenn.dev/inari_sushio/articles/0f4c606c8340ee

  1. Ctrl/Cmd+Shift+P →「Preferences: Open Settings (JSON)」【User】
  2. .vscode/settings.json に以下追記

.

🛑【補足】※コード整形箇所（editor.xxx）でdartに絞りたいときは、下記**[dart]ブロックで囲う**

  "[dart]": {
    "editor.codeActionsOnSave": {
      "quickfix.insertSemicolon": true,
    }
  }

.
■ 追加内容（.vscode/settings.json）

{
　　 // ツリー構造のガイドを表示
    "dart.previewFlutterUiGuides": true,
    // 以下はオプション
    "dart.previewFlutterUiGuidesCustomTracking": true,
    "dart.closingLabels": false,

    // コード自動整形
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        // コード自動修正
        "source.fixAll": true,
        // セミコロン自動追加
        "quickfix.insertSemicolon": true,
    　　// import自動順列
        "source.organizeImports": true,
    },
    //　括弧に色付け
    "editor.bracketPairColorization.enabled": true,
    // 括弧間の補助線
    "editor.guides.bracketPairs": true,
    // Dart Code v3.28 より前： "dart.previewLsp": true,
    // Dart Code v3.28 以降　↓
    "dart.useLsp": true,
    // always, prompt（選択制）, never のオプションあり（クラス名は F2 で変更する必要あり）
    "dart.renameFilesWithClasses": "always",
}