📝

Vue3（Javascript）にFlat ConfigでESLintとPrettierを設定する

2024/12/10に公開

ESLint

Prettier

tech

この記事は、ラクスパートナーズ AdventCalendar 2024の10日目の記事です！

はじめに

既存のVue3（JavaScript）プロジェクトにESLintとPrettierを導入することになったのですが、ReactやTypeScriptの記事はあれど、ピンポイントで欲しい記事がなく手間取ったので、今後同じような人が現れたときの手助けになればと思い、メモを残すことにしました。

また、ESLint v10.0.0でeslintrcが削除されたそうなので、現在デフォルトのFlat Configにて設定をしました。

ESLintの導入

記事によって導入方法はいろいろでしたが、自分は公式ドキュメントに沿って行いました。

インストール

npm init @eslint/config@latest

設定内容

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · javascript
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, eslint-plugin-vue
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

Prettierとの競合を解消
ESLintとPrettierのルールとで競合が発生しないように設定します。

npm install --save-dev eslint-config-prettier

eslint.config.mjs

...
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  ...
  eslintConfigPrettier,
];

Prettierの導入

こちらも公式ドキュメント通りにやっていきます。

インストール

npm install --save-dev --save-exact prettier

.prettierrcを作成
エディターやその他ツールにPrettierを使用していることを知らせるための空の設定ファイルを作成します。

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

.prettierignoreを作成

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

vueファイルだけフォーマットしたいから、jsファイルは対象外にしたいよって場合は以下のように追記します。

.prettierignore

# Ignore artifacts:
build
coverage
*.js

実行

実行しやすくするためにpackage.jsonのscriptsに以下を追記します。
※resources/js/~の部分はあくまで例です

package.json

"scripts": {
  "lint": "eslint -c eslint.config.js resources/js/**/*.vue --fix",
  "format": "prettier ./resources/js/**/* --write",
  "fix": "npm run format & npm run lint"
},

下記コマンドによってESLintとPrettier同時に実行できます。

npm run fix

eslint.config.jsにrulesを追加したい場合

eslint.config.mjs

export default [
  ...
  eslintConfigPrettier,
  {
    rules: {
      "vue/multi-word-componet-names": "off",
      "vue/require-default-prop": "off",
      "vue/prop-name-casing": "off",
    },
  },
];

はじめに

ESLintの導入

Prettierの導入

実行

eslint.config.jsにrulesを追加したい場合

Discussion