Macで快適な作業環境を構築する(Hyper編)

10076 ワード
hyper Mac Mac テキストリンク

Macで快適な作業環境を構築するためにHyperというターミナルアプリを導入します。

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 + I Developer 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 最小化

設定ファイルまとめ

最終的な私の設定ファイルをまとめてます。

『HTML+CSS基礎課程』学習ノート6