https://github.com/yoshinani-dev/style-guide
Yoshinani's engineering style guide
https://github.com/yoshinani-dev/style-guide
biome-config cspell-dicts eslint-config prettier-config typescript-config
Last synced: about 2 months ago
JSON representation
Yoshinani's engineering style guide
- Host: GitHub
- URL: https://github.com/yoshinani-dev/style-guide
- Owner: yoshinani-dev
- License: mit
- Created: 2025-04-26T07:14:10.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-07-22T02:34:00.000Z (3 months ago)
- Last Synced: 2025-07-22T12:34:43.620Z (3 months ago)
- Topics: biome-config, cspell-dicts, eslint-config, prettier-config, typescript-config
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@yoshinani/style-guide
- Size: 240 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Yoshinani スタイルガイド
[](https://badge.fury.io/js/@yoshinani%2Fstyle-guide)
## はじめに
このリポジトリは、Yoshinani のスタイルガイドのホームであり、人気のあるリンティングやスタイリングツール用の設定を含んでいます。
以下の設定が利用可能で、組み合わせて使うことを想定しています。
- [Prettier](#prettier) または [Biome](#biome)
- [ESLint](#eslint)
- [TypeScript](#typescript)
- [commitlint](#commitlint)
- [cspell](#cspell)
## コントリビュートについて
プルリクエストを作成する前に、[コントリビュートガイド](https://github.com/yoshinani-dev/style-guide/blob/main/CONTRIBUTING.md)をお読みください。
## インストール
すべての設定は1つのパッケージ `@yoshinani/style-guide` に含まれています。インストール方法は以下の通りです。
```sh
# 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` に以下を追加してください。
```json
{
"prettier": "@yoshinani/style-guide/prettier"
}
```
## Biome
現在、この設定ではBiomeのフォーマッター機能のみを有効にしています。リンターとしては、別途 [ESLint](#eslint) を設定してください。
まず、プロジェクトルートにBiomeをインストールします。
```sh
pnpm add -w -D @biomejs/biome
```
共有のBiome設定を利用するには、`biome.jsonc` を作成して、以下のように `extends` を設定します。
```jsonc
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"extends": ["@yoshinani/style-guide/biome"],
"files": {
"includes": ["**", "!**/.next", "!**/.turbo"]
}
}
```
VSCodeでフォーマッターとしてBiomeを利用する場合は、まず[Biomeの拡張機能](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)をインストールしてください。
次に、`.vscode/settings.json` に以下の設定を追加します。
```json
{
"biome.enabled": true,
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true
}
```
プロジェクトの推奨拡張機能として設定するために、`.vscode/extensions.json`を作成し、以下の内容を追加することをお勧めします。
```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` に以下のように記載します。
```js
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` に以下のように記載します。
```json
{
"extends": "@yoshinani/style-guide/typescript"
}
```
## commitlint
1. commitlintのインストール
```bash
pnpm add -D @commitlint/cli
```
2. `commitlint.config.mjs`を作成し以下のように記載します。
```js
export { default } from "@yoshinani/style-guide/commitlint"
```
3. コミット時のリントをする場合、huskyの設定をしてください。
```bash
pnpm add -D husky
```
`package.json`へスクリプトの追加。
```json:package.json
"scripts": {
"prepare": "husky",
}
```
`.husky/commit-msg`を作成。
```bash:.husky/commit-msg
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint --edit "$1"
```
## cspell
1. `cspell.config.mjs`を作成し以下のように記載します。
```js
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拡張での設定
```json
{
"cSpell.customDictionaries": {
"yoshinani": {
"name": "yoshinani",
"path": "${workspaceFolder}/node_modules/@yoshinani/style-guide/cspell/words.txt",
"addWords": false
}
}
}
```