All Articles

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

Pug * PostCSS * Babel * webpack * Browsersync

WindowsVisual Studio CodeYarnnpm-scriptsPugPostCSSBabelwebpack で静的サイトの制作環境を構築した際のメモ。(構文ハイライトのインストール~ファイル保存時に自動整形)

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

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

目次

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

Babel JavaScript をインストール

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

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

Visual Studio Code に postcss-sugarss-language – 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 を有効にします。

メニューの ファイル > ユーザー設定 > 設定 をクリックして設定を開き、右上の 設定(JSON)を開く をクリックして settings.json に追記します。

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

Prettier のインストール

Prettier をインストール

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

yarn add prettier --dev

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 プロジェクト・フォルダのパス

eslint-config-airbnb-base と eslint-plugin-import をインストール

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

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

eslint-plugin-prettier をインストール

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

yarn add eslint-plugin-prettier --dev

eslint-config-prettier をインストール

ESLint と Prettier が競合しないよう、eslint-config-prettier – npm をインストールします。

yarn add eslint-config-prettier --dev

ESLint の設定ファイルを編集

プロジェクト・ルートの .eslintrc.js ファイルを編集します。

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: ['airbnb-base', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 6,
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        arrowParens: 'always',
        singleQuote: true,
        trailingComma: 'es5',
      },
    ],
  },
};

extends: [ ] にルールを適用する順に記述、env: { browser: true } でブラウザのグローバル変数に対応、env: { es6: true }parserOptions: { ecmaVersion: 6 } で ECMAScript 6 に対応、rules: { 'prettier/prettier': [ ] } に Prettier のオプションを追加しました。

stylelint のインストール

stylelint をインストール

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

yarn add stylelint --dev

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

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

yarn add stylelint-config-standard --dev

stylelint-order と stylelint-config-rational-order をインストール

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

yarn add stylelint-order stylelint-config-rational-order --dev

stylelint-prettier をインストール

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

yarn add stylelint-prettier --dev

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

stylelint と Prettier が競合しないよう、stylelint-config-prettier – npm をインストールします。

yarn add stylelint-config-prettier --dev

stylelint の設定ファイルを作成

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

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-rational-order',
    'stylelint-prettier/recommended',
  ],
  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: { } でベンダー・プリフィックスを禁止しました。

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

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

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

ESLint と stylelint 拡張機能の設定

拡張機能のインストールが完了したら、標準の検証機能と保存時の整形機能を無効にし、ESLint と stylelint の自動補正を有効にします。

メニューの ファイル ユーザー設定 設定 をクリックして設定を開き、右上の 設定(JSON)を開く をクリックして settings.json に追記します。

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

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

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

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

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

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

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

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

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

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

  // 保存時に実行されるコードアクションの種類
  "editor.codeActionsOnSave": {
    // 保存時にESLintの自動補正を有効または無効にします。
    "source.fixAll.eslint": true,
    // 保存時にstylelintの自動補正を有効または無効にします。
    "source.fixAll.stylelint": true
  }
}