記事を書くときのおすすめエディタ #VSCode

はじめに

Qiita やブログなど記事をマークダウンで書くときに使うおすすめのエディタ！といいつつ２つしか使ってないのでこれいいんじゃないかな？と思った方法の紹介です。

結論から言うと VSCode + textlint がいいんじゃないかなと思いました。

VSCode + textlint の使い方

MacDown もお手軽でおすすめですが今回は VSCode + textlint について紹介したいと思います。

textlint のインストールとセットアップ

Node.js が必要なので適宣インストールしてください。

下記のページから直接ダウンロードするか Homebrew でインストールすればいいと思います。

作業用ディレクトリの作成（適当に markdown というディレクトリをつくりました）
ターミナルで作成したディレクトリに移動する
package.json を作成する
```
$ npm init -y
```

textlint と各プリセットをインストールする

$ npm install --save-dev \
    textlint \
    textlint-rule-preset-ja-spacing \
    textlint-rule-preset-ja-technical-writing \
    textlint-rule-spellcheck-tech-word

textlint の設定ファイル（.textlintrc）を生成する
```
$ npx textlint --init
```
VSCode の拡張機能の vscode-textlint をインストールする
VSCode を再起動する
マークダウンファイルを作成する（適当に test.md で作成）

ここまでやると下記のファイルが作成されているはずです。

/markdown
 |- /node_modules
 |- package-lock.json
 |- package.json
 |- .textlintrc
 |- test.md

.textlintrc の中身は下記のようになっているはずです（Finder でみれなければ cmd + shift + . でファイルが表示されるはずです）。

{
  "filters": {},
  "rules": {
    "preset-ja-spacing": true,
    "preset-ja-technical-writing": true,
    "spellcheck-tech-word": true
  }
}

package.json はこんな感じです。

{
  "name": "markdown",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "textlint": "^11.7.6",
    "textlint-rule-preset-ja-spacing": "^2.0.2",
    "textlint-rule-preset-ja-technical-writing": "^4.0.1",
    "textlint-rule-spellcheck-tech-word": "^5.0.0"
  }
}

これで VSCode 上で記事を作成し保存すると textlint が文章をチェックしてくれるようになります！

textlint が動作しない場合

VSCode を開いて vscode-textlint をインストールしてもエラーになる場合がありますがインストール後はいったん VSCode を再起動しましょう。

VSCode でファイルを開くときは test.md のファイルを個別で開くのではなく markdown ディレクトリごと開く必要があります。私はファイルだけ開いてずっと Couldn't start client textlint がでてました。。。

記事作成

特に改めて書くことでもないですが記事作成についてです。VSCode で File -> Open.. から markdown ディレクトリを開きます。

プレビューを表示したい場合は cmd + K を押した後に V を押すと右側に表示できます（英数入力にする必要があります）。

あとは test.md を編集していくだけです（特に記事投稿後はローカルにファイルを残す必要もないので私は毎回 test.md を編集しています）。編集後に cmd + S で保存すると textlint が文章チェックをしてくれます。

こんな感じです。

公式のマークダウン記法とか参考にしていい感じに作成しましょう！

Markdown記法チートシート

おわりに

最近 textlint というものを知って VSCode を使い始めてみました。MacDown もお手軽なので捨てがたいですが文章チェックしてくれるっていうのはおもしろいので今後は VSCode で記事を書いていこうと思います。

なにかおすすめの記事の書き方などあれば教えていただけるとありがたいです。

他にもルールのプリセットが色々あるみたいです。

textlint-ja - GitHub

参考

textlint と VS Code で始める文章校正