6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-24

macOS-10.15.7 ![Visual Studio Code-1.50.1](https://img.shields.io/badge/Visual Studio Code-1.50.1-brightgreen) Node.js-13.7.0 npm-6.14.8

はじめに

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

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

おすすめのエディタ

別に Qiita に投稿する場合はブラウザ上で書いてもいいのですがなんとなくブラウザで文章書くのが嫌なのでおすすめのエディタを紹介します。

MacDown

Mac でマークダウンで書くならとりあえず MacDownでいいんじゃないかなと思います。

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

macdown.png

VSCode

みなさん大好き VSCode!!
特に MacDown でも困らないのですが VSCode ならプレビューと拡張機能(textlint)を追加すると文書公正までできちゃいます!

vscode.png

VSCode + textlint の使い方

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

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

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

  1. 作業用ディレクトリの作成(適当に markdown というディレクトリをつくりました)

  2. ターミナルで作成したディレクトリに移動する

  3. package.json を作成する

    $ npm init -y
    
  4. textlint と各プリセットをインストールする

    $ npm install --save-dev \
        textlint \
        textlint-rule-preset-ja-spacing \
        textlint-rule-preset-ja-technical-writing \
        textlint-rule-spellcheck-tech-word
    
  5. textlint の設定ファイル(.textlintrc)を生成する

    $ npx textlint --init
    
  6. VSCode の拡張機能の vscode-textlint をインストールする

  7. VSCode を再起動する

  8. マークダウンファイルを作成する(適当に 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 が文章チェックをしてくれます。

こんな感じです。

vscode.png

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

Markdown記法 チートシート

おわりに

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

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

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

textlint-ja - GitHub

参考

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?