Atom+LinterからNeovim+ALEに環境を移行中

Read More

vimrcに疲れてATOMや、Vistual Studio Codeを使ってきたのだけどまた環境をvim(neovim)に戻している。まだvimrc(init.vim)は綺麗なものなのだが必要なものからプラグインを導入中。

構文チェッカ ALE(Asynchronous Lint Engine)

構文チェッカは色々あるのですがこちらが評判が良い(早い、軽い、簡単)みたいでしたので使ってみることにしました。複数のチェッカを同時に動かすことが出来るので色々いれている人には便利かと思います。

設定方法と導入方法

設定は vim + deim では1行記載するだけです。設定ファイルの方では以下のように記載しています。

[[plugins]]
repo = 'w0rp/ale'
hook_add = '''
        nmap <silent> <C-k> <Plug>(ale_previous_wrap)   "エラー個所への移動
        nmap <silent> <C-j> <Plug>(ale_next_wrap)
        let g:ale_sign_column_always = 1                "左端のシンボルカラムを表示したままにする
        " エラー行に表示するマーク
        let g:ale_sign_error = '⨉'
        let g:ale_sign_warning = '⚠'
        " エラー行にカーソルをあわせた際に表示されるメッセージフォーマット
        let g:ale_echo_msg_format = '[%linter%] %s [%severity%]'
        " エラー表示の列を常時表示
        let g:ale_sign_column_always = 1
        " ロケーションリストの代わりにQuickFixを使用する
        let g:ale_set_loclist = 0
        let g:ale_set_quickfix = 1
        " エラーと警告の一覧を見るためにウィンドウを開いておく
        let g:ale_open_list = 1
        let g:ale_keep_list_window_open = 0             " エラーと警告がなくなっても開いたままにする
'''

設定の仕方はこちらのサイトと上記のプラグインのサイトを参考にしています。

利用した感想

  • 動作しているイメージ

  • 満足しています。動作も早くて常に動いていても実用的(手持ちのコードの長さ程度であれば全然問題ない)
  • プラグインの読み込みは遅延読み込みにしておく方が良いです、そのままだとvim起動時に時間が1,2秒かかります。
  • 導入時に何故かtagが重複しているという旨のエラーで正常に導入できなかったので結果として ~/.config/deim/repos/github.com/の下に保管されている aleのコードを git cloneしてしまっています。それよりも deol.nvim がアップデートできずこちらの問題の影響かもしれません。
  • 導入が出来ているかを確認するには :ALEEnable などのコマンドが入っているかで判断しています。
  • ATOM時代の影響ですっかりマウス操作になれているのでついついQuickfixをマウスでクリックしたくなるのはそのうちに慣れるだろう
  • テキスト文章を書く際には textlint を利用していたのですが markdown や ascidocで利用するためには次のリンク先のように指定すればできそうです(まだやってみていません)

Zsh+Zprezto プロンプトに接続中のGCPプロジェクトIDを表示する

Read More

最近Google Cloud Platform をよく触っているのだけどどのプロジェクトに居るのかよく分からなくなるのとプロジェクトID調べるの面倒なのでプロンプトに表示しています。

普段 zsh + zprezto でプロンプトを作っているのですが GCPのプロジェクトIDを表示したかったので以下の関数を追加しました。

上記の senpai を参考に以下の関数をちょっと変更しています。

# Google Cloud Platform: info
gcp_info() {
  if [ -f "$HOME/.config/gcloud/active_config" ]; then
    gcp_profile=$(cat $HOME/.config/gcloud/active_config)
    gcp_project=$(awk '/project/{print $3}' $HOME/.config/gcloud/configurations/config_$gcp_profile)
    if [ ! -z ${gcp_project} ]; then
      echo "${_prompt_my_colors[1]}ⓖ %f${gcp_project}"
    fi
  fi
}

これを自分の利用している /Users/hideaki/.zprezto/modules/prompt/functions/prompt_my_setup に追記してみました。ちなみにこういうふうにしておくと関数が読み込まれているのでいつでも gcp_info とシェルから結果を確認することが出来てその意味でも便利です。

PROMPT="%F{135}%n%f at %F{166}%m%f in %F{118}${_prompt_my_pwd}%f ${_my_cloudinfo}%f ${vcs_info_msg_0_}
$python_info[virtualenv]${editor_info[keymap]}"

プロンプトはこんな感じですね。最近は2行にしているのが好みです。

あと関係ないけど zprezto のテーマの半分くらいはgit リポジトリの表示に git-info というモジュールを利用しているのだけどこれが旨く動かないみたいでした(いつから動かないのか、最初からなのか)私は、zshの標準?の vcs_info を利用してるテーマを利用しているので気が付きませんでした。

CSS3で画像にドロップシャドウをつける、画像を丸くする

Read More

ブログで使用しているスタイルシートを少し修正。

最近iPhone系の画像がフラットデザインになったこともあり結構シンプルになってしまってスクリーンショットのメリハリが付かない感があったので枠を入れることにしました。

画像にドロップシャドウをつける


#content img {
border: 1px solid #000000;
box-shadow: #000000 0 0 10px -2px;
height: auto;
margin-bottom: 12px;
max-width: 100%;
}

box-shadowに該当します。これだけでも結構見栄えが良くなりますがキャプチャ系のソフトで影がつくものがあるのでその辺りは随時調整を、、

Roguer

こんな感じになります。boderタグで枠線もつけているので強調された形になりますね、。

今風な丸い感じのアイコン

元々は、下のような感じでリンクを右側に出していまいた。

Roguer 2


.wp-post-image {
border: 1px solid #CCCCCC;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
float: left;
margin-bottom: 10px;
margin-left: -80px;
padding: 1px;
height: 64px;
width: 64px;
}

このradiusというスタイルで簡単に丸くなります。

Roguer 3