All Articles

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

stylelint * ESLint * Prettier

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

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

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

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

目次

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

Babel JavaScript をインストール

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

PostCSS Intellisense and Highlighting をインストール

Visual Studio Code に PostCSS Intellisense and Highlighting - Visual Studio Marketplace をインストールします。

Prettier のインストール

Prettier をインストール

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

yarn add prettier --dev

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

コードの整形はエディタと連携した方が使いやすいので、Visual Studio Code に Prettier - Code formatter - Visual Studio Marketplace をインストールします。

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-config-prettier をインストール

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

yarn add eslint-config-prettier --dev

ESLint の設定ファイルを編集

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

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb-base", "prettier"],
  parserOptions: {
    sourceType: "module",
  },
  root: true,
  rules: {},
};

extends: [ ] にルールを適用する順に記述、env: { browser: true } でブラウザのグローバル変数に対応、env: { es2021: true } で ECMAScript 2021 に対応、parserOptions: { sourceType: 'module' }import, export に対応しました。

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

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

pug-lint のインストール

pug-lint をインストール

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

yarn add pug-lint --dev

@prettier/plugin-pug をインストール

Prettier で Pug も整形出来るように @prettier/plugin-pug - npm をインストールします。

yarn add @prettier/plugin-pug --dev

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

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

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-recess-order をインストール

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

yarn add stylelint-config-recess-order --dev

stylelint の設定ファイルを作成

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

module.exports = {
  extends: ["stylelint-config-standard", "stylelint-config-recess-order"],
  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 をインストールします。

構文チェックと整形機能を設定

Visual Studio Code の設定

標準の構文チェックと整形機能を無効にし、ESLint、pug-lint、stylelint の構文チェックと Prettier の整形機能を有効にします。

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

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

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

  // 他のすべてのフォーマッタ設定よりも優先される、既定のフォーマッタを定義します。フォーマッタを提供している拡張機能の識別子にする必要があります。
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 貼り付けた内容がエディターにより自動的にフォーマットされるかどうかを制御します。フォーマッタを使用可能にする必要があります。また、フォーマッタがドキュメント内の範囲をフォーマットできなければなりません。
  "editor.formatOnPaste": true,

  // ファイルを保存するときにフォーマットします。フォーマッタが有効でなければなりません。ファイルの遅延保存やエディターを閉じることは許可されていません。
  "editor.formatOnSave": true,

  // エディターで入力後に自動的に行のフォーマットを行うかどうかを制御します。
  "editor.formatOnType": true,

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

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

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

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

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

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

Published Mar 21, 2023

ありふれた備忘録

いつか役立つかもしれないメモ

isonishi

小規模ウェブサイトの制作を請け負うフリーランサーです。