npm-scripts で静的サイトの制作環境を構築 (3)

Windows、Visual Studio Code、Yarn、npm-scripts、Pug、PostCSS、Babel、webpack で静的サイトの制作環境を構築した際のメモ。（構文ハイライトのインストール～ファイル保存時に自動整形）

長くなったので、(1) コンパイラのインストール～ .gitignore ファイルの生成、(2) package.json ファイルの生成～ npm-run-all のインストール、(3) 構文ハイライトのインストール～ファイル保存時に自動整形、の 3 つに分けました。

Prettier の prettier.eslintIntegration と prettier.stylelintIntegration が非推奨になったため、(3) (改) 構文ハイライトのインストール～ファイル保存時に自動整形を投稿しました。

eslint-plugin-prettier と stylelint-prettier が非推奨になり、stylelint v15 以降は stylelint-config-prettier が不要になったため、(3) (改) (2) 構文ハイライトのインストール～ファイル保存時に自動整形を投稿しました。

目次

構文ハイライトのインストール

postcss-sugarss-language をインストール

Visual Studio Code に postcss-sugarss-language – Visual Studio Marketplace をインストールします。

Babel JavaScript をインストール

Visual Studio Code に Babel JavaScript – Visual Studio Marketplace をインストールします。

pug-lint のインストール

pug-lint をインストール

Pug の構文チェックには pug-lint を使いたいので、pug-lint – npm をインストールします。

yarn add pug-lint --dev

pug-lint の拡張機能をインストール

構文チェックはエディタと連携した方が使いやすいので、Visual Studio Code に puglint – Visual Studio Marketplace をインストールします。

pug-lint 拡張機能の設定

拡張機能のインストールが完了したら、puglint を有効にします。

メニューの ファイル > 基本設定 > 設定 を選択して Settings を開き、右上の { } 設定（JSON）を開く を選択して User Settings を開きます。

右側の ユーザー設定 に追記します。

{
  // Control whether pug-lint is enabled for Pug/Jade files or not.
  "puglint.enable": true
}

stylelint のインストール

stylelint をインストール

PostCSS の構文チェックには stylelint を使いたいので、stylelint – npm をインストールします。

yarn add stylelint --dev

stylelint-config-standard をインストール

ルールは stylelint-config-standard – npm をインストールします。

yarn add stylelint-config-standard --dev

stylelint-config-idiomatic-order をインストール

CSS のプロパティをソートするルールは stylelint-config-idiomatic-order – npm をインストールします。

yarn add stylelint-config-idiomatic-order --dev

stylelint の設定ファイルを作成

プロジェクト・ルートに .stylelintrc.js ファイルを作成します。

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-idiomatic-order",
    "./node_modules/prettier-stylelint/config.js",
  ],
  rules: {
    "at-rule-no-vendor-prefix": true,
    "media-feature-name-no-vendor-prefix": true,
    "property-no-vendor-prefix": true,
    "selector-no-vendor-prefix": true,
    "value-no-vendor-prefix": true,
  },
};

extends: [ ] にルールを適用する順に記述、Autoprefixer を使用するので rules: { } でベンダー・プリフィックスを禁止しました。

stylelint の拡張機能をインストール

Visual Studio Code に stylelint – Visual Studio Marketplace をインストールします。

stylelint 拡張機能の設定

拡張機能のインストールが完了したら、標準の CSS の検証機能を無効にします。

メニューの ファイル > 基本設定 > 設定 を選択して Settings を開き、右上の { } 設定（JSON）を開く を選択して User Settings を開きます。

右側の ユーザー設定 に追記します。

{
  // CSSの検証を有効または無効にします。
  "css.validate": false,

  // LESSの検証を有効または無効にします。
  "less.validate": false,

  // SCSSの検証を有効または無効にします。
  "scss.validate": false
}

ESLint のインストール

ESLint をインストール

JavaScript の構文チェックには ESLint を使いたいので、eslint – npm をインストールします。

yarn add eslint --dev

ESLint の設定ファイルを生成

Airbnb JavaScript Style Guide を使用するように .eslintrc.js ファイルを生成します。

.\node_modules\.bin\eslint --init

? How would you like to configure ESLint?
  Use a popular style guide
> Answer questions about your style
  Inspect your JavaScript file(s)

Use a popular style guide を選択します。

? Which style guide do you want to follow? (Use arrow keys)
> Airbnb (https://github.com/airbnb/javascript)
  Standard (https://github.com/standard/standard)
  Google (https://github.com/google/eslint-config-google)

Airbnb (https://github.com/airbnb/javascript) を選択します。

? Do you use React? (y/N)

React は使用しないので n を入力します。

? What format do you want your config file to be in?
> JavaScript
  YAML
  JSON

JavaScript を選択します。

Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0
? Would you like to install them now with npm? (Y/n)

npm ではなく Yarn でインストールしたいので n を入力します。

Successfully created .eslintrc.js file in プロジェクト・フォルダのパス

Yarn で eslint-config-airbnb-base – npm と eslint-plugin-import – npm をインストールします。

yarn add eslint-config-airbnb-base eslint-plugin-import --dev

.eslintrc.js ファイルを編集します。

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: "airbnb-base",
  parserOptions: {
    ecmaVersion: 6,
  },
};

env: { browser: true } でブラウザのグローバル変数に対応、env: { es6: true } と parserOptions: { ecmaVersion: 6 } で ECMAScript 6 に対応しました。

ESLint の拡張機能をインストール

Visual Studio Code に ESLint – Visual Studio Marketplace をインストールします。

ESLint 拡張機能の設定

拡張機能のインストールが完了したら、標準の JavaScript の検証機能を無効にします。

メニューの ファイル > 基本設定 > 設定 を選択して Settings を開き、右上の { } 設定（JSON）を開く を選択して User Settings を開きます。

右側の ユーザー設定 に追記します。

{
  // JavaScript の検証を有効/無効にします。
  "javascript.validate.enable": false
}

Prettier のインストール

Prettier をインストール

コードの整形には Prettier · Opinionated Code Formatter を使いたいので、prettier – npm をインストールします。

yarn add prettier --dev

Prettier の拡張機能をインストール

Visual Studio Code に Prettier – Code formatter – Visual Studio Marketplace をインストールします。

prettier-eslint をインストール

Prettier が ESLint と連携するよう、prettier-eslint – npm をインストールします。

yarn add prettier-eslint --dev

ESLint 連携の設定

メニューの ファイル > 基本設定 > 設定 を選択して Settings を開き、右上の { } 設定（JSON）を開く を選択して User Settings を開きます。

右側の ユーザー設定 に追記します。

{
  // Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
  "prettier.eslintIntegration": true
}

prettier-stylelint をインストール

Prettier が stylelint と連携するよう、prettier-stylelint – npm をインストールします。

yarn add prettier-stylelint --dev

stylelint 連携の設定

メニューの ファイル > 基本設定 > 設定 を選択して Settings を開き、右上の { } 設定（JSON）を開く を選択して User Settings を開きます。

右側の ユーザー設定 に追記します。

{
  // Use 'prettier-stylelint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from stylelint rules.
  "prettier.stylelintIntegration": true
}

ファイル保存時に自動整形

JavaScript と PostCSS のファイル保存時に自動整形するよう設定します。

保存時自動整形の設定

メニューの ファイル > 基本設定 > 設定 を選択して Settings を開き、右上の { } 設定（JSON）を開く を選択して User Settings を開きます。

右側の ユーザー設定 に追記します。

{
  // JavaScript
  "[javascript]": {
    // ファイルを保存するときにフォーマットする。
    "editor.formatOnSave": true
  },

  // PostCSS
  "[postcss]": {
    // ファイルを保存するときにフォーマットする。
    "editor.formatOnSave": true
  }
}