このリポジトリは、株式会社YOSHINANI のスタイルガイドのホームであり、人気のあるリンティングやスタイリングツール用の設定を含んでいます。
以下の設定が利用可能で、組み合わせて使うことを想定しています。
プルリクエストを作成する前に、コントリビュートガイドをお読みください。
すべての設定は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 設定を使うには、package.json に以下を追加してください。
{
"prettier": "@yoshinani/style-guide/prettier"
}現在、この設定ではBiomeのフォーマッター機能のみを有効にしています。リンターとしては、別途 ESLint を設定してください。
まず、プロジェクトルートにBiomeをインストールします。
pnpm add -w -D @biomejs/biome共有のBiome設定を利用するには、biome.jsonc を作成して、以下のように extends を設定します。
VSCodeでフォーマッターとしてBiomeを利用する場合は、まずBiomeの拡張機能をインストールしてください。
次に、.vscode/settings.json に以下の設定を追加します。
{
"biome.enabled": true,
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true
}プロジェクトの推奨拡張機能として設定するために、.vscode/extensions.jsonを作成し、以下の内容を追加することをお勧めします。
{
"recommendations": [
"biomejs.biome"
]
}利用できる設定は以下の通りです。
@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プロジェクトの推奨拡張機能として設定するために、.vscode/extensions.jsonを作成し、以下の内容を追加することをお勧めします。
{
"recommendations": [
"dbaeumer.vscode-eslint"
]
}このスタイルガイドは複数の 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のインストール
pnpm add -D @commitlint/clicommitlint.config.mjsを作成し以下のように記載します。
export { default } from "@yoshinani/style-guide/commitlint"- コミット時のリントをする場合、huskyの設定をしてください。
pnpm add -D huskypackage.jsonへスクリプトの追加。
"scripts": {
"prepare": "husky",
}.husky/commit-msgを作成。
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint --edit "$1".vscode/cspell.jsonを作成し以下のように記載します。こうすることでVSCodeからCSpellの設定が読み込まれます。
{
"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
"dictionaries": ["yoshinani"],
"dictionaryDefinitions": [
{
"name": "yoshinani",
"path": "../node_modules/@yoshinani/style-guide/cspell/words.txt",
"addWords": false
}
]
}プロジェクトの推奨拡張機能として設定するために、.vscode/extensions.jsonを作成し、以下の内容を追加することをお勧めします。
{
"recommendations": [
"biomejs.biome",
"streetsidesoftware.code-spell-checker"
]
}固有名詞やランダムな文字列を書き込む際に、例外的にスペルチェックを無効化できます。
// 指定した行のチェックを無効化
const EXAMPLE_ID = "klfhasdflhadfasfa" // cspell: disable-line
// 直下の行のチェックを無効化
// cspell: disable-next-line
const LONG_ID = "klajdsjffadsfafkdafjajlmmxrklermanwafwncocmoc4ezdxcasf"
// 指定範囲のチェックを無効化
// cspell: disable
const MULTI_LINE_TXT = `
a;kfjas;dklfjads
aklfdj;adsjf;lka
;kajkls;dfjal;f
`
// cspell: enableCSpellをCI上で実行する際は、GitHub Actionsに以下のような設定を追加します。
name: 'Check spelling'
on:
pull_request:
push:
jobs:
spellcheck:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: streetsidesoftware/cspell-action@v7このときの設定は.vscode/cspell.jsonから暗黙的に読み込まれます。
{ "$schema": "./node_modules/@biomejs/biome/configuration_schema.json", "extends": ["@yoshinani/style-guide/biome"], "files": { "includes": ["**", "!**/.next", "!**/.turbo"] } }