Web制作ボイラープレート（webpack + EJS + Dart Sass + Babel + Prettier + stylelint + ESLint）

• Web制作のためのボイラープレートです
• Visual Studio CodeとそのプラグインおよびNode.jsを使用します
• EJS、Dart Sass、JavaScriptの使用を想定しています
• モジュールバンドラとしてwebpackを使用します
• 各種設定は必要に応じて変更してください

動作確認環境

• Node.js v16.18.0
  Node.jsのバージョン管理にはVoltaを使用する。

使い方

1. zip形式で本レポジトリをダウンロードする
2. zipファイルを解凍し、フォルダ名を任意のプロジェクト名に変更する
3. プロジェクトのディレクトリに移動し、npm iコマンドを実行してパッケージをインストールする
4. 必要なVisual Studio Codeプラグインをインストール・有効化する
5. 必要に応じて、README.mdや各種設定ファイルを編集する
6. コーディングを開始する

設定ファイルについての説明

• .vscodeディレクトリ
  Visual Studio Codeの設定ファイルを格納するディレクトリ。 このディレクトリのファイルに記述した設定はプロジェクト内でのみ有効となる。

• .vscode/extensions.json
  プロジェクトにおけるVisual Studio Codeの推奨プラグインを記述したファイル。

• .vscode/settings.json
  Visual Studio Codeの設定ファイル。

• .browserslistrc
  対応ブラウザを指定するファイル。

• .editorconfig
  EditorConfigの設定ファイル。使用するルールについては後述。

• .eslintrc.json
  ESLintの設定ファイル。使用するルールについては後述。

• .gitignore
  Gitの追跡対象にしないファイル・ディレクトリを記述する。 プロジェクトをGitで管理する場合、以下のファイル・ディレクトリは追跡対象としない。

  • node_modules
  • .DS_Store
  • dist

• .stylelintrc.json
  stylelintの設定ファイル。使用するルールについては後述。

• jsconfig.json
  JavaScriptの設定ファイル。baseUrlやパスのエイリアスの設定に使用。

• package-lock.json
  使用するパッケージのバージョンを固定するためのファイル。

• package.json
  プロジェクトで使用するパッケージを記載したファイル。

• README.md
  本ドキュメント。

• webpack.config.js
  webpackの設定ファイル。

コマンド

• start
  webpackを起動し、開発用サーバーを立ち上げる。

• build
  webpackのproduction modeでビルドする。

• build:dev
  webpackのdevelopment modeでビルドする。

コーディングルール

コーディング全般

対応ブラウザ

以下のブラウザの最新バージョンを対応ブラウザとする。

• iOS Safari
• Android Google Chrome
• Safari
• Microsoft Edge
• Google Chrome
• Firefox

プロジェクトの要件に合わせて変更すること。その場合、必要に応じて.browserslistrcも更新すること。

EditorConfigのルール

• indent_style = tab
  インデントにタブを使用する。この選択はWordPressのコーディング規約に依る。
• indent_size = 2
  インデントサイズは2とする
• end_of_line = lf
  改行コードはLFとする
• charset = utf-8
  文字コードはUTF-8とする
• trim_trailing_whitespace = true
  文末のスペースを削除する。ただし、.mdファイルではfalse
• insert_final_newline = true
  ファイルの最終行に空行を挿入する

コメント

必要に応じてコメントを挿入する。 ただし、不要なコメントは削除する。なんらかの理由でコメントアウトしたコードを残す場合は、その理由もコメントで残しておく。

Visual Studio Codeプラグイン

以下のプラグインを使用すること。

• EditorConfig for VS Code
• Prettier - Code formatter
• stylelint
• ESLint

EJS

フォーマッター

• Prettierを使用する
• フォーマットのルールはHTMLのものと同様

CSS

• 原則として、SCSSファイルをコンパイルして生成したCSSファイルを直接編集することは禁止する

リセットCSS

• destyle.cssを使用する

Minify

• css-minimizer-webpack-pluginを使用する

SCSS

コンパイラ

• Dart Sassを使用する

CSSプロセッサー

• PostCSSを使用する
• プラグインとして以下を使用する
  • postcss-preset-env
  • postcss-sort-media-queries
• プレフィックスの付与は.browserslistrcに基づく

リンター

• stylelintを使用する
• ベースのルールとしてstylelint-config-standard-scssを使用する
• 以下のルールを追加する

"at-rule-empty-line-before": always
at-rulesの前に必ず空行を挿入する。

// 以下は許容されない
a {} @media {}

a {}
@media {}

"declaration-block-no-duplicate-properties": true
プロパティの重複を許容しない。

// 以下は許容されない
a {
  color: red;
  color: blue;
}

"declaration-block-no-redundant-longhand-properties": null
プロパティのロングハンド指定を許容する。

// 以下は許容される
a {
  padding-top: 1px;
  padding-right: 2px;
  padding-bottom: 3px;
  padding-left: 4px;
}

"keyframes-name-pattern": null
keyframeの命名パターンを制限しない。

"selector-class-pattern": null
classセレクタの命名パターンを制限しない。

"selector-id-pattern": null
idセレクタの命名パターンを制限しない。

"scss/at-function-pattern": null
functionの命名パターンを制限しない。

"scss/at-mixin-pattern": null
mixinの命名パターンを制限しない。

"scss/dollar-variable-pattern": null
変数の命名パターンを制限しない。

"scss/no-duplicate-dollar-variables": true
変数宣言の重複を許容しない。

// 以下は許容されない
$red: red;
$red: blue;

"scss/percent-placeholder-pattern": null
%-placeholderの命名パターンを制限しない。

フォーマッター

• Prettierを使用する
• ベースのルールとしてstylelint-prettier/recommendedを使用する
• プロパティの並び順はstylelint-config-recess-orderに準拠する

JavaScript

モジュールバンドラ

• webpackを使用する。

トランスパイラ

• Babelを使用する
• プリセットとして@babel/preset-envを使用する
• ブラウザ対応は.browserslistrcに基づく

リンター

• ESLintを使用する
• ベースのルールとしてeslint:recommendedを使用する
• プラグインとして以下を使用する
  • eslint-plugin-import
  • eslint-plugin-unused-imports
• 加えて、以下のルールを追加する。ルールの詳細はこちらを参照すること

"no-alert""warn" alert, confirm, promptが使用されていたら警告する。

"no-console""warn" consoleが使用されていたら警告する。

"no-unused-vars": "warn" 未使用の変数があれば警告する。

"no-var": "warn" varが使用されていたら警告する。

"eqeqeq": "warn" ==または!=が使用されていたら警告する。

フォーマッター

• Prettierを使用する

画像

最適化

• image-webpack-loaderを使用する