Published on

Webフロントの設定ファイル一覧表

Authors
  • avatar
    Name
    Kikusan
    Twitter

jsconfig.json

テキストエディタの設定支援ファイルで、プロジェクトルートを指定する。

tsconfig.json

TypeScriptのビルド設定を行う。他ビルドツールからも基本デフォルトで参照される。

空から作る場合はnpx tsc --initで生成。

package.json

Node.jsプロジェクトのメタデータ、依存関係、実行スクリプトなどを記載する。

package-lock.jsonは依存関係ツリーのすべてに対してバージョンを固定しておくもの。

空から作る場合はnpm initで生成。

npm install [package]で更新される。

基本的にpackage-lock.jsonが優先され、矛盾があったりpackage-lock.jsonが存在しないと、package.jsonに従ってpackage-lock.jsonが更新される。

.eslintrc.json / eslint.config.js

JSの静的解析ツールESLintの設定ファイル。ルールのon/off、プラグインが適用可能。

空から作る場合はnpx eslint --initで生成。

VSCodeプラグインで設定に従ってアサーション: ESLint

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version.
If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

.prettierrc.json / prettier.config.js

ソースコードフォーマッタPrettierの設定ファイル。ルールを設定する。

VSCodeプラグインで設定に従ってフォーマット: Prettier

プラグインにデフォルトフォーマッタがついているが、プロジェクトを開いて設定ファイルがあるとそれを優先する。

.npmrc

ユーザルートやプロジェクトルートにおいて、npmの設定をするファイル。
プライベートパッケージの認証情報などを記載。

babel.config.json

ダウンコンパイラbabelの設定ファイル。

webpack.config.js

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

postcss.config.js

CSS用フレームワークPostCSSの設定ファイル。

PostCSSまとめ: https://qiita.com/morishitter/items/4a04eb144abf49f41d7d cssに対してプラグインを設定して新しいcssを生成できる。
Autoprefixer: PostCSS製ベンダープリフィックス自動付与ツール
stylelint: PostCSS製CSSリンター

tailwind.config.js

tailwindcssの設定ファイル。
コンテンツフォルダ指定、値のオーバーライド、カスタム値生成、プラグイン設定などができる。

vite.config.ts

viteの設定ファイル。viteはrollup, webpackのようなビルドツール。
ESModuleのimportを使用することで必要なときだけ必要なファイルをコンパイルしブラウザに送るので、爆速の開発サーバを使用できる。

ビルド時はrollupを使用する。

vitest.config.ts

vite.config.tsよりもtestを行うときに優先度が高く読み込まれる設定ファイル。
テストについてのオプションも追加できる。

nuxt.config.ts

nuxtの設定ファイル。

pnpm-workspace.yaml

pnpmのモノレポのワークスペースを管理できる設定ファイル。
配置することでルートを定義して、リポジトリを識別し、依存関係に追加できる。

Discuss on Twitter