俺の開発環境2024🚀

今年の私の開発環境を共有します。

少しでも参考になるものがあれば嬉しいです。

ダウンロードするツール

• Visual Studio Code
• Homebrew
• Arc
  • ブラウザ
  • 最近Chromeの代わりに使い始めた
• Raycast
  • ランチャーツール
  • 便利すぎる..
• WezTerm
  • ターミナル
• Sequel Ace
• Docker for Mac
  • もしくはRancher Desktopなどの代替ツール
• f.lux
  • 現在の場所を入力したら、いい感じに画面の光量を調節してくれる
    • e.g. 夜間はブルーライトをカットする など

Homebrewでインストールするツール

• jq
• starship
  • ターミナルをいい感じにするツール
• k9s
  • Kubernetesを楽に管理するためのツール
  • kubectlコマンドを打つ必要が無くなる
• gh
• git
  • デフォルトでインストールされている場合は不要

VSCodeの設定

code .でVSCodeを開けるようにする

1. Cmd + Shift + Pでコマンドパレットを開く
2. shell と入力し、Shell Command: install 'code' command in PATHを選択する

拡張(extensions)をインストールする。

ディレクトリ内に以下のextensions.listを配置する。

marp-team.marp-vscode
vscodevim.vim
github.copilot
github.copilot-chat
eamodio.gitlens
streetsidesoftware.code-spell-checker
exiasr.hadolint
gruntfuggly.todo-tree
yoavbls.pretty-ts-errors
github.vscode-pull-request-github
formulahendry.auto-rename-tag
shardulm94.trailing-spaces
pkief.material-icon-theme
github.github-vscode-theme
esbenp.prettier-vscode
firsttris.vscode-jest-runner
ChakrounAnas.turbo-console-log
Infracost.infracost
miguelsolorio.fluent-icons

settings.jsonの設定

1. Cmd + Shift + Pでコマンドパレットを開く
2. user settingsと入力し、Preferences: Open User Settings（JSON）を選択
3. 以下の内容を記述する

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "cSpell.userWords": [
    "astro",
    "biomejs",
    "browsi",
    "browsitag",
    "clearfix",
    "cloudrun",
    "cloudsql",
    "codegen",
    "datetime",
    "deno",
    "dprint",
    "envsubst",
    "esbenp",
    "fastify",
    "fluxtag",
    "fuga",
    "gcloud",
    "googletag",
    "hoge",
    "jotai",
    "kintone",
    "kustomize",
    "laravel",
    "luxon",
    "marp",
    "memorystore",
    "nestjs",
    "qiita",
    "testid",
    "traefik",
    "urql",
    "zenn"
  ],
  "window.zoomLevel": 2,
  // GitHub Copilot
  "github.copilot.chat.localeOverride": "ja",
  "github.copilot.chat.edits.enabled": true,
  // VSCodeの不要な要素を非表示
  "workbench.editor.showTabs": "none",
  "editor.minimap.enabled": false,
  "workbench.statusBar.visible": false,
  "window.customTitleBarVisibility": "windowed",
  "editor.glyphMargin": false,
  "editor.folding": false,
  "breadcrumbs.symbolPath": "off",
  "workbench.activityBar.location": "top",
  // VSCodeのテーマなど
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "GitHub Dark Default",
  // プロダクトアイコン
  "workbench.productIconTheme": "fluent-icons",
  // Turbo Console Log
  "turboConsoleLog.addSemicolonInTheEnd": true,
  "turboConsoleLog.insertEnclosingClass": false,
  "turboConsoleLog.insertEnclosingFunction": false,
  "turboConsoleLog.quote": "'",
  "turboConsoleLog.wrapLogMessage": true,
  // エクスプローラーのインデント
  "workbench.tree.indent": 24,
  // タブ数制限
  "workbench.editor.limit.enabled":true,
  "workbench.editor.limit.value": 3,
  // ブラケットペアの範囲を可視化
  "editor.guides.bracketPairs": "active",
  // Monaspace
  "editor.fontFamily": "Monaspace Neon",
  // スペースの可視化
  "editor.renderWhitespace": "boundary",
  // save時に不要なスペースを削除
  "files.trimTrailingWhitespace": true,
  // 不要な効果音をOFFに
  "editor.accessibilitySupport": "off",
}

個人的にVSCodeの画面を広く使うのが好きなので、なるべく不要な要素は消すようにしています。

Shell・ターミナルの設定

Macのデフォルトシェルであるzshを使用。

gitのユーザー&エイリアス設定

以下のコマンドでユーザー名とメールアドレスを設定。

git config --global user.name "Hoge Taro"
git config --global user.email [e-mail]

git config --global --editを実行して、以下のエイリアスを設定。

[alias]
st = status
co = checkout
br = branch

参考: Gitでalias（エイリアス）を設定する方法をサクッと解説

GitとGitHubの連携設定

gh auth loginを実行する（sshキーの設定）

参考: 俺たちはもう GitHub のために ssh-keygen しなくていい

Dockerコマンドのエイリアスを設定

以下のコマンドで.zshrcを開く。

vim ~/.zshrc

以下の設定を追加

alias dc='docker compose'

参考: Dockerコマンドにalias(エイリアス)を設定する方法【作業効率UP】

Starshipの設定

.zshrcを開く。

vim ~/.zshrc

以下の記述を追加。

eval "$(starship init zsh)"

より細かく設定。

mkdir -p ~/.config && vim ~/.config/starship.toml

starship.tomlに以下の設定を追加。

[character]
success_symbol = "[❯](bold green)"
error_symbol = "[✗](bold red)"

[git_branch]
symbol = "🌱 "
style = "bold #b8d200"

[[battery.display]]
threshold = 20
style = "bold red"
[battery]
discharging_symbol = "😞 "

[git_status]
modified = "📝"
staged = '[++\($count\)](green)'

参考: Starship インストール

Chrome拡張のインストール

• OneTab
• Refined GitHub
  • GitHubの画面をいい感じにアップデート
  • 参考: https://github.com/refined-github/refined-github/blob/main/readme.md
• Dark Reader
• Send to Google Tasks
  • Google CalenderのTODOに気になった記事を登録できる
• AutoPagerize
  • Webページのページャーを無くせる
• AdBlock
  • 広告消せる
• Redirect Path
• daily.dev
• DeepL
• EditThisCookie
• Vimium
  • 参考: ブラウザを Vim ライクに操作する Vimium の布教と知見まとめ
• ModHeader
• FireShot
• theme(以下のいずれか)
  • Google Arts & Culture
  • 世界の名画が表示される

Macの設定

• よく使う言葉の辞書登録
• キーボード操作時の音を消す
  • System Preferences > Sound > Sound EffectsのVolumeを0に
• メニューバーを右にする
  • System Preferences > Dock > Position on screen > Right

おわりに

今年使い始めたツールで一番よかったのは、なんといっても Raycast です。

かなり開発生産性を向上させることができたと感じています。

来年も、気になったツールを積極的に試しつつ開発環境をブラッシュアップさせていきたいと考えています。