EditorConfigを活用する

ユニークビジョン株式会社 Advent Calendar 2024の12/19の記事です。

EditorConfigとは

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ファイルの設定例：

# 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

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

Prettier用の.editorconfigファイルの設定例:

# 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

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

biome.jsonに以下の設定を追加することで、.editorconfigを使用できます。

{
  "formatter": {
    "useEditorconfig": true
  }
}

dfmt

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

dfmt用の.editorconfigファイルの設定例：

# 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パイプラインで活用することで、コードスタイルの一貫性を自動的にチェックできます。

GitHub Actionsでの設定例：

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で弊社主催のコンテストが開催されます。是非ご参加ください。

1. Biome - Changelog ↩

2. Wikipedia - Indentation style ↩