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

投稿日:

WindowsVisual Studio CodeYarnnpm-scriptsPugPostCSSBabelwebpackで静的サイトの制作環境を構築した際のメモ。

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

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

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

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

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

Visual Studio Codeの設定

拡張機能のインストールが完了したら、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: { }でベンダー・プリフィックスを禁止しました。

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

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

Visual Studio Codeの設定

拡張機能のインストールが完了したら、標準の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を選択します。

? 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 - npmeslint-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に対応しました。

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

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

Visual Studio Codeの設定

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

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

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

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

Prettierのインストール

Prettierをインストール

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

yarn add prettier --dev

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

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

prettier-eslintをインストール

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

yarn add prettier-eslint --dev

Visual Studio Codeの設定

メニューの [ファイル] [基本設定] [設定] を選択して [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

Visual Studio Codeの設定

メニューの [ファイル] [基本設定] [設定] を選択して [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のファイル保存時に自動整形するよう設定します。

Visual Studio Codeの設定

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

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

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

  // PostCSS
  "[postcss]": {
    // ファイルを保存するときにフォーマットする。
    "editor.formatOnSave": true
  },
}
The following two tabs change content below.

isonishi

小規模ウェブサイトの制作を請け負うフリーランサーです。今どきのフロントエンドエンジニアより昔ながらのコーダーの方が近いと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です