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 の拡張機能は以下の通りです。
- vscode-textlint
- textlint を実行するために必要
- markdownlint
- Markdown の構文とスタイルをチェックしてくれる
- Markdown All in One
- ショートカットが使えたり、改行でリストが自動で追加される
- URL をコピーした状態で、テキスト選択して Ctr+V でリンクを作成できる機能が便利
- Prettier - Code formatter
- フォーマッター
- Qiita Markdown Preview
- Markdown のプレビューが Qiita の画面っぽくなる
- 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 つの校正ルールを使っています。
-
textlint-rule-preset-ja-technical-writing
- 技術文書向けのルールセット
-
markdownlint
- JTF 日本語標準スタイルガイド（翻訳用）のルールセット
2 全角文字と半角文字の間にスペースを許可しないルールがあるのですが、英語と日本語の間にスペースを入れたいのでこのルールを除外します。
ルールの除外は .textlint.json で設定します。
.textlint.json
{
"plugins": {},
"filters": {},
"rules": {
"preset-ja-technical-writing": true,
"preset-jtf-style": {
"3.1.1.全角文字と半角文字の間": false
}
}
}
余談
今回ご紹介した執筆環境は最低限の設定なので、まだまだ改善の余地があります。
良い拡張機能を見つけたらまたご紹介します。