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

![macOS-10.15.7](https://img.shields.io/badge/macOS-10.15.7-brightgreen) ![Visual Studio Code-1.50.1](https://img.shields.io/badge/Visual Studio Code-1.50.1-brightgreen) ![Node.js-13.7.0](https://img.shields.io/badge/Node.js-13.7.0-brightgreen) ![npm-6.14.8](https://img.shields.io/badge/npm-6.14.8-brightgreen)
## はじめに
Qiita やブログなど記事をマークダウンで書くときに使うおすすめのエディタ！といいつつ２つしか使ってないのでこれいいんじゃないかな？と思った方法の紹介です。

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

## おすすめのエディタ
別に Qiita に投稿する場合はブラウザ上で書いてもいいのですがなんとなくブラウザで文章書くのが嫌なのでおすすめのエディタを紹介します。
### MacDown
Mac でマークダウンで書くならとりあえず [MacDown](https://macdown.uranusjr.com/)でいいんじゃないかなと思います。

下記のようにプレビューもできるので十分満足な機能が揃っています。

![macdown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225999/965320d3-5b13-1760-b35c-65d3be7b2754.png)

### VSCode
みなさん大好き [VSCode](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)!!  
特に  MacDown でも困らないのですが VSCode ならプレビューと拡張機能（textlint）を追加すると文書公正までできちゃいます！

![vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225999/a4a5b436-0deb-7e0b-7dfe-79a83ac1fc69.png)

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

### textlint のインストールとセットアップ
Node.js が必要なので適宣インストールしてください。  
下記のページから直接ダウンロードするか Homebrew でインストールすればいいと思います。

* [Node.js](https://nodejs.org/ja/)
* [MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)

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

    ```
    $ npm init -y
    ```

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

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

1. textlint の設定ファイル（.textlintrc）を生成する

    ```
    $ npx textlint --init
    ```

1. VSCode の拡張機能の [vscode-textlint](https://marketplace.visualstudio.com/items?itemName=taichi.vscode-textlint) をインストールする  
1. VSCode を再起動する
1. マークダウンファイルを作成する（適当に test.md で作成）

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

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

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

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

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

```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 が文章チェックをしてくれます。

こんな感じです。

![vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225999/a4a5b436-0deb-7e0b-7dfe-79a83ac1fc69.png)

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

[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

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

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

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

[textlint-ja - GitHub](https://github.com/textlint-ja)

## 参考
* [textlint と VS Code で始める文章校正](https://qiita.com/takasp/items/22f7f72b691fda30aea2)