Yoshinani スタイルガイド

はじめに

このリポジトリは、Yoshinani のスタイルガイドのホームであり、人気のあるリンティングやスタイリングツール用の設定を含んでいます。

以下の設定が利用可能で、組み合わせて使うことを想定しています。

• Prettier または Biome
• ESLint
• TypeScript
• commitlint
• cspell

コントリビュートについて

プルリクエストを作成する前に、コントリビュートガイドをお読みください。

インストール

すべての設定は1つのパッケージ @yoshinani/style-guide に含まれています。インストール方法は以下の通りです。

# npm を使う場合
npm i --save-dev @yoshinani/style-guide

# pnpm を使う場合
pnpm i --save-dev @yoshinani/style-guide

# Yarn を使う場合
yarn add --dev @yoshinani/style-guide

Prettier

共有 Prettier 設定を使うには、package.json に以下を追加してください。

{
  "prettier": "@yoshinani/style-guide/prettier"
}

Biome

現在、この設定ではBiomeのフォーマッター機能のみを有効にしています。リンターとしては、別途 ESLint を設定してください。

まず、プロジェクトルートにBiomeをインストールします。

pnpm add -w -D @biomejs/biome

共有のBiome設定を利用するには、biome.jsonc を作成して、以下のように extends を設定します。

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "extends": ["@yoshinani/style-guide/biome"],
  "files": {
    "includes": ["**", "!**/.next", "!**/.turbo"]
  }
}

VSCodeでフォーマッターとしてBiomeを利用する場合は、まずBiomeの拡張機能をインストールしてください。

次に、.vscode/settings.json に以下の設定を追加します。

{
  "biome.enabled": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true
}

プロジェクトの推奨拡張機能として設定するために、.vscode/extensions.jsonを作成し、以下の内容を追加することをお勧めします。

{
  "recommendations": [
    "biomejs.biome"
  ]
}

ESLint

利用できる設定は以下の通りです。

• @yoshinani/style-guide/eslint/base
• @yoshinani/style-guide/eslint/next
• @yoshinani/style-guide/eslint/library
• @yoshinani/style-guide/eslint/react-internal

例として、Next.js プロジェクトで共有 ESLint 設定を使う場合、eslint.config.mjs に以下のように記載します。

import next from "@yoshinani/style-guide/eslint/next"

const eslintConfig = [...next]

export default eslintConfig

TypeScript

このスタイルガイドは複数の TypeScript 設定を提供しています。利用可能な設定は以下の通りです。

種類	設定パッケージ名
base	@yoshinani/style-guide/typescript
nextjs	@yoshinani/style-guide/typescript/nextjs
react-library	@yoshinani/style-guide/typescript/react-library

共有 TypeScript 設定を使うには、tsconfig.json に以下のように記載します。

{
  "extends": "@yoshinani/style-guide/typescript"
}

commitlint

1. commitlintのインストール

pnpm add -D @commitlint/cli

2. commitlint.config.mjsを作成し以下のように記載します。

export { default } from "@yoshinani/style-guide/commitlint"

3. コミット時のリントをする場合、huskyの設定をしてください。

pnpm add -D husky

package.jsonへスクリプトの追加。

"scripts": {
  "prepare": "husky",
}

.husky/commit-msgを作成。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm commitlint --edit "$1"

cspell

1. cspell.config.mjsを作成し以下のように記載します。

const dictPath =
  import.meta.dirname + "/node_modules/@yoshinani/style-guide/cspell/words.txt"

export default {
  dictionaries: ["yoshinani-style-guide"],
  dictionaryDefinitions: [
    {
      name: "yoshinani-style-guide",
      path: dictPath,
      addWords: true,
    },
  ],
}

2. vscode拡張での設定

{
  "cSpell.customDictionaries": {
    "yoshinani": {
      "name": "yoshinani",
      "path": "${workspaceFolder}/node_modules/@yoshinani/style-guide/cspell/words.txt",
      "addWords": false
    }
  }
}