MacBook Pro 自分的ベスト環境構築（拡張機能・アプリ・ツール・etc...）

はじめに

設定編

キーボード

ショートカット

• 入力ソース > 前の入力ソースを選択 をオフに
• Spotlight > Spotlight検索を表示 をオフに
  • raycast を使うので
• Spotlight > Finderの検索ウインドウを表示 をオフに
  • BetterTouchTool の設定との干渉を防ぐために
• Mission Control
  • デスクトップ*へ切り替えを全て ON に
    • デスクトップを 10 個作ってからする

入力ソース

• ¥ で＼入力
• 数字を全角入力のチェックを外す

トラックパッド

• タップでクリックをオン
• 軌跡の速さを MAX に
• フルスクリーンアプリケーション間をスワイプ
  • 4 本指に
  • BTT(BetterTouchTool)のジェスチャーと干渉するのを防ぐため
• Mission Control
  • 4 本指に
  • BTT(BetterTouchTool)のジェスチャーと干渉するのを防ぐため

ディスプレイ

• スペースを拡大

Mission Control

• 最新の使用状況に基づいて操作スペースを自動的に並べ替える を Off に

日付と時刻

• 日付のオプション
  • 日付を表示を ON に

アプリ編

Chrome

raycast

• ホットキーを Ctrl + Space に変更

BetterTouchTool

• ジェスチャー登録アプリ
  • トラックパッドやキーボード、更には Touch Bar まで様々な入力にショートカットを登録できます。
  • iPhone を脱獄していた人ならわかるかと思いますが、Activator のようなものです．
• これは Macbook を使うなら必須！！というくらいにはオススメです。

MarkText

• MarkDown 編集アプリ
• 以前は Typora を（その前は MacDown を)使っていましたが、Typora 有料化に伴い、こちらを使うようになりました
• ターミナルからファイルを指定して開けるようにする
  • echo '\n\n# marktextをCLIから開けるように\nalias marktext="/Applications/MarkText.app/Contents/MacOS/MarkText"' >> ~/.zshrc
  • 参考: https://github.com/marktext/marktext/blob/develop/docs/CLI.md

Typora

echo '
# Typora を CLI から起動できるように
alias typora="open -a typora"' >> ~/.zshrc

Fork

• 🚨 husky などで、commit などをフックする場合、コマンドラインから立ち上げる必要あり

Aerial

• スクリーンセーバー

Karabiner-Elements

• US キーボードで、⌘ を押すことで日本語/英語を切り替える

VSCode

• 起動後、⌘ + Shift + P のコマンドパレットで、Shell Command: install 'code' command in PATHを実行 - ターミナルから VSCode を起動できる

Notion

• 高機能ノートアプリ

VLC

• 動画再生ソフト

Sequel Ace

• DB の GUI ソフト
• Sequel Pro の後継
  • Sequel Ace is the "sequel" to longtime macOS tool Sequel Pro.
  • って一文が洒落が効いてて好き

fig

• https://fig.io/
• ターミナルを強くしてくれる

iTerm

フルスクリーンの表示方法の変更

ウィンドウの透過

最前面表示

タブを常に表示

ホットキー設定

Dracula テーマ

新規ウィンドウでのディレクトリ

タブに現在のディレクトリ名を表示させる

# cd した時のhook
# iTerm のタブ名をpathに変更
echo -ne "\033]0;$(pwd | rev | awk -F \/ '{print "/"$1"/"$2}'| rev)\007"
function chpwd() { echo -ne "\033]0;$(pwd | rev | awk -F \/ '{print "/"$1"/"$2}'| rev)\007"}

sudo での Toudh ID の使用

error 等の色付け

Preferences > Profiles > Advanced > Triggers で以下のような設定をしています

コマンド編

prezto

• 分量が多かったので分離しました。

homebrew

• /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
• Next Steps が出てくるので、従う

SSH キー生成

• ssh-keygen

GitHub 登録

pbcopy < ~/.ssh/id_rsa.pub

Host github.com
  IdentityFile ~/.ssh/id_rsa
  User git

ssh -T github.com

anyenv

• 各言語の*envを入れる用のもの
• brew install anyenv
• anyenv init # 表示される指示に従う
• anyenv-updateも入れる
  • anyenv で入れた *env をアップデートするプラグイン

fzf

• ターミナルのコマンド履歴をいい感じにできる
• brew install fzf
• $(brew --prefix)/opt/fzf/install

bat

• cat の強化版的な
• インストール
  • brew install bat
• テーマをDraculaに
  • mkdir ~/.config/bat
  • echo '# Set the theme to "Dracula"\n--theme="Dracula"' > ~/.config/bat/config

doctoc

• markdown に目次を追加してくれる

ghq

• git のプロジェクトを管理がいい感じにできる
• インストール
  • brew install ghq
• コマンド設定

# ghq, fzfのコマンド
function ghq-fzf() {
  local src=$(ghq list -p | fzf --preview "ls -laTp {} | tail -n+4 | awk '{print \$9\"/\"\$6\"/\"\$7 \" \" \$10}'")
  if [ -n "$src" ]; then
    BUFFER="cd $src"
    zle accept-line
  fi
  zle -R -c
}
zle -N ghq-fzf
bindkey '^]' ghq-fzf

• • 上記を ~/.zshrcに追記
  • Ctrl+] を押すと、プロジェクト選択画面が開く
  • 参考
    • https://qiita.com/tomoyamachi/items/e51d2906a5bb24cf1684
    • https://iriya-ufo.net/blog/2019/11/28/ghq-setup/

tree

brew install tree

個別開発環境編

python

anyenv install pyenv

WARNING: `pyenv init -` no longer sets PATH.
Run `pyenv init` to see the necessary changes to make to your configuration.

# pyenvの設定
# https://zenn.dev/antyuntyun/articles/pyenv_warning_resolve
export PYENV_ROOT="$HOME/.anyenv/envs/pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init --path)"
if command -v pyenv 1>/dev/null 2>&1; then
  eval "$(pyenv init -)"
fi

poetry

curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python

# シェル再読み込み
exec $SHELL -l
# 仮想環境をプロジェクトフォルダに作成するように変更
poetry config virtualenvs.in-project true

VSCode 拡張機能(随時更新)

Auto CLose Tag

• html 等のタグを自動で閉じてくれる
• 結構暴発するので、微妙に感じるとこもある

Auto Rename Tag

• タグを rename 際、自動で対応するタグも rename してくれる
• 上と同じで結構暴発する

change-case

• snake-case、camelCase などを書き換えてくれる
• たまーに使う

Code Spell Checker

• スペルチェックしてくれる
• 短縮語は基本使わないようにしているが、使うときはスペルチェックがクリアであれば使う

Draula Official

• Dracula のテーマ

Error Lens

• VSCode で表示されているエラー等をホバーしなくても常時表示してくれる

ES7 React/Redux/GraphQL/React-Native snippets

• React 等のスニペット

ESLint

Git History

GitHub Copilot

GitHub Pull Requests and Issues

• VSCode 　上でプルリク見たり色々できる

GitLens

• 昔のコードと比較したりできる

indent-rainbow

• インデントを色付けて見やすくしてくれる

IntelliCode

Local History

• ファイルのバックアップを取ってくれる
• 「いらんなぁと思って消したコードやっぱいるわ。でも commit には残ってない。。」みたいな時にたまに使う

Material Icon Theme

Peacock

• ワークスペース毎に色を設定できるので、複数のプロジェクトに携わる場合は便利そうです

Prettier - Code formatter

Rainbow CSV

• csv を色付けて見やすくしてくれる

Sort JSON objects

Todo Tree

• TODO コメントなどを一覧で見れるようにしてくれる

Version Lens

• package.json 等で、最新のバージョンは何かとか表示してくれたりする

Material Icon Theme

• ファイルやフォルダにアイコンをつけてくれる

Peacock

• ワークスペース毎に色を設定できるので、複数のプロジェクトに携わる場合は便利そうです

Japanese Word Handler

• 日本語で単語移動できるようにする

Chrome 拡張機能（随時更新）

Better Pull Request for GitHub

File Icons for GitHub and GitLab

Hide Files on GitHub

ImgConverter

JSON Viewer

LTTM

Notifier for GitHub

Octotree - GitHub code tree

React Developer Tools

Text Blaze

Toggl Track: Productivity & Time Tracker

Video Speed Controller

Vue.js devtools

Bitwarden - 無料パスワードマネージャー

Workona Tab Manager

• A のリポジトリのグループ、B のリポジトリのグループ、のようにグループ分け
• Chrome は常に外部モニタに表示
• Macbook 本体の画面では、仮想デスクトップ毎に各リポジトリの VSCode、ターミナルを表示

拡張機能マネージャー

Web Server for Chrome

Copy Title and Url as Markdown Style

Adblock Plus - free ad blocker

URL を日本語のままコピー