Vue.js prettierをインストールしたらエラーが出まくった

jintajavascript・vue.js

vueプロジェクトを作成するときにカスタム設定でprettierをインストールできるようになるが、これがWindowsだといろいろとめんどかったので消した。

改行コードやシングルクォート、カンマやセミコロンなどいろいろエラーが出る。

ESlintだけあればいいので、アンインストールする。

npm uninstall prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.js ファイルを開き、Prettier関連の設定を削除

.prettierrc ファイルがある場合は削除

以下はあまりないかもだが、

VSCodeを使用している場合、settings.json から Prettier 関連の設定を削除

package.json の scripts セクションから Prettier 関連のコマンドがあれば削除

以上を終えたら以下のコマンドでコード修正

npx eslint --fix src

キャッシュをクリアして再度ESLintを実行:

npm run lint -- --cache --fix
--cacheがあると前回から変更されたファイルのみ実行
ほかには、
npm run lint:fix

コミット前にリントするのが便利なので設定しておくのもいい。

コミット前の自動修正の設定

ESLintのエラーを自動的に修正する方法はいくつかあります。以下にその方法を紹介します。

1. Pre-commit Hookの設定

huskyとlint-stagedを使用して、コミット前に自動的にESLintを実行し、修正する方法です。

  1. huskyとlint-stagedのインストールbashコードをコピーするnpm install husky lint-staged --save-dev
  2. package.jsonの設定package.jsonに以下の設定を追加します。jsonコードをコピーする"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,vue}": [ "eslint --fix", "git add" ] }

これにより、コミットする前にESLintが自動的に実行され、修正される。

VS Codeで保存した時の自動修正

VSCodeを使用している場合、保存時に自動的にESLintを実行するように設定できます。

  1. ESLint拡張機能のインストールVSCodeの拡張機能マーケットプレイスからESLint拡張機能をインストールします。
  2. 設定の追加VSCodeの設定ファイル（settings.json）に以下を追加します。jsonコードをコピーする{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }

これにより、ファイルを保存するたびに自動的にESLintのエラーが修正されます。