沒穿方服

封存

顯示╱隱藏內文

2012-09-22: 現在插入的 HTML 不一定有 <div class="separator"> 部分,script 也改為沒有這個 div 也能取代。

Blogger 文章編輯器「上傳圖片」自動插入的 HTML 為:

做了一支 bookmarklet 把它改成以下格式:

將 bookmarklet 加進書籤 → 清理 blogger 插入的圖片標籤
在文章編輯器的 HTML 模式執行就立刻取代,不保證原文的安全,請自己保重。


原始碼

var
  $textarea = document.getElementById('postingHtmlBox'),
  pattern = [
    '(<div class="separator" style="clear: both; text-align: center;">\n)?',
    '<a href="(.+)"',
    ' imageanchor="1" style=".*"><img border="0" height=".+" width=".+" ',
    'src="(.+)" /></a>(</div>)?'
  ].join(''),
  re = new RegExp(pattern, 'g');

if ($textarea) {
  $textarea.value = $textarea.value.replace(re, function (str, p1, p2, p3, p4, p5) {
    return [
      '<a href="', p2, '">',
      '<img src="', p3, '" alt="" /></a>'
    ].join('');
  });
} else {
  alert('錯誤,找不到 textarea#postingHtmlBox。');
}

安裝

建議用 Vundle 裝 → Bundle 'bootleq/vim-cycle'
不然就用老方法,把所有檔案放到 runtimepath(預設在 ~/.vim)即可。
檔案在 https://github.com/bootleq/vim-cycle

簡易設定

要特別做的只有「哪些字能 cycle」設定,否則預設的字很少。
doc 287-341 行的範例 加進 vimrc,再視需要修改就可以了,應該很容易看懂。
進階選項再看 doc。

用途,例子

預設會加一個快速鍵 <Leader>a,其中 <Leader> 預設是 \ 所以實際是按 \a
(註:用 a 是取 Advance、Add 的 a,類似預設的 CTRL-A 功能)

<Leader>a 會把目前游標上的字換成下一個,以下舉例說明;若有特別標示,表示游標位置。

  • true false
    true 會變 false,false 會變 true;光這樣就很方便了。
  • Yes No
    大小寫會自動保持。
  • +-
  • ==!=

  • 特殊符號和中文都可以 cycle。
  • SundayMondayTuesdayWednesdayThursdayFridaySaturdaySunday
    typo 的機率降低了。
  • Rails MetalThrashTechnical Death
    即使游標在空白上,也能試著搜尋關鍵字。
  • $li.addClass('foo')$li.removeClass('foo') - jQuery element Attributes
  • position: 'upperLeft'position: 'upperRight' - MooTools Element.Position
  • :render_with_me:render_without_me - Rails alias_method_chain
    處理串在一起的字,實用性增加不少。
  • <em>example</em><strong>example</strong>
    HTML 標籤的開始/關閉標記可以一起 cycle。
  • 「例子『例子(例子
    成對的關鍵字可以一起 cycle。
    不過目前未支援頭尾相同的 pair,例如 "例子"

另外在 <Leader>a 前可以加 [count],例如 2\a 會 cycle 到第二個的候選, Monday 就會變成 Wednesday 而不是 Tuesday

還有在 visual mode 也可以用 <Leader>a,這樣就不會自動搜尋關鍵字,而是直接用選取的字來 cycle,遇到混淆時可以試試。

要怎麼把 Yes 換成 No? 標準答案是 ciw 再輸入 "No"。

更快的方法是寫 script 處理,很久以前看到一篇 Toggling yes-no, 把常用組合先定義好,只要一個鍵就能把 Yes 換成 No,再按一次就換回來,真是聰明啊~ 這方法我用了很久,當時改出來的設定如這個 gist

因為覺得方便,又有蠻多地方想改善,所以打算寫成 plugin。
搜尋 toggle 才發現真多人寫過,不過似乎大同小異,除了 SwapIt.vim

  • 用 visual 選起來,就可以處理含空白的 some words(原本的實作方式辦不到)。
  • 可以把 <H1>example</H1> 變成 <H2>example</H2>(一次換掉前後 tag)。
  • 可以吃 omni-completion 的結果,所以不必額外設定,就知道 CSS display block 可以換成 inlinenone 等等。
  • 其它。

我比較同意 SwapIt 的設計,認定 swap 這個功能,用力加強它。
SwapIt 的問題是實作還未成熟,所以我也 fork 它準備貢獻。 但是送第二個 pull request 前,覺得有點走不下去:

  • 繼續改下去,細部的實作幾乎都不一樣。
  • 重寫比重構簡單。
  • 在使用者立場,我想像的 interface 是另一番面貌,向前相容顯得多餘。
  • 我想全權處理所有問題。

另外對 SwapIt 這個名字也有點在意,至少我搜尋的時候就沒想到 swap 這關鍵字。
想起來最適合的字是 Cycle(因為是在一組字中循環,例如 top right bottom left),但是在 GitHub 一搜就發現已經有同名 plugin 了 ——zef/vim-cycle——很精簡,程式聰明漂亮,可惜作者太忙比較沒空更新。


結果我的 plugin 還是叫 cycle,這樣好嗎?

我把碰到的困難告訴兩位開發者 Michael BrownZef,他們都很開放,表示基本上不介意我這麼做(我想還是有點情緒干擾吧); 而雖然大家目標類似,但個人考量的點(有趣的是想法從 coding style 與用法設計就看得出來)還是不容易統合,變成一個專案。

這種情況下,我就先開發再說了,把手上的問題解決。

目前 0.1.0 版本已經是堪用階段: bootleq/vim-cycle - GitHub
之後會再寫一篇簡易使用說明。

最近在寫 plugin,對之前的 coding style(主要用在 vimrc)有些不同意了。
其中一些比較確定、通用的部分是關於可讀性的,整理如下:

  1. 不要用簡寫
  2. 在 modeline 寫明縮排規則
  3. 用 marker 手動折疊程式碼,建立 section
  4. 增加空行,分隔程式區塊
  5. 註解不應影響程式排版
  6. 串接多個項目時,拆成多行
  7. 適當使用 Dictionary (hash) 進行參數操作
  8. 其他相關但未規範的部分

不要用簡寫

指的是選項、指令名稱的簡寫,例如:

  • function!fun!
  • setlocal textwidth=78setl tw=78
  • execute "normal! dd"exe "norm! dd"

例子可能不夠極端(還是看得懂),但是已經失去字面上的意思(最簡單的可讀)了。

此外還有一致性的問題,完全一樣的意思卻不能預期用哪個敘述。
例如想找函數定義,直接搜尋 func! 卻找不到 function!,問題是什麼? 其實不必問了,這完全是可以避免的問題。

總之除非有足夠理由(例如故意用 fun! 定義比較 funny 的函數),還是一律用完整寫法吧。


在 modeline 寫明縮排規則

縮排和可讀性的關係是,縮排亂掉的時候會很難讀。

首先要訂好自己的縮排規範,用空白還是 Tab、要空幾格,然後確實遵守。
再來要了解每個人的規則會不一樣:

  • 你用 Tab 排好的版,別人打開還是可能亂掉。
  • 別人編輯你的 script 後,可能也塞了不一致的縮排字元進去。

減輕問題的方式是在每個檔案加上 modeline:
例如一律用空白,確保排版不會被 Tab 弄亂
" vim: expandtab softtabstop=2 shiftwidth=2
如果還是偏好 Tab(也許為了減少字數)
" vim: noexpandtab tabstop=8 shiftwidth=8

附上我的基本 modeline 如下(寫在檔案最後一行)

" modeline {{{
" vim: expandtab softtabstop=2 shiftwidth=2 foldmethod=marker

用 marker 手動折疊程式碼,建立 section

在註解中使用 marker(預設是 {{{}}})整理程式碼是很普遍的作法, script 稍大時幾乎都會用上,否則會覺得難爬。

對以下常見的 folding:

  1. 多個有關的函數,可以歸納為一個 section:和 Vim motion 的 section 無關),但是沒什麼好方法表示,於是加上註解「以下這段是做 XXX」,然後在結束的地方寫「XXX 做完了」。這整段就適合當作一個 fold
  2. 讓多次出現的語法單位(通常就是函數)可以各自折疊

規範一個通用的格式。

以下是我的例子。 從 Utils: 開始是一個叫做 Utils 的 section,用大寫字和冒號形成一個 vimCommentTitle(來自預設的 syntax 上色),又更顯目一點。

" Utils: {{{

function! s:save_reg(name) "{{{
  let s:save_reg = [getreg(a:name), getregtype(a:name)]
endfunction "}}}

function! s:restore_reg(name) "{{{
  if exists('s:save_reg')
    call setreg(a:name, s:save_reg[0], s:save_reg[1])
  endif
endfunction "}}}

" }}} Utils

折起來(一層)後,擷圖如下

折起一層


增加空行,分隔程式區塊

  • 函數之間,空 2 行。
    因為函數中本來就經常會空 1 行,所以要空超過 1 行才清楚。
  • section 之間,空 2 行。
    這裡 2 行就夠了,因為 marker(在註解中)和程式之間也有空行,所以不算註解的話,實際上 section 之間會空 6 行。

全部縮起來(zM)時,看見所有 section

全部縮起來(zM)時,看見所有 section

打開一個 section,看見所有 function

抱歉擷圖是舊程式,函數之間只空 1 行,應該空 2 行……
打開一個 section,看見所有 function(抱歉擷圖是舊程式,函數之間只空 1 行,應該空 2 行)

各個 function 之間空兩行

各個 function 之間空兩行

各個 section 之間空兩行,實際程式空了 6 行

各個 section 之間空兩行,實際程式空了 6 行

註解不應影響程式排版

手動 fold 有很多層的時候,我曾經把深層的程式加一級縮排:

" MAPPINGS             {{{1 ==================================================

  let maplocalleader = ","
  noremap  <Leader><LocalLeader> <LocalLeader>

  "   各種移動    {{{2

    noremap <expr> <Space>  repeat('<ScrollWheelDown>', 2)

看起來似乎更清楚,但這個超過註解該做的事了。
理想上要專注於程式本身的表達能力才對。


串接多個項目時,拆成多行

寫下 aaa, bbb, ccc, ... 這樣的敘述時,除非真的很簡單,否則不要擠在同一行,難讀又難改。

  • 參數很多時
  • 定義複雜的 List (Array) 或 Dictionary (Hash)

請用 backslash (\) 拆開。

call setline(
      \   a:before.line,
      \   substitute(
      \     getline(a:before.line),
      \     '\%' . a:before.col . 'c' . s:escape_pattern(a:before.text),
      \     s:escape_sub_expr(a:after.text),
      \     ''
      \   )
      \ )

這裡的縮排比較詭異,不是由 indent 選項而是由一個變數控制,見 ft-vim-indent,預設是 shiftwidth 的三倍。
let g:vim_indent_cont = &shiftwidth * 3
我沒有設這個變數,backslash 之後的縮排也是手動做的,規則是至少空一格,其餘每一層就縮一級。
單純是「採用預設值」這個考量。


適當使用 Dictionary (hash) 進行參數操作

可以考慮多用 hash(Vim 裡面叫 Dictionary)作為函數的參數,例如原本是:
function Img(src, alt, size, class) 或接受任意個參數的
function Img(src, alt, size, ...) 都可以改成
function Img(src, options)
就不必記參數的順序,或再解析 a:0a:1(額外的參數會被轉成 a:N)了。

存取 options 的時候,盡量用點(.)取代方括號([]),
例如 options.size 就比 options['size'] 簡單明瞭。

不過因為 Vim script 的特性,也有一些像陷阱的東西。
例如取值的時候要用 get(options, 'size') 比較安全,沒有 'size' 這個 key 的時候才會回 0,而不是報錯。
還有在 value 不是 Number 時,直接 if get(options, 'key') 會有型別轉換的細節要注意, 通常會加一道 if type(get(options, 'key')) == type(xxx) 檢查,比較麻煩。


其他相關但未規範的部分

  • 單行的長度

    要填滿整行的話,會用 textwidth=78,和 Vim doc 一樣。
    但是程式內文就不必了,因為怕太長其實是硬體問題,我認為不用管它,也解決不了它。

  • 變數命名

    Vim 對變數名稱有一些意見,例如 user function 第一個字要大寫,大小寫變數存進 session 時的規則也不同。
    原則上使用 underscore_names 安全又簡單,可惜有時候必須大寫,還是會破例。

    具體用字則是愈短、愈直接愈好,scope、autoload 和 Dictionary 可以善加利用,
    例如 s:widthsu#do()contribute.till_die

  • key mapping 的記法

    原則是和 Vim doc 一致,也就是用 <C-X> 而不用 <C-x>
    不過這樣會失去大小寫的區別。

  • Magic 的 regexp

    Vim 的 regexp pattern 對哪些字元有特殊意義(需要跳脫)和別家解釋不太一樣, 在 pattern 前加上 \v \m \M \V 又有不同解讀, 在 plugin 或一些內建 function 裡還會一律視為 \m。

    這個因應情境有很多變數,所以目前也沒有規範。