VS Codeに「Prettier」「ESLint」「Stylelint」を設定して、WEBサイトをコーディング

フロントエンドでサイト構築（コーディング）する際、構文エラーのチェックとコード整形を行う必要があります。
適応する構文や整形のベースやルールは、制作者やプロジェクトによって異なります。また、独自のルールや手動での対応は手間がかかり、コード内容にもブレが生じてしまいます。
構文チェックとコード整形のルールを、事前に設定し自動で適用すれば、作業か効率化しコードの品質も保ことができます。

この記事の内容は、WEBデザイナー（非エンジニア）の方で、サイトコーディング時にVS Codeを使っている、構文チェックやコード整形についての設定理解を深めたい方向けです。
今回のメインとなる対象ソースは、HTML、CSS、JavaScriptを想定しています。
PCはmacでの作業になります。

今回の環境を構築する際に必要な知識と作業

VS Codeエクステンション（拡張機能）のインストールと設定のみで完結しない＆黒い画面上での作業が必要になると、心が折れる。。。

デザイナー(非エンジニア）にとっては、前提になる知識や関連する事象についての理解が浅く、設定内容の詳細な理解には時間がかかります。

一つ一つ理解しつつ、双方関係性のイメージをつかむことができればと思います。

構文チェックとコード整形に使う機能（パッケージ）

構文チェックとコード整形の自動化として、以下の機能をNode.jsパッケージとVS Codeのエクステンションをインストールします。

Node.jsのパッケージは８個、VS Codeのエクステンションは3つインストールします。
それぞれ、役割が異なるので、一覧表で機能概要をチェックしてみてください。

Node.jsのパッケージとVS Codeの拡張機能（エクステンション）について

今回設定する環境では「Prettier」「ESLint」「Stylelint」いずれも、Node.jsのパッケージ機能とVS Codeの拡張機能との連携が必要になります。

VS Codeのエクステンション（拡張機能）は、Node.jsのパッケージをVS Code上で設定および利用できるようにするためにインストールします。
機能の本体は、Node.jsのパッケージの方が優先されます。

「Node.jsのパッケージ」「VS Codeのエクステンション」の役割の違い掴みづらいと思います。
それ以前に「Node.js」って何？「npm」って何？になると思うので、順を追って理解しながら進めていきましょう。

Node.jsのパッケージをインストールする環境準備

１、nodebrewのインストール

ここから、ターミナル（黒い画面）上でコマンドを打つ作業になります。
環境によって同じ結果にならなかったり、予想外のエラーに悩んだりもするかもしれませんが、慣れていくことが大切なので、一緒にがんばりましょう。

Node.jsをインストールするためには、Node.jsのパッケージを管理するnodebrewをインストールします。

ターミナルを開いて、以下のコマンドを打ちます。
（サーバー上からnodebrewをダウンロードしてインストールするコマンドです。）

curl -L git.io/nodebrew | perl - setup

以下のような結果がでてきたらインストールOKです。

 % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
100 24696  100 24696    0     0  14071      0  0:00:01  0:00:01 --:--:-- 14071
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

２、nodebrewのパスを通す

nodebrewをインストールした段階では、npmのコマンドはまだ利用できません。

npmのコマンドを打っても、macのシェルから「npmのコマンドがみつかりません」というエラーが返ってきます。

zsh: command not found: npm

特定のコマンドでプログラムを実行できるように、nodebrewのパスを通す設定をします。
設定ファイルの作成と編集は、ターミナル上で、viエディタというテキストエデイターにて編集します。

ホームディレクトリに移動シェルスクリプト設定ファイルの作成と編集

homeディレクトリ（ユーザールート）に移動

cd ~

シェルの設定ファイル「.zshrc」をターミナル上で作成

touch .zshrc

設定ファイル「.zshrc」にパスを記述するために、ターミナル上でテキストを編集する「viエディタ」で「.zshrc」ファイルを開きます。

vi .zshrc

キーボードの「i」を打つとインサート（ファイルに記入）ができるようになります。
画面の左下に「– INSERT –」と表示されます。
以下のテキストをペーストします。

export PATH=$HOME/.nodebrew/current/bin:$PATH

ペーストしたら、キーボードの「esc」キーを打つと、インサート状態が解除されます。
「– INSERT –」の表示がなくなったら、左下にカーソルが当たっているので、「:wq」と打ちます。
「:wq」はファイルに書込んだものを上書き保存（write）してviを終了（quit）を実行するviコマンドです。

:wq

ターミナルの環境設定

ターミナルの環境設定のシェルタブのコマンド実行をチェック

ターミナルの再起動

以下コマンドを打って、結果がでてくればOKです。

nodebrew -v

nodebrew 1.1.0

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backward compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

３、Node.jsのインストール

Node.jsのパッケージを管理するnodebrewのインストールと、コマンドを打つためのパスの設定が済んだので、Node.js本体をインストールします。

ここでやっと、Node.js本体のインストールになります。
Node.jsをインストールすると、Node.jsのパッケージマネージャーであるnpmも一緒にインストールされます。

通常は「nodebrew install <version>」でインストールしますが、今回は「nodebrew install-binary <version>」でインストールします
install-binaryを選ぶと通常より早くインストールできます。

バージョンは「stable」安定版を選択します

以下のコマンドを打ちます。

nodebrew install-binary stable

Node.jsがインストールされたかを確認するために、以下コマンドを打ちます。
「ls」は今いるディレクトのファイル一覧を表示するコマンドです。
「v16.4.0」など、バージョンがターミナルに表示されたら、インストールできています。

nodebrew ls

v16.4.0

４、使用するNode.jsのバージョンを設定する

この段階では利用するNode.jsが設定されていないので、「nodebrew use <version>」でNode.jsのバージョンを指定します。
バージョンは、lsコマンドで表示された際のバージョンを設定します。

nodebrew use v16.4.0

再度「nodebrew ls」とコマンドを打つと、バージョンの下に「current: v16.4.0」と、指定したバージョンが表示されます。

v16.4.0

current: v16.4.0

これで、Node.jsが利用できるようになります。

５、npmの初期化

npmはNode.jsと一緒にインストールされています。

コマンド「npm -v」と打ちバージョンが表示されれば、npmがインストールされていることを確認することができます。

npm -v

7.18.1

Node.jsのパッケージ管理のpackage.jsonファイルを作成

Node.jsのパッケージを管理する「npm（Node Package Manager）」の設定ファイルを用意します。
「package.json」にはNode.jsのパッケージ管理情報が記載されます。

任意のディレクトリ内でNode.jsのパッケージを利用する場合は、該当のディレクトリまで移動します。
ターミナルでディレクトリを移動する場合は「cd [ディレクトリパス] 」とコマンドを打ちます。
cdはchage directoryの意味。

cd /Users/username/Documents/Development 

インストールするディレクトリに移動したら、「npm init -y」というコマンドでnpmを初期化するとともに、設定管理ファイルの「package.json」を作成します。

npm init -y

Wrote to /Users/username/Documents/Development/test/package.json:

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

「Wrote to /Users/username/Documents/Development/test/package.json:」
〜testディレクトリ配下に「package.json」ファイルが作成され、以下を記載しました。
という結果がでてきますので、ディレクトリ内で実際にファイルを確認してみてください。

６、Node.jsのパッケージのインストールする

この段階で、Node.jsのパッケージをインストールできる環境が整いました。
あとは、規定のコマンドを打って、必要なパッケージ（機能）をインストールしていきます。

今回インストールするパッケージは以下です。

コマンドは「npm install –save-dev パッケージ名」になります。
「–save–dev」のdevはdevelopmentのことで、開発用としてインストールするの意味になります。
今回インストールするパッケージは、公開する本番サイト（想定は小規模のHTMLベースのWEBサイト）では利用しないため、「–save-dev」というオプションを付けてインストールします。

「npm install –save-dev」の後ろにパッケージ名を打ち替えて、必要な分インストールしてください。

npm install --save-dev stylelint

インストールが済むと、ディレクトリ内に「node_modules」というディレクトリができて、その中に必要なパッケージが入っています。
また、コマンドで打ち込んだパッケージ以外にもたくさんのパッケージがインストールされていますが、問題ありません。
Node.jsのパッケージは、単体で動くわけではないため、関連するパッケージも一緒にインストールされます。

Node.jsのパッケージを管理する「package.json」も更新されます。
–save-devのオプションをつけたので「devDependencies」という項目に、インストールしたパッケージの記載されます。

  "devDependencies": {
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.1",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-order": "^4.1.0",
    "stylelint-prettier": "^1.2.0"
  },

これで、Node.jsのパッケージインストールまでは完了です。

Node.jsパッケージの各機能の設定をする

パッケージをインストールしたままだとまだ機能を利用できないため、それぞれに必要な設定をします。

１、Stylelintの設定をする

設定ファイルは、「.stylelintrc.js」「.stylelintrc.json」「.stylelintrc.yaml」「.stylelintrc」と、複数のファイル形式で保存できます。

CSSのコード規約のルール適用、コード整形のPrettierとの連携の設定を行います。

今回はjs形式で記述する「.stylelintrc.js」で設定ファイルを用意し、以下のように記載します。

module.exports = {
  extends: ["stylelint-config-standard", "stylelint-prettier/recommended"],
  plugins: ["stylelint-order"],
  rules: {
    "order/properties-alphabetical-order": true,
  },
};

拡張（extends）

拡張機能（extends）に「stylelint-config-standard」と「stylelint-prettier/recommended」を設定します。

「stylelint-config-standard」で、標準的なCSSのコーディング規約集をセットします。
「stylelint-prettier/recommended」で、Prettier（コード整形）をStylelintルールとして実行するようにします。

プラグインとルールを追加

「stylelint-order」で、CSSのプロパティの順番を並び替えできるようにします。
「order/properties-alphabetical-order”」で、CSSのプロパティをアルファベット順にするルールを設定します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "vscode-w3cvalidation.validator-token": "Fri, 25 Jun 2021 22:00:00 GMT",
  "html.hover.references": false,
  "html.format.enable": false,
  "stylelint.autoFixOnSave": true,
  "stylelint.useLocal": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "security.workspace.trust.untrustedFiles": "open",
  "eslint.nodePath": "/Users/shibui/Documents/Development/node_modules",
  "javascript.format.enable": false,
  "auto-rename-tag.activationOnLanguage": ["*"],
}

２、ESLintの設定をする

ES Lintも設定ファイルの形式は複数選べますが、今回はjsファイル「.eslintrc.js」を作成し、以下設定を記載します。
設定ファイルには、「環境設定」「ルールの設定」「コード整形はPrettierを利用」に関して記載しています。

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["eslint:recommended", "prettier"],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {},
};

環境変数設定（env）

「env」は環境変数に関する設定です。
「browser: true」は、ESLintに対してブラウザ用のグローバル変数を設定し、定義されてない変数が呼び出された場合に表示されるエラーを出さないようにします。

「es2021: true」は、JavaScriptの標準規格であるECMAScriptで、ES2021にリリースされたものになります。
ESLintのデフォルトはES5になるため、（今は広く浸透している）ES2015(ES6)以降の設定をする必要があります。

拡張（extends）

「eslint:recommended」で、ESLintが用意している一般的なルールを適用します。
コード整形はESLintのものではなく、Prettierのものを適用するようにします。
記述の順序が影響を与えるので、「prettier」は一番最後に記述します。

データ構造に関する設定（parserOptions）

環境設定で「ecmaVersion: 12」を設定した場合は、parserOptionsは「es2021」を設定します。

３、prettierの設定をする

prettierの設定ファイルも、複数のファイル形式を選べますが、今回はjsファイルの「.prettierrc.js」を用意し、設定内容を記載します。

module.exports = {
  printWidth: 120,
};

設定ファイルを置かない、またはオプションを記述しない場合のデフォルト値が適用されます。

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  seTabs: false,
  semi: true,
  singleQuote: false,
  quoteProps: as-needed,
  jsxSingleQuote: false,
  trailingComma: none,
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: avoid,
  rangeStart: 0,
  rangeEnd: Infinity,
  parser: none,
  filepath: none,
  requirePragma: false,
  insertPragma: false,
  proseWrap: preserve,
  htmlWhitespaceSensitivity: css,
  vueIndentScriptAndStyle: false,
  endOfLine: auto,
};

VS Code拡張機能（エクステンション）の設定

構文チェック、コード整形に関してのアプリケーション（パッケージ）側の設定まで済みました。
エディターでそれらの機能を利用できるようにするため、VS Code側の設定を行います。

設定画面の開き方

VS Code側の設定は、「settings.json」ファイルに記述します。
直接書き込むことも可能ですし、設定画面から個別に行うこともできます。

設定画面は、[Code]→[基本設定]→[設定]で開きます。

settings.jsonは、設定画面の右上にあるファイルマークをクリックすると開くことができます。

settings.json開いた状態

stylelint-plus：VS Codeの設定

エクステンションとしてインストールしたツールは、設定画面左メニューの「拡張機能」から設定画面を開くことができます。

VS Code上でstylelintの有効化と保存時に自動実行するために、以下２箇所にチェックをいれてください。

ESLint：VS Codeの設定

Node.jsのESLintパッケージ本体がある場所を、VS Codeに設定します。

「nodePath」で検索すると、ESLintのNode Path設定を絞り込めます。
「settings.jsonで編集」をクリックすると、パスを入力できる状態でsettings.jsonが開きます。

"eslint.nodePath": "/Users/username/Documents/Development/node_modules",

npmでインストールしたNode.jsパッケージは、インストール先ディレクトリに「node_modules」というディレクトリができているので、パスを指定します。

Prettier – Code formatter：VS Codeの設定

VS Code上でPrettierの有効化と、Prettier本体のパスを指定します。

以下２箇所を設定してください。

「Prettier: Enable」「Prettier: Prettier Path」で検索すると、該当の設定項目を表示できます。

VS Codeの設定を変更

HTML、CSS、JavaScriptの構文チェック、コード整形は、VS Codeにも標準機能があります。
今回導入した機能と重複してしまうため、VS Code側は設定をオフにします。

以下4箇所を設定します。
設定項目をキーワード検索すると、該当情報の絞り込みができます。

editor.defaultFormatterにPrettierを設定します。
これで、コード整形のデフォルトとしてPrettierが機能するようになります。

editor.formatOnSave
ファイル保存時にフォーマットが適用されるように、チェックを入れてください。

html.format.enable
HTMLのコード整形はPrettierを利用するため、VS Codeのフォーマッターはオフにするために、チェックをはずします。

javascript.format.enable
javascriptのコード整形もPrettier利用するため、VS Codeのフォーマッターはオフにするために、チェックをはずします。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "html.hover.references": false,
  "html.format.enable": false,
  "stylelint.autoFixOnSave": true,
  "stylelint.useLocal": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "security.workspace.trust.untrustedFiles": "open",
  "eslint.nodePath": "/Users/shibui/Documents/Development/node_modules",
  "javascript.format.enable": false,
  "auto-rename-tag.activationOnLanguage": ["*"],
  "prettier.prettierPath": "/Users/shibui/Documents/Development/node_modules/prettier"
}

VS Codeの「settings.json」に、設定した情報が記載されています。
（今回の設定以外のものもあります。各自環境や設定状況により記載内容は異なります。）