Macで快適な作業環境を構築するためにHyperというターミナルアプリを導入します。
Hyperとは
Electronベース(HTML+CSS+React+Redux)で作られたターミナルアプリ。
Mac以外にもWindowsやLinuxでも動作します。
Hyper インストール
$ brew cask install hyper
homebrewを入れていない場合は、公式サイトからダウンロードできます。
日本語文字化け対策
.bash_profile や .zshrc にLANG環境変数を追記する
export LANG=ja_JP.UTF-8
Hyper コマンド
$ hyper help
Usage: hyper [options] [command]
Commands:
<default> Launch Hyper
d, docs, h, home Open the npm page of a plugin
help Display help
i, install Install a plugin
ls, list List installed plugins
lsr, list-remote, ls-remote List plugins available on npm
s, search Search for plugins on npm
u, uninstall, rm, remove Uninstall a plugin
Options:
-h, --help Output usage information
-v, --verbose Verbose mode (disabled by default)
hyperをインストールするとhyperコマンドを使用できます。
コマンドからテーマやプラグインのインストールが行えます。
Hyper テーマのインストール
$ hyper i hyperterm-material
オススメのテーマは hyperterm-material です。
Hyperテーマからお好みで選んでください😊
ポケモンテーマにしたい場合
おもしろいテーマとしてポケモンテーマがあります。
$ hyper i hyper-pokemon
~/.hyper.js
config: {
pokemon: ["random", "pikachu"],
},
plugins: {
"hyper-pokemon",
},
Hyper プラグインのインストール
hyper i hyper-statusline
hyper i hyper-search
hyper i hypercwd
hyper i hyper-opacity
hyper i hyper-pane
hyper i hyper-tab-icons-plus
hyper-statusline
カレントディレクトリ名と、Gitローカルリポジトリの現在のブランチ名が表示されます。
カレントディレクトリ名をクリックするとFinderが表示され、ブランチ名をクリックするとリモートリポジトリがブラウザで表示されます。
とても便利なプラグインです。
hyper-search
ターミナル上の文字列が検索できるようになります。
hypercwd
新しいタブを開く際にカレントディレクトリと同じ階層で開いてくれます
hyper-opacity
背景の透明度を設定できます。
hyper-pane
control + option + 数字 で分割したタブの切り替えができます。
hyper-tab-icons-plus
タブタイトルにアイコンが表示されます。
これのメリットはnpmサーバー起動中やphpサーバを起動した時にその言語のアイコンが表示される点です。
サーバを二重に立てようとしてエラーになった時にすぐ気付けます。
bash の方
.bash_profile や .bashrc へ追記
case "$TERM" in
xterm*|rxvt*)
PROMPT_COMMAND='echo -ne "\033]0;${PWD##*/}\007"'
show_command_in_title_bar()
{
case "$BASH_COMMAND" in
*\033]0*)
;;
*)
echo -ne "\033]0;${BASH_COMMAND} - ${PWD##*/}\007"
;;
esac
}
trap show_command_in_title_bar DEBUG
;;
*)
;;
esac
zsh の方
.zshrc へ追記
# Override auto-title when static titles are desired ($ title My new title)
title() { export TITLE_OVERRIDDEN=1; echo -en "\e]0;$*\a"}
# Turn off static titles ($ autotitle)
autotitle() { export TITLE_OVERRIDDEN=0 }; autotitle
# Condition checking if title is overridden
overridden() { [[ $TITLE_OVERRIDDEN == 1 ]]; }
# Echo asterisk if git state is dirty
gitDirty() { [[ $(git status 2> /dev/null | grep -o '\w\+' | tail -n1) != ("clean"|"") ]] && echo "*" }
# Show cwd when shell prompts for input.
tabtitle_precmd() {
if overridden; then return; fi
pwd=$(pwd) # Store full path as variable
cwd=${pwd##*/} # Extract current working dir only
print -Pn "\e]0;$cwd$(gitDirty)\a" # Replace with $pwd to show full path
}
[[ -z $precmd_functions ]] && precmd_functions=()
precmd_functions=($precmd_functions tabtitle_precmd)
# Prepend command (w/o arguments) to cwd while waiting for command to complete.
tabtitle_preexec() {
if overridden; then return; fi
printf "\033]0;%s\a" "${1%% *} | $cwd$(gitDirty)" # Omit construct from $1 to show args
}
[[ -z $preexec_functions ]] && preexec_functions=()
preexec_functions=($preexec_functions tabtitle_preexec)
設定ファイル
~/.hyper.js に設定ファイルが作成されています。
config: {
// hyper-opacityプラグインの設定
opacity: 0.85,
// 範囲選択するとクリップボードにコピーされる
copyOnSelect: true,
},
plugins: [
"hyperterm-material",
"hyper-statusline",
"hyper-search",
"hypercwd",
"hyper-pane",
"hyper-tab-icons-plus"
],
設定ファイルの変更はリアクティブに反映されます。
プラグインも手動でファイルに書き込んでも問題なく、保存と同時にインストールして反映してくれます。
テーマはすぐに反映されない時があるので強制リロードしてみてください。
Hyper ショートカット
-
Command+,設定ファイルを開く -
Command+T新規タブを開く -
Command+N新規ウィンドウを開く -
Command+Dパネルを縦分割 -
Command+Shift+Dパネルを横分割 -
Command+Shift+IDeveloper Toolを開く -
Command+{前のタブへ-
control+Shift+tab前のタブへ
-
-
Command+}次のタブへ-
control+tab次のタブへ
-
-
Command+[前のパネルへ -
Command+]次のパネルへ -
Command+Kバッファのクリア -
Command+F検索フォームを表示- hyper-search プラグインがインストールされていること
-
Command+G次のキーワードへ -
Command+Shift+G前のキーワードへ
-
Command+Rリロード -
Command+Shift+R強制リロード(テーマ変更の再読込みなど) -
Command++画面拡大 -
Command+-画面縮小 -
Command+control+Fフルスクリーン -
Command+M最小化
設定ファイルまとめ
最終的な私の設定ファイルをまとめてます。