<h2 id="%E5%A7%8B%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E5%A7%8B%E3%82%81%E3%81%AB" aria-hidden="true"></a> 始めに</h2>
こんにちは、Neovimを使い初めたゴリラです。
普段zenn.devに載せる記事をVimで書いています。 
しかしVimで記事を書くとどうしても画像アップロードとリンク挿入の手間がかかってしまったり、 
誤字脱字があったり、文章表現がバラバラになったりという問題があります。
こういった問題を長らく放置してきましたが、重い腰を上げて対策しました。 
本記事は、Vim/Neovimで快適に記事を書くためにどんなことをしたのかについて解説していきます。
<h3 id="%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h3>
筆者の環境は次になっています。<code>Node.js</code>と<code>npm</code>と<code>Go</code>は必要です。
<table>
<thead>
<tr>
<th>Environments</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>OS</td>
<td>Ubuntu 20.04 TLS</td>
</tr>
<tr>
<td>Vim</td>
<td>8.2.1992</td>
</tr>
<tr>
<td>Neovim</td>
<td>v0.5.0-834-g7c4f34966</td>
</tr>
<tr>
<td>Node.js</td>
<td>v14.15.0</td>
</tr>
<tr>
<td>npm</td>
<td>6.14.8</td>
</tr>
<tr>
<td>Go</td>
<td>go version go1.15.3 linux/amd64</td>
</tr>
</tbody>
</table>
<h3 id="%E8%A6%81%E4%BB%B6">
<a class="header-anchor-link" href="#%E8%A6%81%E4%BB%B6" aria-hidden="true"></a> 要件</h3>
まず、記事を書くにあたり次の要件があります。
<ol>
<li>誤字脱字を可能な限りなくす</li>
<li>文章の表現を統一</li>
<li>クリップボードや画像ファイルを選択してアップロードして、そのリンクを本文に挿入</li>
</ol>
これらはmustと考えています。特に3は記事を書いていると画像やgifとを貼ったりするのでそれを毎度ブラウザを使ってアップロードするのは非常に手間です。 
エディタで記事を書きながら、シームレスに画像をアップロードできたらこれだけで少なくとも5秒くらいは短縮できるでしょう。
この要件をもとに、対策をしていきます。
<h3 id="%E8%AA%A4%E5%AD%97%E8%84%B1%E5%AD%97%E3%80%81%E8%A1%A8%E8%A8%98%E3%82%86%E3%82%8C%E5%AF%BE%E7%AD%96">
<a class="header-anchor-link" href="#%E8%AA%A4%E5%AD%97%E8%84%B1%E5%AD%97%E3%80%81%E8%A1%A8%E8%A8%98%E3%82%86%E3%82%8C%E5%AF%BE%E7%AD%96" aria-hidden="true"></a> 誤字脱字、表記ゆれ対策</h3>
1と2に関してはいわゆる校正作業ですが、こちらは<a href="https://github.com/textlint/textlint" target="_blank" rel="nofollow noopener noreferrer">textlint</a>を使います。
<ul>
<li>zenn.devは記事をリポジトリと連携できる</li>
<li>Node.jsを使っている</li>
</ul>
ということで、zenn.devと相性もよいです。（インストールして設定するだけ）
合わせて、校正ルールのプリセットもインストールします。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"># textlint のインストール
$ npm install textlint

# ルールセット
$ npm install textlint-rule-prh textlint-rule-preset-jtf-style textlint-rule-preset-ja-technical-writing
</code></pre></div>使用しているルールは次のとおりです。詳細はリンク先を参照ください。ひとまずこれらがあれば問題ないでしょう。
<table>
<thead>
<tr>
<th>ルール</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/textlint-ja/textlint-rule-preset-JTF-style" target="_blank" rel="nofollow noopener noreferrer">textlint-rule-preset-jtf-style</a></td>
<td>JTF日本語標準スタイルガイド</td>
</tr>
<tr>
<td><a href="https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing" target="_blank" rel="nofollow noopener noreferrer">textlint-rule-preset-ja-technical-writing</a></td>
<td>技術文章向けのルールプリセット</td>
</tr>
<tr>
<td><a href="https://github.com/textlint-rule/textlint-rule-prh" target="_blank" rel="nofollow noopener noreferrer">textlint-rule-prh</a></td>
<td>
<a href="https://github.com/prh/prh" target="_blank" rel="nofollow noopener noreferrer">prh</a>という校正ツールの<code>textlint</code>ルールプリセット</td>
</tr>
</tbody>
</table>
インストール完了後<code>.textlintrc</code>に次の設定をします。（<code>preset-ja-technical-writing</code>でいくつかルールを無効にしています）
<div class="code-block-container">
<div class="code-block-filename-container">.textlintrc</div>
<pre class="language-json"><code class="language-json">{
 "filters": {},
 "rules": {
 "preset-ja-technical-writing": {
 "ja-no-weak-phrase": false,
 "ja-no-mixed-period": false,
 "no-exclamation-question-mark": false
 },
 "preset-jtf-style": true,
 "prh": {
 "rulePaths": [
 "node_modules/prh/prh-rules/media/WEB+DB_PRESS.yml",
 "node_modules/prh/prh-rules/media/techbooster.yml"
 ]
 }
 }
}
</code></pre>
</div>設定完了したら、試しにエラーが起きる文章に<code>textlint</code>をかけてみると、次のように修正すべき箇所が出てきます。
<img src="https://i.gyazo.com/697868b83322fb9333f83c4cfa7a15c0.png" alt loading="lazy" class="md-img">
これらをまとめて修正するには<code>textlint --fix [file]</code>すればよいです。 
Vim上で実行する場合は<code>:terminal npx textlint --fix [file]</code>もしくは<code>:!npx textlint --fix [file]</code>すればよいです。 
これでひとまず校正すべき箇所を検出してくれる環境を用意できました。次はVim/Neovimの設定をします。
Vim/Neovimでは<a href="https://microsoft.github.io/language-server-protocol/" target="_blank" rel="nofollow noopener noreferrer">LSP(Language Server Protocol)</a>を使って、動的に<code>textlint</code>で校正箇所を検出します。 
次のプラグインをインストールことで、Vim/NeovimでもLSPを使えます。
<ul>
<li><a href="https://github.com/prabirshrestha/vim-lsp" target="_blank" rel="nofollow noopener noreferrer">vim-lsp</a></li>
<li>
<a href="https://github.com/mattn/vim-lsp-settings" target="_blank" rel="nofollow noopener noreferrer">vim-lsp-settings</a>（LSPのサーバの導入を補助してくれる）</li>
</ul>
プラグインをインストール後、<code>:LspInstallServer efm-langserver</code>で<code>efm-langserver</code>をインストールします。<code>efm-langserver</code>は<code>textlint</code>をLSPサーバとして動かすのに必要です。
プラグインの用意ができたら、プラグインの設定をします。<code>vimrc</code>または<code>init.vim</code>に次の設定を書きます。
<div class="code-block-container"><pre class="language-vim"><code class="language-vim">" lsp settings {{{
let g:lsp_signs_error = {'text': 'ｳﾎ'}
let g:lsp_signs_warning = {'text': '🍌'}
if !has('nvim')
 let g:lsp_diagnostics_float_cursor = 1
endif
let g:lsp_log_file = ''

let g:lsp_settings = {
 \ 'efm-langserver': {
 \ 'disabled': 0,
 \ 'allowlist': ['markdown'],
 \ }
 \ }

function! s:on_lsp_buffer_enabled() abort
 setlocal completeopt=menu
 setlocal omnifunc=lsp#complete
endfunction

augroup lsp_install
 au!
 au User lsp_buffer_enabled call s:on_lsp_buffer_enabled()
augroup END
" }}}
</code></pre></div>最後に<code>textlint</code>をLSPとして動かすために<code>efm-langserver</code>の設定をします。 
<code>~/.config/efm-langserver/config.yaml</code>に次の設定をします。
<div class="code-block-container">
<div class="code-block-filename-container">config.yaml</div>
<pre class="language-yaml"><code class="language-yaml">version: 2
tools:
 markdown-textlint: &amp;markdown-textlint
 lint-command: 'npx --no-install textlint -f unix --stdin --stdin-filename ${INPUT}'
 lint-ignore-exit-code: true
 lint-stdin: true
 lint-formats:
 - '%f:%l:%c: %m [%trror/%r]'
 root-markers:
 - .textlintrc
languages:
 markdown:
 - &lt;&lt;: *markdown-textlint
</code></pre>
</div>これで設定は終わりです。Vim/NeovimでMarkdownのファイルを開くと次のようにtextlintの指摘が表示されます。 
編集、保存するたびに<code>efm-langserver</code>が<code>textlint</code>を実行しその結果を返してくれるので記事を書きながら校正できます。
<img src="https://i.gyazo.com/20662c65af0d9c33e5fac45cfec42491.png" alt loading="lazy" class="md-img">
<h3 id="%E7%94%BB%E5%83%8F%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89">
<a class="header-anchor-link" href="#%E7%94%BB%E5%83%8F%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89" aria-hidden="true"></a> 画像アップロード</h3>
zenn.devやQiitaはそれぞれ、Webエディタ上で<code>Ctrl(Cmd)+v</code>を使うとクリップボードから画像をアップロード&amp;リンクを挿入してくれます。 
これはすばらしい機能と体験ですが、残念ながらVim/Neovimはそのような機能を持っていません。
そこで、Vim/Neovimでクリップボードから画像をアップロード&amp;リンクを挿入してくれるプラグイン<a href="https://github.com/skanehira/gyazo.vim" target="_blank" rel="nofollow noopener noreferrer">gyazo.vim</a>を作りました。 
画像のアップロード先は<a href="https://gyazo.com" target="_blank" rel="nofollow noopener noreferrer">Gyazo</a>になるので別途アカウント&amp;トークンを取得する必要はありますが、次のようにスクショを撮ってそのままアップロードできるので要件を満たせます。
<img src="https://i.gyazo.com/2adcdcc57f144bd524bc29bd1affbe75.gif" alt loading="lazy" class="md-img">
<h2 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h2>
これらの設定でだいぶ執筆環境が整って捗りました。今回はMarkdownだけ動くようにしていますが、他の拡張子でも動かせます。 
少し手間がかかりますが、Vimmerで同じように不便を感じている方はぜひ試してみてください。

Vimで快適に記事を書くため環境

Discussion