EditorConfigを活用する


[ユニークビジョン株式会社 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/uniquevision)の12/19の記事です。

# EditorConfigとは

https://editorconfig.org/

EditorConfigは、異なるエディタやIDEでプロジェクト全体のコーディングスタイルを一貫して維持するためのツールです。`.editorconfig`という設定ファイルを使用して、インデントスタイル、文字コード、改行コードなどの基本的なコードフォーマットルールを定義します。

# 基本的な設定項目

EditorConfigの主要な設定項目には以下のようなものがあります：

- `indent_style`: インデントにスペースを使うかタブを使うかを指定（`space` or `tab`）
- `indent_size`: インデントのサイズを指定（通常は2や4）
- `end_of_line`: 改行コードの種類を指定（`lf`, `cr`, or `crlf`）
- `charset`: 文字エンコーディングを指定（通常は`utf-8`）
- `trim_trailing_whitespace`: 行末の空白を削除するかどうかを指定（`true` or `false`）
- `insert_final_newline`: ファイル末尾に空行を挿入するかどうかを指定（`true` or `false`）

`.editorconfig`ファイルの設定例：
```ini
# EditorConfig is awesome: https://editorconfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
```

# EditorConfigをサポートするFormatter

EditorConfigをサポートするフォーマッターを使用することで、プロジェクト全体のコードスタイルを統一的に管理できます。

## Prettier

https://prettier.io/

Prettierは、JavaScript、TypeScript、CSS、Markdown、YAMLなど多くの言語をサポートする人気の高いコードフォーマッターです。Prettierはプロジェクトに`.editorconfig`ファイルがある場合にその設定を用います。特に、`indent_style`や`indent_size`等の基本的なフォーマット設定を`.editorconfig`ファイルから読み込むことができます。

Prettier用の`.editorconfig`ファイルの設定例:
```ini
# Stop the editor from looking for .editorconfig files in the parent directories
# root = true

[*]
# Non-configurable Prettier behaviors
charset = utf-8
insert_final_newline = true
# Caveat: Prettier won’t trim trailing whitespace inside template strings, but your editor might.
# trim_trailing_whitespace = true

# Configurable Prettier behaviors
# (change these if your Prettier config differs)
end_of_line = lf
indent_style = space
indent_size = 2
max_line_length = 80
```

## Biome

https://biomejs.dev/

BiomeはRustで書かれた高速なJavaScript/TypeScript用のツールチェインで、フォーマッター機能も提供しています。Biomeは今年の9月にリリースされたv1.9.0でEditorConfigをサポートしました。[^2]


`biome.json`に以下の設定を追加することで、`.editorconfig`を使用できます。
```json
{
  "formatter": {
    "useEditorconfig": true
  }
}
```

## dfmt

https://github.com/dlang-community/dfmt

dfmtはD言語用のフォーマッターです。dfmtは`.editorconfig`を読み込み設定に沿ってフォーマットします。todfmt用の`dfmt_`というプレフィックスがついたプロパティを設定することでルールを追加できます。例えば`dfmt_brace_style`を設定するとインデントスタイル[^3]のルールを追加できます。


dfmt用の`.editorconfig`ファイルの設定例：
```ini
# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*.d]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

# dfmt-specific properties
dfmt_brace_style = stroustrup
```


# CIでの活用

EditorConfigの設定をCIパイプラインで活用することで、コードスタイルの一貫性を自動的にチェックできます。

https://github.com/editorconfig-checker/action-editorconfig-checker


GitHub Actionsでの設定例：
```yaml
name: EditorConfig Checker

on:
  push:
  pull_request:

jobs:
  editorconfig:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: editorconfig-checker/action-editorconfig-checker@main
      - run: editorconfig-checker
```

# まとめ

EditorConfigを活用して、コードの可読性や品質を高めましょう。

~~D言語はいいぞ~~

# 宣伝

12/21にAtCoderで弊社主催のコンテストが開催されます。是非ご参加ください。

https://atcoder.jp/contests/abc385


[^1]: [Prettier - Configuration File](https://prettier.io/docs/en/configuration.html#editorconfig)
[^2]: [Biome - Changelog](https://biomejs.dev/internals/changelog/#v190-2024-09-12)
[^3]: [Wikipedia - Indentation style](https://en.wikipedia.org/wiki/Indentation_style)