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

morita

こんばんは 森田です。
フロントエンドの開発環境を作ることが多いのですが、作成後に 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 に内蔵して使うことが多いのであまり使わなくなりました。

まとめ

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

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

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!


morita

投稿者 Morita Sou

フロントエンドチームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。
Macやエディタ、開発環境などを快適にすることにいつも燃えています。