コンテナ上で Qiita 記事執筆環境を作る

VSCode の Dev Containers を使ってコンテナ上に Qiita の記事を執筆するための環境の作り方をご紹介します。

Qiita の記事を毎月書くことを目標に掲げていて、モチベーションを上げるために作成しました。
この記事も作成した環境で執筆しています。

※個々の技術やツールについて詳しくは解説しません。コードは github のリンクがあるので、そちらからご確認ください。

やりたいことと実現方法

実現したいのは自動的な校正です。

校正ツールは業務で使っていた textlint を採用しました。
また、コードエディタは Dev Containers を使うために VSCode を採用しました。

執筆環境

github にリポジトリを作成しました。以下のリンクから確認できます。
devlopment-environment-for-qiita

.devcontainer 内のディレクトリ構造

.devcontainer 内のディレクトリ構造は以下の通りです。

.
└── .devcontainer
    ├── workspace
    │   ├── .vscode
    │       └── settings.json //(1)
    ├── .textlintrc.json //(2)
    ├── devcontainer.json //(3)
    ├── docker-compose.yml //(4)
    ├── Dockerfile //(5)
    └── package.json //(6)

項番	説明
(1)	VSCode のワークスペースごとの設定ファイルです。今回はフォーマットを設定するために使います。
(2)	textlint の設定ファイルです。
(3)	Dev Containers の設定ファイルです。
(4)	Docker の設定ファイルです。
(5)	docker-compose の設定ファイルです。
(6)	npm のパッケージを管理するファイルです。今回は textlint をインストールするために使います。

VSCode の拡張機能

使用している VSCode の拡張機能は以下の通りです。

1. vscode-textlint
   • textlint を実行するために必要
2. markdownlint
   • Markdown の構文とスタイルをチェックしてくれる
3. Markdown All in One
   • ショートカットが使えたり、改行でリストが自動で追加される
   • URL をコピーした状態で、テキスト選択して Ctr+V でリンクを作成できる機能が便利
4. Prettier - Code formatter
   • フォーマッター
5. Qiita Markdown Preview
   • Markdown のプレビューが Qiita の画面っぽくなる
6. TODO Higlight
   • コード中の「TODO」や「FIXME」がハイライト表示される

devcontainer.json で以下のように記載することで、コンテナを起動すると拡張機能が自動的に追加されます。

devcontainer.json

{
    // omitted
    "customizations": {
        "vscode": {
            "extensions": [
                "taichi.vscode-textlint",
                "DavidAnson.vscode-markdownlint",
                "yzhang.markdown-all-in-one",
                "esbenp.prettier-vscode",
                "ryokat3.vscode-qiita-markdown-preview",
                "wayou.vscode-todo-highlight"
            ]
        }
    }
}

フォーマットの設定

ファイルの保存時に自動でフォーマットされるように、.vscode 配下の settings.json で以下のように記載します。

settings.json

{
   "editor.defaultFormatter": "esbenp.prettier-vscode", //(1)
   "editor.formatOnSave": true //(2)
}

項番	説明
(1)	フォーマッターは「Prettier - Code formatter」を使うようにします。
(2)	ファイル保存時にフォーマットされるようにします。

textlint（校正）の設定

textlint では以下の 2 つの校正ルールを使っています。

1. textlint-rule-preset-ja-technical-writing
   • 技術文書向けのルールセット
2. markdownlint
   • JTF 日本語標準スタイルガイド（翻訳用）のルールセット

2 全角文字と半角文字の間にスペースを許可しないルールがあるのですが、英語と日本語の間にスペースを入れたいのでこのルールを除外します。
ルールの除外は .textlint.json で設定します。

.textlint.json

{
  "plugins": {},
  "filters": {},
  "rules": {
    "preset-ja-technical-writing": true,
    "preset-jtf-style": {
      "3.1.1.全角文字と半角文字の間": false
    }
  }
}

余談

今回ご紹介した執筆環境は最低限の設定なので、まだまだ改善の余地があります。
良い拡張機能を見つけたらまたご紹介します。