[Code Quality] remark-lint

2023-03-11 hit count image

remark-lintを使ってマークダウンファイル(Markdown)の作成スタイルを検査してみましょう。

概要

ReadmeファイルやWikiなど、開発と関連するドキュメントを作成する時、マークダウン(Markdown)の形式をよく使います。今回のブログポストではremark-lintを使ってマークダウン内容の作成スタイルを検査する方法について説明します。

ここで紹介されるソースコードは下記のリンクで確認できます。

Nodeのインストール

remark-lintを使うためにはNodeをインストールする必要があります。各OSに合わせてNodeをインストールします。s

macOS

Homebrewはマックにパッケージをインストールしたり、管理するマック専用のパッケージ管理者です。Homebrewを使ってマックに必要なパッケージを簡単にインストールすることができます。次のコマンドを実行してHomebrewをインストールします。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールしたら、次のコマンドを実行してうまくインストールされたか確認します。

brew --version

もし、バージョンが見えない場合、ターミナルを終了して、再び起動して実行してみます。すでにHomebrewがインストールされた方は下記のコマンドを実行してNodeをインストールします。

brew install node

Windows

ウィンドウズではChocolateyと言うパッケージマネージャーを使います。管理者権限でCMDまたはPowershellを開いて、下記のコマンドを実行してChocolateyをインストールします。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

インストールが完了されたら、次のコマンドを実行してインストールができたか確認します。

choco –version

Chocolateyのバージョンが表示されない場合は、CMDまたはPowershellを終了して再び実行します。Chocolateyがインストールされたら下記のコマンドを実行してNodeをインストールします。

choco install -y nodejs.install

package.jsonの生成

remark-lintはNode開発環境の上で動きます。したがって、Nodeのパッケージを管理するためpackage.jsonファイルを生成する必要があります。 次のコマンドを実行してpackage.jsonファイルを生成します。

npm init

コマンドを実行すると次のように色んな質問が出ます。特に変更したいものがなければ、全ての質問にEnterキーを入力します。

package name: (remark-lint-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

そしたら、次のようにpackage.jsonファイルが生成されることが確認できます。

{
  "name": "remark-lint-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

remark-lintのインストール

今度は次のコマンドを使ってremark-lintをインストールします。

npm install --save-dev remark-cli remark-lint remark-preset-lint-recommended

remark-lintの設定

このようにインストールしたremark-lintを使うために、package.jsonファイルを開いて下記のように修正します。

{
  ...
  "remarkConfig": {
    "plugins": [
      "remark-preset-lint-recommended",
      [
        "remark-lint-list-item-indent",
        "mixed"
      ]
    ]
  }
}

実行スクリプト生成

次は、このように設定したremark-lintを実行するスクリプトを生成してみましょう。package.jsonファイルを開いて下記のように修正します。

{
  ...
  "scripts": {
    "lint:md": "remark . --quiet --frail"
  },
  ...
}

実行

今まで設定したremark-lintがうまく実行されるか確認するためREADME.mdファイルを生成して次のように修正します。

test

その後、次のコマンドを実行して、remark-lintがうまく実行されるか確認します。

npm run lint:md

remark-lintをインストールしてうまく設定をしたら、次のようにワニングが出ることが確認できます。

README.md
  1:1  warning  Missing newline character at end of file  final-newline  remark-lint

完了

これでremark-lintを使ってマークダウンファイルの内容を検査する方法についてみてみました。皆さんもremark-lintを使ってマークダウンで作成したドキュメントのスタイルを統一してみてください。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts