【エラー解決方法】Delete `␍` eslint(prettier/prettier)

概要

Nuxt.jsで アプリ開発中に以下のエラーが所狭しと出力されたので、その対処方法について記載します。

Delete `␍` eslint(prettier/prettier)

開発環境

• OS : Windows
• IDE : Visual Studio Code
• Nuxt.js : 2.15.3
• eslint : 7.22.0
• prettier : 2.2.1

対処方法

先に結論から。
package.json の lintコマンドにオプション --fix を追記します。

package.json

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext \".js,.vue\" --ignore-path .gitignore . --fix" // 追記
  },

npm run lint を実行します。

> npm run lint

> nuxt-app@1.0.0 lint 
> eslint --ext ".js,.vue" --ignore-path .gitignore . --fix

解消されていることを確認します。

原因

prettier の End of Line のデフォルト値が lf なのに対して、コード内に crlf が含まれているため。

解説

--fix はlint実行時にコードを自動補正してくれるオプションです。
コード内に crlf が含まれていたら lf に自動変換します。

もし、LF以外の改行コードを利用したければ、 .prettierrc で宣言します。

.prettierrc

{
  "semi": false,
  "endOfLine": "cr"
  "singleQuote": true
}