Gaji-Laboでよく使う設定ファイルたち

こんばんは 森田です。
フロントエンドの開発環境を作ることが多いのですが、作成後に git commit する時に思うんです。

「設定ファイル多いな〜」って。

今回はそんな弊社でよく使うフロントエンドの設定ファイルを棚卸しがてら紹介します。設定ファイルで弊社の仕事内容が伝わればこれ幸いです。

環境設定系

.gitignore

git の管理に含めないファイルを指定する設定ファイルです。
まずはこのファイルを設定します。

.envrc

プロジェクト毎に違う環境変数がある場合にそれ保存する設定ファイルです。
direnv を使います。

.ruby-version

Rubyのバージョンを固定および自動切り替えする rbenv の設定ファイルです。

Gemfile

Ruby のパッケージ gem を管理する Bundler の設定ファイルです。

.node-version

node.js のバージョンを固定および切り替えする設定ファイルです。
切り替えするツールは色々あったのですが、最近は自動切り替えもできる nodenv が主流で使われていると思います。 

package.json

node.js のパッケージ情報を保存する設定ファイルです。
このファイルを共有することで `$npm install` するだけでパッケージをインストールすることができます。

npm-scripts や git-hook など様々な便利な機能の設定もできます。

package-lock.json

package.json に記載されたパッケージのバージョンを固定する設定ファイルです。

yarn.lock

こちらもnode.js のパッケージを管理する yarn の設定ファイルです。
プロジェクトで yarn を採用している場合は package-lock.json ではなく、こちらを使います。

Dockerfile

Dockerのイメージ作成を自動化する設定ファイルです。

docker-compose.yml

Dockerの起動オプションを記述する設定ファイルです。
`$ docker-compose up` コマンドで設定した内容を実行できます。

コード設定系

.editorconfig

エディターの設定を統一する EditorConfig の設定ファイルです。

*.code-workspace

VSCode のワークスペース設定ファイルです。
除外するフォルダやフォーマットの設定などを共有します。

.browserslistrc

対象のブラウザを指定する設定ファイルです。
主に Autoprefixer の設定で使ってます。

webpack.config.js

JavaScriptモジュールバンドラ webpack の設定ファイルです。

gulpfile.js

タスクランナー Gulp の設定ファイルです。
webpackを使わない案件ではこちらを使います。

.babelrc

JavaScript のトランスパイラ babel の設定ファイルです。

.eslintrc

JavaScript リンター ESLint の設定ファイルです。
.eslintignore ファイルでlint除外するファイルも指定できます。

.stylelintrc

CSSリンター stylelint の設定ファイルです。ESLint のCSS版で
.stylelintignore ファイルでlint除外するファイルも指定できます。

.prettierrc

コードフォーマッター prettier の設定ファイルです。
Eslint や Stylelint と併用して使います。

最近はEslint や Stylelint に内蔵して使うことが多いのであまり使わなくなりました。

まとめ

一覧で書き起こして見るととても多いですね。
これでもよく使うものを書いているだけなので、プロジェクト固有の設定ファイルが他にもたくさんある場合もあります。

しかし、設定ファイルがあるだけ環境の再利用や共通化に便利になるので、様々なツールを使いこなして行きたいですね。