🐙

Flutter開発で使ってるVSCode拡張機能を紹介します。

2021/12/09に公開約2,200字

概要

個人開発がきっかけでFlutterにハマり、今は業務でもFlutterエンジニアをしているK9iです。この記事では普段使っているVSCodeの拡張機能を紹介します。

多言語対応が簡単にできる

コマンドパレットからの簡単操作で他言語対応できます。
ファイルの生成場所等を好みに合わせて設定して使うのがおすすめです。

https://marketplace.visualstudio.com/items?itemName=localizely.flutter-intl

パッケージが最新なのかを表示する

パッケージを最新に保ちやすくなります。

https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens

こうなります。

エラーをコードの横に表示する

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

Typoに気付けるようにする

typoに波線がつくようになります。Android Studioだとデフォでtypoが強調さるので、乗り換え勢的には必須?

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

dartで使うときはsettings.jsonに以下の記述が必要

settings.json
"cSpell.enabledLanguageIds": [
        "dart",
    ],

自分はPromlemsタブに出したくないので、以下の設定を追加してます。

settings.json
    // TypoはHintにする
    "cSpell.diagnosticLevel": "Hint",
    // HintもErrorLensの対象にする
    "errorLens.enabledDiagnosticLevels": [
        "error",
        "warning",
        "info",
        "hint"
    ]

importがある程度自動化する

https://marketplace.visualstudio.com/items?itemName=davidwoo.flutter-auto-import

todoとfixmeコメントをまとめてくれる

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

コード上でgitの変更履歴が見える

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

コマンドパレットからAndroid EmulatorやiOS Simulatorを開ける

https://marketplace.visualstudio.com/items?itemName=DiemasMichiels.emulate

コーディングをアシストしてくれる

思考が…読めるのか?というくらい先読みしておすすめのコードを表示してくれます。おすすめされたコードを使うかどうか判断できる必要があるので初心者向きでは無いです。

https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

おまけ

VSCodeのデフォルト文字サイズは小さいので、フォント設定をいじると見やすくなっておすすめです。

Fira Codeをインストール(mac)

brew tap homebrew/cask-fonts
brew install font-fira-code --cask

settings.jsonのフォント周りの設定を更新

  • 文字サイズを少し大きく(12->13)
  • Fira Codeを設定
  • 合字有効化
settings.json
{
    "editor.fontSize": 13,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
}

こんな感じになります

まとめ

おすすめの拡張機能でした。良い拡張機能を見つけたら追記していこうと思います。
設定についても書こうと思ってたのですが、以下の記事まんまになりそうでやめました🥺
↓おすすめです

https://zenn.dev/inari_sushio/articles/0f4c606c8340ee
GitHubで編集を提案

Discussion

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