neputa note

vscode-textlintで日本語の文章校正をしよう【mdx / md / html / txt】

初稿:

- 6 min read -

#VSCode #dev
img of vscode-textlintで日本語の文章校正をしよう【mdx / md / html / txt】

記事概要

  • 先日のBloggerからAstroへ移行した記事の別途詳細

※参考 - Blog移行記事

BlogをBloggerからAstroへ移行した

10年以上の期間お世話になったGoogle Bloggerに別れを告げ、この度AstroでBlogサイトを構築し移行した。Astroは静的サイトを手軽に開発できる軽量フレームワーク。無料のテンプレートをベースにカスタマイズを行った。それなりの作業ボリュームとなったので、詳細は別記事に分け、今回は移行作業全体をまとめる。

favicon for blog card www.neputa-note.net

目的

  • VSCodeの拡張機能「vscode-textlint」をインストールし日本語の文章校正を自動化する
  • 校正対象ファイルは4種類
    • .mdx
    • .md
    • .txt
    • .html
  • mdxは設定が複雑のため詳しい手順をまとめる
  • 校正ルールはJTF日本語標準スタイルのルールセットを用いる

作業概要

  1. textlint、rule、pluginインストール
  2. vscode-textlintインストール
  3. vscode-textlintの設定
  4. .textlintrcを作成

前提

環境

  • OS - Ubuntu-22.04LTS on WSL2
  • Node.js - v20.14.0
  • npm - v10.8.1
  • textlint - v14.0.4
    • textlint-plugin-markdown - v14.0.4
    • textlint-plugin-text - v14.0.4
  • VSCode - v1.90.2
    • vscode-textlint - v0.11.0

textlint とは

textlint · The pluggable linting tool for text and markdown

The pluggable linting tool for text and markdown

favicon for blog card textlint.github.io

textlintはJavaScriptで書かれたオープンソースのテキスト静的解析ユーティリティです。自然言語のテキストをリントするのは難しいが、私たちはプラガブル（プラグイン可能）なアプローチでこの問題を解決しようとしている。 — textlint公式より引用をDeepLで翻訳

JTF日本語標準スタイルとは

スタイルガイド｜JTF　日本翻訳連盟 | 日本翻訳連盟

実務翻訳の業界団体である　日本翻訳連盟（JTF）。日本翻訳ジャーナルの発行、JTFほんやく検定、翻訳セミナー（東京・大阪）、翻訳祭、業界調査研究を実施。

favicon for blog card www.jtf.jp

『JTF日本語標準スタイルガイド（翻訳用）』は、実務翻訳において和訳時に使用できる日本語表記ガイドラインです。2012年1月30日に初版を公開しました。『JTF日本語標準スタイルガイド』はどなたでも無償で使用できます。日本語の表記のゆらぎを防いで、スムーズに表記を統一するためのガイドラインとして活用してください。著作権および使用条件は文書本体に記載しています。 — JTF　日本翻訳連盟より引用

作業詳細

作業ディレクトリの準備

  • VSCodeのプロジェクトディレクトリ作成
bash
$ mkdir my-project
$ cd my-project

textlint、rule、pluginインストール

  • textlint本体とJTF日本語標準スタイルのruleをインストール
install-project
$ npm install -D textlint textlint-rule-preset-jtf-style
  • グローバルインストールの場合は以下
install-global
$ npm install -g textlint textlint-rule-preset-jtf-style
install-plugin
npm install @textlint/textlint-plugin-text textlint-plugin-mdx

vscode-textlintインストール

vscode-textlintの設定

  • コマンドパレット（ctrl + shift + p）から「基本設定： ユーザ設定を開く（JSON）」を実行
  • settings.json に以下を追加
settings.json
{
  "textlint.languages": ["mdx", "markdown", "plaintext", "html"]
}
  • VSCodeでtextlintを使用する場合、対象とするファイルをsettings.jsonで指定する必要がある（重要）
  • これらの値は、VSCodeのステータスバー「言語モードの選択」に表示される値と一致する必要がある

.textlintrcを作成

  • コマンドパレット（ctrl + shift + p）から「textlint: Create ‘.textlintrc’ File」を選択
  • プロジェクトディレクトリ直下に、「.textlintrc」が作成される
  • .textlintrcに以下のルールとプラグインを記述する
.textlintrc
{
  "plugins": {
    "mdx": true,
    "@textlint/text": {
      "extensions": [".html"]
    }
  },
  "rules": {
    "preset-jtf-style": {
      "1.1.3.箇条書き": false,
      "2.2.1.ひらがなと漢字の使い分け": true
    }
  }
}

pluginsの設定について

  • .mdxと .htmlに対応させている
  • markdownとtextファイルはtextlintの標準に含まれるため省略
    • インストールしたtext用pluginを .htmlに指定し強引に動作させている
    • 他にhtmlでtextlintを走らせる方法が分からない

rulesの設定について

その他追加作業

ファイル内の特定箇所のみignoreする

install-filter-rule-comments
$ npm install -D textlint-filter-rule-comments
  • .textlintrc に以下を追加
.textlintrc
{
  "filters": {
    "comments": true
  }
}
  • コメントブロックで該当箇所を囲むと校正をスキップできる
html
<!-- textlint-disable -->

このブロックは校正スキップ

<!-- textlint-enable -->
  • mdxではhtmlコメントでエラーとなるためこう書く
  • これはmdxプラグインの効果
mdx
{/* textlint-disable */}

このブロックは校正スキップ。mdx はこのようにブロックを作る。

{/* textlint-enable */}

まとめ

最後に備忘録として .htmlファイルでtextlintを動かすまでの経緯を残す

日本語用textlint ruleセット一覧

参考サイト

#VSCode #dev

目次