MacBookProの2021年版 Flutter開発環境設定など

この記事は Mobility Technologies Advent Calendar 2021 の3日目です。

MacBookPro 16インチ M1 MAX 64GB モデルを手に入れました。
手に入れた、ということは環境設定しないと動かない訳なので、備忘録的に書き留めておきます。

ハード

最初に、外付けモニター(Thunderbolt4接続の5kモニター LG と、 Eizoの1920x1920の正方形モニター)を繋ぐのは、それぞれ、Thunderbolt4とHDMI として、残りは電源とThunderbolt4が2つ。電源はMagsafeが使える(この辺もうれしい)
残りのThunderbolt4の一つに、OWCのThunderbolt Dock

をつけて、そこからEtherNetや、Keyboard (KINESIS) & TrackBall (Kensington) などを。
(無線は入力的に不安なので好みで使ってないので有線接続)を
そして、そのままだと熱対策が怖いので、スタンドを用意して

これでクラムシェルモードでも安定

ソフトウェア

本編です
FlutterWebの環境のためにVSCodeで設定していくのですが、まっさらなMacのためにやったことを先に

・Alfred - ランチャー(アプリ呼び出し) 最近定番ですね

・Bartender メニューバーアイテムの整理アプリ。M1PRO/MAXMacだとディスプレイのノッチがあるので今まで以上にメニューバーアイテム管理が大変なので

・Bitwarden - パスワードマネージャー

・DeepL 翻訳アプリ、最近PDFそのまま翻訳もしてくれるようになり、さっと文献との照らし合わせに便利

・Droplr - スクリーンショットやファイル共有

・Fork - GUIのgitclient

・iStat Menus - メニューバーに情報を集約させるもの

・iTerm - ターミナル

・Kaleidoscope - Diff(差分)管理アプリ

・Karabiner-Elements - キーリマップアプリ。基本的に英語キーボード使いなので、左コマンドをトグルで日本語/かなに変換、Caps<->Ctrlして使ってる

・VisualStudio Code - Flutter web の開発エディターとしても優秀

・Xcode - 何はなくともmacの基本開発環境。いれとかないと話にならない

あと等幅フォントを追加
・Circle M+ 1m - おなじurl内にある clanp もよい等幅フォント

・Ricty - 派生フォントなので好き好きで…… (Rictyはライセンスの関係で手元でbuildする必要がある。第二水準漢字までのもので Ricty Diminished というのもある)

Visual Studio Code の 設定

拡張機能
・Auto Close Tag (タグの開きと綴じを確認する)
・Auto Rename Tag (タグの関連名を確認)
・Bracket Pair Colorizer 2 (つながりを色で確認できるように)
・Dart (Dart拡張の標準、種類がたくさんあるが標準をあえて)
・Flutter (Flutter拡張の標準 - iOS/Android環境のdebugをVSCode内でできるように)
・Flutter Riverpod Snippets (Riverpod用のsnippet)
・GitLens (Git用の拡張、VSCodeでdiffなどとれるように)
・Japanese Language Pack for Visual Studio Code (日本語対応拡張)
・json (json表示用拡張)
・Prettier (Javascript のフォーマッター)
・vscode-icons (エクスプローラー表示時にアイコン設定して分かりやすく)

設定
・Editor:Font Size -> 16 (画面大きくして大きめにしている。この辺は好き好き)
・Editor:Font Family -> "Circle M+ 1m" を等幅のところに(全部こうしてもよい)
・Editor > Guides: Bracket Pairs -> true (ブラケットガイドを線でも表示)

Terminal 側 の 設定

まずはXcode installして、CommandLineTool もインストールしておく
・Homebrew

install
-> git
設定

% git config -l
credential.helper=osxkeychain
url.https://<authkey>:[e-mail]/.insteadof=https://github.com/
user.name=<name>
user.email=<mailaddress>
core.repositoryformatversion=0
core.filemode=true
core.bare=false
core.logallrefupdates=true
core.ignorecase=true
core.precomposeunicode=true
remote.origin.url=<url>
remote.origin.fetch=+refs/heads/*:refs/remotes/origin/*
branch.main.remote=origin
branch.main.merge=refs/heads/main

-> zsh, zsh-completions(zsh の補完ツール), zsh-git-prompt(git状態をzshで表示)
・PATH に M1MACなので、usr/local/bin だけではなくて
/opt/homebrew/bin および /opt/homebrew/sbin を追加
設定

% cat .zshrc
autoload -Uz colors && colors
zstyle ":completion:*:commands" rehash 1
typeset -U path PATH
path=(
  /opt/homebrew/bin(N-/)
  /opt/homebrew/sbin(N-/)
  /usr/bin
  /usr/sbin
  /bin
  /sbin
  /usr/local/bin(N-/)
  /usr/local/sbin(N-/)
  $HOME/.pub-cache/bin
  $HOME/fvm/default/bin
  /Library/Apple/usr/bin
)
if type brew &>/dev/null; then
  FPATH=$(brew --prefix)/share/zsh-completions:$FPATH
  autoload -Uz compinit && compinit
fi
alias python="/usr/bin/python3"
source "/opt/homebrew/opt/zsh-git-prompt/zshrc.sh"
PROMPT='%F{034}%n%f %F{036}($(arch))%f:%F{020}%~%f $(git_super_status)'
PROMPT+=""$'\n'"%# "

-> dart ( brew tap dart-lang/dart して最新のに向けておきつつinstall )
・PATHにpub用のを通してからfvmをinstallした方がいい
$HOME/.pub-cache/bin
-> fvm (これはpub経由なので、 pub global activate fvm )
-> flutter (fvm install <バージョン>, fvm use <バージョン>)

これで、flutterの開発環境が整いました。

enjoy.