zukucode
主にWEB関連の情報を技術メモとして発信しています。

ReactのプロジェクトにEditorConfigを導入して文字コードや改行コードを統一する

ReactのプロジェクトにEditorConfigを導入して、文字コードや改行コードを統一します。

文字コードや改行コードを統一することにより、複数人で作業したときに、文字コードや改行コードが勝手に変わってしまうことを防ぎます。

ASP.NET Core + Reactのプロジェクトにeslintとprettierを導入するで作成したプロジェクトに対して修正します。

VSCodeの拡張機能のインストール

EditorConfigVSCodeで機能させるための拡張機能をインストールします。

ASP.NET Core + Reactの開発環境をDockerで作成するの手順で環境を作成した場合は、以下の設定で、コンテナ起動時に自動で拡張機能をインストールしていますので、この操作は不要です。

.devcontainer.json

  "extensions": [
    "ms-dotnettools.csharp",
    "editorconfig.editorconfig",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

以下の拡張機能をインストールします。

.editorconfigの作成

.editorconfigというファイル名で、Reactプロジェクトのルートディレクトリ(package.jsonと同じ階層)にファイルを作成します。

設定内容は適宜変更してください。

以下の例では、文字コードはUTF-8、改行コードはLFに設定しています。

.editorconfig
# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

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

[*.md]
trim_trailing_whitespace = false

以上で設定は完了です。


関連記事