Web制作ボイラープレート（HTML + CSS + JS + Prettier + stylelint + ESLint）

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

動作確認環境

• 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の設定ファイル。

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

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

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

  • node_modules
  • .DS_Store

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

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

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

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

コーディングルール

コーディング全般

対応ブラウザ

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

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

プロジェクトの要件に合わせて変更すること。

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

HTML

フォーマッター

• Prettierを使用する

CSS

リンター

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

"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セレクタの命名パターンを制限しない。

フォーマッター

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

JavaScript

リンター

• ESLintを使用する
• ベースのルールとしてeslint:recommendedを使用する
• 加えて、以下のルールを追加する。ルールの詳細はこちらを参照すること

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

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

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

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

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

フォーマッター

• Prettierを使用する