🐙
Flutter開発で使ってるVSCode拡張機能を紹介します。
概要
個人開発がきっかけでFlutterにハマり、今は業務でもFlutterエンジニアをしているK9iです。この記事では普段使っているVSCodeの拡張機能を紹介します。
多言語対応が簡単にできる
コマンドパレットからの簡単操作で他言語対応できます。
ファイルの生成場所等を好みに合わせて設定して使うのがおすすめです。
パッケージが最新なのかを表示する
パッケージを最新に保ちやすくなります。
こうなります。
エラーをコードの横に表示する
Typoに気付けるようにする
typoに波線がつくようになります。Android Studioだとデフォでtypoが強調さるので、乗り換え勢的には必須？
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がある程度自動化する
todoとfixmeコメントをまとめてくれる
コード上でgitの変更履歴が見える
コマンドパレットからAndroid EmulatorやiOS Simulatorを開ける
コーディングをアシストしてくれる
思考が…読めるのか？というくらい先読みしておすすめのコードを表示してくれます。おすすめされたコードを使うかどうか判断できる必要があるので初心者向きでは無いです。
おまけ
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,
}
こんな感じになります
まとめ
おすすめの拡張機能でした。良い拡張機能を見つけたら追記していこうと思います。
設定についても書こうと思ってたのですが、以下の記事まんまになりそうでやめました🥺
↓おすすめです
Discussion