【Hyper】良い感じのターミナル環境を構築

Hyper

※ pluginを更新した分，修正しました（6/30）

Hyperと言うターミナルを触ってみてかなり良い感じでした．

優れた点はElectronで実装されていて，jsで容易に拡張出来るところです．後はやはりcross-platformな点ですね．どのosでも同じアプリを使用できるのは嬉しいです．

プラグインを入れていて迷う部分もあったので，
この記事ではオススメのプラグインと設定方法等を紹介していきます．

実行環境
- macOS High Sierra (10.13.5)
- Hyper 2.0.0

自分が入れているpluginです．

[~] % hyper list
hyper-material-theme
hyper-broadcast
hyper-search
hypercwd
hyper-statusline
hyper-tab-icons

画面はこんな感じです．

プラグインの管理

プラグインはhyperコマンドで管理できます．GUIはないです．多分．
使い方は以下の通りです．

[Guest] % hyper -h

  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 i [plugin]と言う感じでコマンドを打てばプラグインがインストール出来ます．

plugin紹介

hyper-material-theme

テーマの1つです．

~/.hyper.jsに設定を追加する事で，更に色を変えることが出来ます．
＊透明化は挙動が安定しないです(他のプラグインも同様)．

~/.hyper.js

 colors: {...
 },

 MaterialTheme: {
        // Set the theme variant,
        // OPTIONS: 'Darker', 'Palenight', ''
        theme: 'Palenight',

        // [Optional] Set the rgba() app background opacity, useful when enableVibrance is true
        // OPTIONS: From 0.1 to 1
        backgroundOpacity: '1.0',

        // [Optional] Set the accent color for the current active tab
        accentColor: '#64FFDA',

        // [Optional] Mac Only. Need restart. Enable the vibrance and blurred background
        // OPTIONS: 'dark', 'ultra-dark', 'bright'
        // NOTE: The backgroundOpacity should be between 0.1 and 0.9 to see the effect.
        vibrancy: 'dark'
 },

hyper-broadcast

複数の画面で同時にコマンドが打てるあれです．

hyper-search

ターミナル上の文字列が検索できるようになります．
デフォルトで欲しい気がします．

hypercwd

新しいタブを開く際に，現在のディレクトリと同じ階層で開いてくれます．

hyper-statusline

下部に，現在のディレクトリの位置とかgitの状態とか出してくれます．

hyper-tab-icons

タイトルの所に分かりやすいアイコンを付けてくれます．

以下の記事でも触れられているように，そのまま導入しただけではうまく動作しません．
https://qiita.com/vimyum/items/44478a51ef3a6f49804f

これはTabのタイトルが動的に変更されないのが問題で，解決策が以下で議論されてました．
https://github.com/zeit/hyper/issues/1188

.zshrc or .bashrcにコードを追加する事で解決するようです．

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.
precmd() {
   if overridden; then return; fi
   cwd=${$(pwd)##*/} # Extract current working dir only
   print -Pn "\e]0;$cwd$(gitDirty)\a" # Replace with $pwd to show full path
}

# Prepend command (w/o arguments) to cwd while waiting for command to complete.
preexec() {
   if overridden; then return; fi
   printf "\033]0;%s\a" "${1%% *} | $cwd$(gitDirty)" # Omit construct from $1 to show args
}

bashの場合

.bashrcに追加

function title {
    export TITLE_OVERRIDDEN=1
    PROMPT_COMMAND=''
    echo -ne "\033]0;"$*"\007"
}

case "$TERM" in
xterm*|rxvt*)
    PROMPT_COMMAND='echo -ne "\033]0;${PWD##*/}\007"'
    show_command_in_title_bar()
    {
        if [[ "$TITLE_OVERRIDDEN" == 1 ]]; then return; fi
        case "$BASH_COMMAND" in
            *\033]0*)
                ;;
            *)
                echo -ne "\033]0;${BASH_COMMAND} - ${PWD##*/}\007"
                ;;
        esac
    }
    trap show_command_in_title_bar DEBUG
    ;;
*)
    ;;
esac