npm-scriptsで静的サイトの制作環境を構築 (3) 構文ハイライトのインストール~ファイル保存時に自動整形 (改)

Software

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

Visual Studio Codeの拡張機能をインストール

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

Visual Studio Codeの設定

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

メニューの [ファイル] [基本設定] [設定] を選択して [Settings] を開き、右上の [設定(JSON)を開く] を選択して [settings.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を選択します。

? 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

.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: { }でベンダー・プリフィックスを禁止しました。

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

Visual Studio Codeの拡張機能をインストール

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

stylelint-plusのVersion: 0.52.3 (Last updated: 2019/8/11 3:09:35)とstylelint-config-prettier@8.0.0の組み合わせはstylelint: Undefined rule unicode-bomのエラーが出て動作しないので、stylelint-plusがバージョンアップされていない場合は、Bump stylelint to 11.x.x by Snack-X · Pull Request #5 · hex-ci/vscode-stylelint-plus · GitHubから対策済みのstylelint-plus-0.52.3.vsix.zipをダウンロードし、解凍したstylelint-plus-0.52.3.vsixを [EXTENSIONS] の右上にある [その他の操作…] から [VSIX からのインストール…] をクリックしてインストールします。

作者のhex-ci (Hex) · GitHubではなく、有志のJounQin (JounQin) · GitHubが改変した拡張機能をインストールしたくない場合は、stylelint-config-prettierを7.0.0にバージョンダウンすることで対策することも出来ます。

yarn add stylelint-config-prettier@7.0.0 --dev

Visual Studio Codeの設定

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

メニューの [ファイル] [基本設定] [設定] を選択して [Settings] を開き、右上の [設定(JSON)を開く] を選択して [settings.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": {
    // For ESLint
    "source.fixAll.eslint": true
  },

  // 保存時にstylelintの自動補正を有効または無効にします。
  "stylelint.autoFixOnSave": true
}

コメント

タイトルとURLをコピーしました