概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その８６ )( eslint を 5.16.0 → 6.8.0 へ、jest を 24.7.1 → 26.0.1 へバージョンアップし、windows-build-tools を 5.1.0 → 4.0.0 へバージョンダウンする ) の続きです。

今回の手順で確認できるのは以下の内容です。
- postcss-cli を 6.1.2 → 7.1.1 へ、prettier を 1.16.4 → 2.0.5 へ、stylelint を 9.10.1 → 13.3.3 へバージョンアップします。

参照したサイト・書籍

Prettier 2.0 “2020”
https://prettier.io/blog/2020/03/21/2.0.0.html
Prettier 2.0 の主要な変更
https://qiita.com/sosukesuzuki/items/50a5ed5e7079eb9da0fe

手順

postcss-cli を 6.1.2 → 7.1.1 へバージョンアップする

以下のコマンドを実行します。

npm install --save-dev postcss-cli@7.1.1

npm test、npm run build コマンドを実行すると特にエラーが出ずに終了しました（キャプチャは npm run build のみ）。

f:id:ksby:20200506230357p:plain

Web アプリを起動して画面が正常に表示されていることも確認します（キャプチャは省略）。

prettier を 1.16.4 → 2.0.5 へバージョンアップする

以下のコマンドを実行します。

npm install --save-dev prettier@2.0.5

npm test コマンドを実行するとテストは全て成功しました。

f:id:ksby:20200506231311p:plain

npm test コマンド実行時には prettier:format、prettier:format-test の npm scripts が実行されて prettier によるフォーマットが行われるようにしていますが、今回は全部の js ファイルがフォーマットされていました。以下の内容でした。

function() → function () と括弧の前にスペースが入るようになった。
配列の最後の要素の後にカンマが追加されるようになった。
ファイルの改行コードを CRLF にしていたが LF に変更された。

Prettier 2 の変更点は Prettier 2.0 “2020” に記載されています。

npm run build コマンドを実行すると大量の xpected linebreaks to be 'CRLF' but found 'LF' のエラーメッセージが出力されました。

f:id:ksby:20200506233005p:plain

このエラーを解消するために .eslintrc.js を以下のように変更します。

module.exports = {
  extends: ["airbnb-base/legacy", "plugin:prettier/recommended"],
  env: {
    jquery: true
  },
  rules: {
    // requires to declare all vars on top of their containing scope
    "vars-on-top": "off",

    // require function expressions to have a name
    // http://eslint.org/docs/rules/func-names
    "func-names": "off",

    // disallow mixed 'LF' and 'CRLF' as linebreaks
    // http://eslint.org/docs/rules/linebreak-style
    "linebreak-style": ["error", "unix"],

    // specify whether double or single quotes should be used
    quotes: ["error", "double", {avoidEscape: true}],

    // disallow use of variables before they are defined
    "no-use-before-define": [
      "error",
      {functions: false, classes: true, variables: true}
    ]
  }
};

"linebreak-style": ["error", "windows"], → "linebreak-style": ["error", "unix"], に変更します。

再び npm run build コマンドを実行すると今度は特にエラーが出ずに終了しました。

f:id:ksby:20200506233744p:plain

.js ファイルの改行コードが LF になるので .gitattributes を新規作成して以下の内容を記述します。

*           text=auto
*.js        text eol=lf

また IntelliJ IDEA の Settings ダイアログを開き Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint に移動して「Node interpreter」を 12.16.3 に変更します。

f:id:ksby:20200506234742p:plain

stylelint を 9.10.1 → 13.3.3 へバージョンアップする

以下のコマンドを実行します。

npm install --save-dev stylelint@13.3.3
npm install --save-dev stylelint-config-standard@20.0.0

IntelliJ IDEA の Settings ダイアログを開き Languages & Frameworks -> Style Sheets -> Stylelint に移動して「Enable」をチェックし「Stylelint package」を 13.3.3 に変更します。

f:id:ksby:20200507000615p:plain

npm test、npm run build コマンドを実行すると npm run build の時に２種類のメッセージが出力されました。

f:id:ksby:20200507233232p:plain f:id:ksby:20200507233358p:plain

Unexpected empty line before rule (rule-empty-line-before)
Unexpected empty line before at-rule (at-rule-empty-line-before)

メッセージが出ないようにするために stylelint.config.js を以下のように変更します。

"use strict";

module.exports = {
  extends: "stylelint-config-standard",
  rules: {
    "comment-empty-line-before": [
      "always",
      {
        ignore: ["after-comment"],
      },
    ],
    indentation: 4,
    "number-leading-zero": "never",
  },
};

ファイルの先頭に "use strict"; を追加します（module.exports の module の部分に赤波線が表示されていたため）。
"at-rule-empty-line-before": [ ... ] を削除します。
"rule-empty-line-before": "never-multi-line", を削除します。

再度 npm run build を実行すると今度はメッセージが出ませんでした。

f:id:ksby:20200507234316p:plain

最後に各種コマンドや build で問題がないか確認する

最後にコマンド、build で問題がないか一通り確認します。

npm test コマンドは問題ありませんでした。。。と思っていましたが、前からずっと A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --runInBand --detectOpenHandles to find leaks. のメッセージが出ていました。

f:id:ksby:20200507235017p:plain （.....途中省略.....） f:id:ksby:20200507235535p:plain

package.json を以下のように変更します。

  "scripts": {
    "test": "run-s prettier:format prettier:format-test jest",
    "jest": "jest --config=jest.config.json --coverage --runInBand --detectOpenHandles",
    "postinstall": "run-s clean:static-dir copy:all",
    ..........