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

概要

個人開発がきっかけで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",
    ],

```text

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

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

```text

### 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)

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

```text

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

- 文字サイズを少し大きく(12->13)
- Fira Codeを設定
- 合字有効化

```json:settings.json
{
    "editor.fontSize": 13,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
}

こんな感じになります

まとめ

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