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


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

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

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

## やりたいことと実現方法

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

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

## 執筆環境

github にリポジトリを作成しました。以下のリンクから確認できます。  
[devlopment-environment-for-qiita](https://github.com/yamato-1923/devlopment-environment-for-qiita/tree/main)

### .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](https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing)
   - 技術文書向けのルールセット
2. [markdownlint](https://github.com/textlint-ja/textlint-rule-preset-JTF-style)
   - JTF 日本語標準スタイルガイド（翻訳用）のルールセット

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

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

## 余談

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