zedを使ってみる。ついでにUIをVSCodeっぽくする。
はじめに
こんにちは、Rerurate_514と申します。
今回はZedを使ってみるログになります。
なんか最近 VSCode の Dart 言語静的解析が本当に終わっているので、違うところに乗り変えようかなと思っていたところです。
なんかVScodeは結構な頻度で静的解析が切れるというか、本当にちょくちょく解析していますだとか、Dart構成をなんたらかんたら、というので5分ぐらい待つのがストレスでした。
そこで、自分のサークルのサーバでzedがどうとか言っている先輩がいたので、これを機に乗り変えてみようという感じです。
install
自分、Zedを昔使おうとしたことがあって、その時はWindows対応がされてなくて泣く泣くやめた思い出がありました。なので、Windowsがないかと思っていましたが、どうやら去年の12月に出ていたそうですね。
早速何もいじらないでinstall
画面としては、かなり素朴な感じ。
こっから、なるべく自分が普段使っているVSCodeに見た目を寄せていきたい。
げんごきのーう
自分はFlutterエンジニアなんで、Flutterサポートが最重要！
拡張機能(Cmd * Shift + x)からDartをinstall
mainの横に実行ボタンあったから、押してみたら、こっからfvmかどうか選べるっぽい
いるのかな
実行速度的には問題なし。
ただ、静的解析はvscodeよりちょっとだけ気にならないぐらい
あとはRiverpodとfreezedとかのスニペットかな
一応Flutter Snippetsっていう拡張機能があるみたいだけど。
てかこれ、statelessはあるのに、cosumerstatelessはないんかい
freezedとかには対応していないみたい
一応あった(Freezed Snippets)けど、abstract使ってるから論外
スニペット拡張機能作ってみた→ 公開できたら追記する。でもたぶん重複で却下される気がする
はまりポイントなんだけど、importを最初に含んだスニペットは候補に出てこないみたい
なんで？？？？
RiverpodGenはあったし、結構モダンだったからそれを使う。
VSCodeに似せていく。
theme
まず、拡張機能(Cmd * Shift + x)から、VScode Dark Modernを追加。
それだけで、大分近くなる。
自分のFlutterプロジェクトだけど、
file icon
アイコンも追加。
拡張機能から、Material Icon Themeを追加
いい感じ
文字の色 notシンタックスハイライト
あと文字の色も濃くする。
設定ファイル(Ctrl + Alt + ,)に以下を追記。
"experimental.theme_overrides": {
"text": "#ffffff",
"text.muted": "#cccccc",
},これは文字色を濃くするもの。
元の色
適用後
画像だとわかりずらいかもしれないですけど、ファイルやフォルダの色が濃くなっています。
ただ、これをすると、lightモードの時も色がoverrideされてしまいますが、ライトでコーディングする人を見たことがないので無問題ですね。
setting.json関連
あとsetting.jsonをゴリゴリに改造していく。
ファイルパネル関連
ファイルパネルを左寄せするときは、
"project_panel": {
"dock": "left"
},空ディレクトリを折りたたまないようにするにはauto_fold_dirsをfalseにするだけ。
"project_panel": {
"auto_fold_dirs": false,
"dock": "left"
},minimap
後いるかどうかわかりませんが、minimap
こういうの
を常時表示するには、
"minimap": {
"show": "always",
},書くだけ
gitパネル
あとgitも標準だと右側にcommitとかできるパネルがあるのですが、
"git_panel": {
"dock": "left",
},これを書くと、vscodeみたいに左に行きます。
全体
主要なものはできたので、全体のsetting.jsonでも載せておきます。
ただ自分はAI機能とかAgentsとか使っていないので、それを無効化しています。
だからあんまり参考にならないかも
{
"edit_predictions": {
"provider": "none",
},
"debugger": {
"button": false,
},
"collaboration_panel": {
"button": false,
},
"outline_panel": {
"button": false,
},
"agent": {
"button": false,
"favorite_models": [],
"model_parameters": [],
},
"icon_theme": {
"mode": "dark",
"light": "Material Icon Theme",
"dark": "Material Icon Theme",
},
"project_panel": {
"auto_fold_dirs": false,
"dock": "left",
},
"base_keymap": "VSCode",
"preview_tabs": {
"enabled": true,
"enable_preview_from_file_finder": true,
},
"minimap": {
"show": "always",
},
"ensure_final_newline_on_save": true,
"ui_font_size": 16,
"buffer_font_size": 15,
"theme": {
"mode": "dark",
"light": "Ayu Light",
"dark": "VSCode Dark Modern",
},
"toolbar": {
"breadcrumbs": true,
"quick_actions": true,
},
"tab_bar": {
"show": true,
"show_nav_history_buttons": true,
},
"scrollbar": {
"show": "always",
},
"indent_guides": {
"enabled": true,
"coloring": "indent_aware",
},
"relative_line_numbers": "disabled",
"show_whitespaces": "none",
"vertical_scroll_margin": 3,
"experimental.theme_overrides": {
"text": "#ffffff",
"text.muted": "#cccccc",
},
}終わり！
最終的にこんな感じになりました
まあ結構いい感じですね
あとは左上のハンバーガーボタンをなくして、常にFileとかが表示されるようにしたい
あと日本語対応お願いします。
それ以外は不満は今のところはないです。
リボンバーちょっとだけほしいかも。
