Mama-linter NPM

mama-linter CLI

A CLI tool combining Prettier and ESLint with sound notifications

mama-Linter CLI は、ESLint と Prettier を使用してコードスタイルを統一し、手動修正箇所のリストアップや音声通知機能🎵を備えたツールです。

特徴

自動修正: ESLint と Prettier によるコードの自動修正。
手動修正箇所の特定: 修正が必要な箇所をリストアップ。
音声通知: 修正完了や手動修正が必要な箇所を音声で通知。
柔軟な設定: 対象ファイルや動作モードをオプションで指定可能。

インストール方法

以下のコマンドでインストールします:

npm install -g mama-linter

注意: インストールと実行時の名前について

このCLIツールのインストール時にはパッケージ名（mama-linter）を使用します。実行時には、CLIコマンド名（my-linter）を使用します。

たとえば：

インストールコマンド

npm install -g mama-linter

実行コマンド

my-linter --help

このように、インストール時の名前（mama-linter）と実行時の名前（my-linter)が異なることに注意してください。

基本的な使い方

コマンド一覧

1. デフォルト動作

my-linter

自動修正と手動修正箇所のリストアップを行います。
修正完了後、音声通知が再生されます。

2. 修正のみ

my-linter --fix

自動修正のみを行います。

3. チェックのみ

my-linter --check

コードスタイルのチェックのみを行います。

4. 音声通知の無効化

my-linter --noSound

音声通知を無効化します。

5.特定のファイルやディレクトリを指定

my-linter --files "src/**/*.js"

対象ファイルを指定できます。

6.実行モードの指定

my-linter --mode [mode]

実行モードを指定します。 default: 自動修正と手動修正箇所のリストアップを行います。（デフォルト） fix: 自動修正のみを行います。 check: チェックのみを行い、修正は行いません。

7. 詳細ログ表示

my-linter --verbose

詳細なログを表示します。

8. ヘルプの表示

my-linter --help

使用可能なすべてのオプションとその説明を表示します。

デモの詳細: 手動修正と音声通知

mama-linterの操作を体験するためのデモリポジトリを利用できます。以下の手順で実施してみてください☺️

1.デモリポジトリの準備

1.リポジトリをクローン

git clone https://github.com/Jyoumama/mama-linter-demo.git
cd mama-linter-demo

2.mama-linter をグローバルにインストールします。

npm install -g mama-linter

3.依存関係のインストール（必要な場合）プロジェクト内の依存関係をインストールする場合は、以下を実行します。

npm install

これで、デモの準備が整いました！

2.デモ手順

以下の手順でmama-linterの動作を体験してください。

1.テストファイルのリセット

リセットコマンドでtestFile.js を初期状態（手動修正できる状態）に戻します。

my-linter reset-test

このコマンドは、以下の場合に便利です。

手動で修正した後に、テストファイルを初期状態に戻したいとき。
テストを何度も繰り返したいとき。

注意：testFile.jsは、初期状態で提供されていますが、リセットコマンドを使用すること> で何度でも元の状態に戻せます。

オプション

詳細なログを表示する場合は、 --verbose オプションを付けて実行します。

my-linter reset-test --verbose

出力例:

🛠️ reset-test コマンドが呼び出されました！
リセットするファイル: src/testFile.js
✅ ファイルがリセットされました: src/testFile.js

2.My-Linterの実行

My-Linterを実行して、手動修正が必要な箇所をリストアップします。

my-linter

出力例:

⚠️ 修正が必要な箇所が残っています:
`src/testFile.js`
- 4:1 Unexpected var, use let or const instead. (no-var)
//'var' を 'let' または 'const' に置き換えてください (no-var)

説明:

var の使用が no-var ルールに違反していることを示しています。
エラーメッセージを参考に修正を行います。

3.手動修正の実施

エディタで testFile.js を開き、var を let または const に置き換えます。

修正例：

// 修正前
var noUseVar = "Hello";

// 修正後
let noUsedVar = "Hello"; // no-var ルールに準拠

4.修正完了の確認

再度My-Linterを実行して、修正が正しく反映されたか確認します。

my-linter

出力例：

🎉 手動修正が完了しました！

さらに、修正が完了したことを知らせる音声通知が再生されます。 「やったね！」という達成感を味わいましょう！🎵

捕足：他のファイルで試したい場合

reset-test コマンドはデフォルトで src/testFile.js を対象にしていますが、--file オプションで別のファイルを指定することも可能です。

my-linter reset-test --file=path/to/your/file.js

デモを試す流れの概要

1.リポジトリをクローン:

git clone https://github.com/Jyoumama/mama-linter-demo.git`

2.必要なツールのインストール:

npm install -g mama-linter

3.テストファイルのリセットと実行:

my-linter reset-test
my-linter

設定ファイルの例

以下は、My-Linterで使用されるESLintとPrettierの設定ファイルです。

`eslint.config.js`

import globals from "globals";
import pluginJs from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  {
    languageOptions: { globals: globals.nodeBuiltin },
  },
  pluginJs.configs.recommended,
  eslintConfigPrettier,
  {
    rules: {
      "no-var": ["error"],
      "prefer-const": ["error"],
      camelcase: ["warn"],
      "no-console": ["warn"],
      "no-unused-vars": ["warn"],
      semi: ["error", "always"],
      quotes: "off",
      indent: "off",
      "eol-last": ["error", "always"],
      "no-trailing-spaces": "error",
      "object-curly-spacing": ["error", "always"],
      "array-bracket-spacing": ["error", "never"],
    },
  },
  {
    files: ["src/testFile.js", "src/testFileTemplate.js"],
    rules: {
      "no-unused-vars": "off",
      "no-console": "off",
      "no-undef": "off",
    },
  },
];

`prettier.config.js`

export default {
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: false,
  trailingComma: "es5",
  bracketSpacing: true,
  printWidth: 80,
};