自己紹介

はじめまして。プロトソリューションの西平と言います。現在は主にスマホアプリの開発・保守を行なっています。 2018年に入社して初めてスマホアプリの開発に携わり約4年、未だiOS/Android両方とも満足に実装できるとは言えませんが、なんとか頑張っています。

プロトソリューション入社前は別の会社で老舗のWebサイトの保守などを行なっていました。「スマホアプリってどうやって開発しているのだろう…？」と思っていたころ、アプリ開発を行なっているプロトソリューションを見つけて入社しました。入社当時はMacを触るのもほぼ初めてで四苦八苦したのを覚えています。

iOS/Androidの実装も未熟者ながら、最近Vue 3が出て気になりやってみようとしたら初歩の初歩で躓いたので、温かい目で見てくれたらと思います。

この記事は何？

ESLintとPrettierという名前だけ知っているようなWebフロント初学者が、Vue.jsやろうとしてその最初のリンターとフォーマッターの設定でハマったので、備忘録として一連の設定をまとめたものです。

いろいろ調べていく中でこのパッケージが何なのか、この設定はどういったものなのか整理する意味も込めて書きました。同じようにESLintやPrettierの入れ方がわからないといった方の参考になればいいなと思います。

要約

・eslint prettier eslint-config-prettier eslint-plugin-vueのパッケージを入れておけば最低限大丈夫（TypeScript使用する場合はTS用のパッケージも必要）

・VSCodeで使うときはESLintとPrettierの拡張機能を入れる

・VSCodeのsettings.jsonにeditor.formatOnSave editor.defaultFormatter editor.codeActionsOnSaveを追加する

・eslintrcのextendsにはVueのルール→TypeScriptのルール→Prettierのルールの順に記載する

・Vue CLIでプロジェクト作成する時はManually select featuresで最初に入れるものを決めた方が楽

プロジェクトを作成してみる

Defaultを選んだ状態から自動フォーマットできるまで、必要なパッケージや設定の簡易な解説を入れながら進められればと思います。
変更点がわかるようにGithubにリポジトリを作ってリンクしていますので、参考になればと思います。

使用したVue CLIのバージョンは下記です。

❯ vue -V
@vue/cli 4.5.15

👨🏻「プロジェクト作成するためのコマンドあったはず？vue createでできそう」

❯ vue create eslint_prettier_test
Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3) ([Vue 3] babel, eslint) # これ選んでしまった
  Manually select features # これ選んだら細かく選べる

ここでDefaultを選ぶとすぐさまパッケージのインストールが始まります。
インストールされるdevDependenciesのパッケージは下記の通りです。
ESLintに関係するパッケージはeslintと、eslint-plugin-vueが入っているのみです。（babel-eslintは本題とは関係ないので詳しく言及しません）

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },

・eslint
ESLint本体

・eslint-plugin-vue
.vueファイルの<template>と<script>を解析するためのプラグイン

・babel-eslint
JavaScriptの非標準の構文もlintできるようにするパッケージ

VSCodeの拡張機能をインストールしてみる

VSCodeでPrettierを使用してフォーマットしたり、ESLintで警告出すためには拡張機能を入れる必要があります。

👨🏻「そういえば、VSCodeで保存したらフォーマットするようにできたはず。ESLint？Prettier？」
👨🏻「調べたらESLint+Prettierがイケてるぽい」
👨🏻「とりあえず拡張機能あったからいれてみる」

.eslintrcを作ってみる

👨🏻「ESLint Prettierのページみたら.eslintrcをプロジェクト直下に作るって書いてある」
👨🏻「package.jsonにESLintの設定あった気が…？」

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

👨🏻「これを.eslintrcに書き出せばいいかな」
👨🏻「とりあえず.eslintrc.json作ってみた」

・.eslintrc.*
ESLintの設定を記載するファイル（[ドキュメント]）
プロジェクトルートに配置する必要がある
ファイル形式は.yaml .json .jsなどで記述できる

保存時にESLintかけてみる

👨🏻「eslint.autoFixOnSaveをsettings.jsonに書けばいい？」

👨🏻「なんか非推奨ぽい…editor.codeActionsOnSaveを使えって言われてる」

👨🏻「editor.codeActionsOnSave書いてみたけど、タブ幅とか改行はESLintでFixされないんだっけ…？保存しても何も変わらない…」
👨🏻「Prettierも入れてみよう」
※サンプルのため.vscodeフォルダをコミットしていますが、通常は.gitignoreに入れてコミットしないようにするはずです。

・editor.codeActionsOnSave
ファイル保存時に実行するアクションの定義
ESLint実行以外にもインポート文最適化の設定など入れることができる（source.organizeImports）

Prettierを導入してみる

👨🏻「とりあえずPrettier本体を入れてみる」

❯ yarn add -D prettier

👨🏻「適当にPrettierの設定拾ってきて、.prettierrc.jsonを作成っと…」
👨🏻「保存時にPrettierを適用するためには、editor.formatOnSaveとeditor.defaultFormatterが必要ぽい？」

👨🏻「お！既存のファイルで保存実行したらフォーマットされた！」

・.prettierrc.*
Prettierの設定ファイル
プロジェクトルートに配置する必要がある
ファイル形式は.yaml.json .js .tomlなどで記述できる

・editor.formatOnSave
保存時にVSCodeのフォーマット機能を実行する設定

・editor.defaultFormatter
VSCodeのフォーマット機能で使用するフォーマッターの設定

👨🏻「でも今のままだとPrettierのフォーマットとESLintのフォーマットが競合するところがあるから、うまく連携させないといけないみたい？」

👨🏻「ESLintとPrettierの連携で調べると、eslint-config-prettierとeslint-plugin-prettierを入れる記事もヒットするけど…eslint-plugin-prettierは非推奨になってる？」
参考: Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった

👨🏻「とりあえずeslint-config-prettierだけ入れてみる」

yarn add -D eslint-config-prettier

・eslint-config-prettier
ESLintのフォーマットルールの内、Prettierと競合するルールを無効化するパッケージ

.eslintrcの設定をしてみる

Prettierの設定を追加してみる

👨🏻「eslint-config-prettierのREADMEによると、eslintrcのextendsの最後にprettierを入れるみたい？」

Then, add “prettier” to the “extends” array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]

👨🏻「他の設定よりPrettierの設定を優先するために、配列の最後に追加するのか。追加してみる」

・extends
既に作られている設定を読み込み、上書きで設定を追加・変更できる項目
最後に追加された設定が前の設定を上書きするため、優先する設定は最後に追加する

eslint-plugin-vueの設定を追加してみる

👨🏻「後は…eslint-plugin-vueのドキュメントを見てみよう」
👨🏻「…プロジェクト作成時に最初から追加されているルールはplugin:vue/vue3-essentialだけど、他にもルールがあるみたい？」

“plugin:vue/vue3-essential” … base, plus rules to prevent errors or unintended behavior.
“plugin:vue/vue3-strongly-recommended” … Above, plus rules to considerably improve code readability and/or dev experience.
“plugin:vue/vue3-recommended” … Above, plus rules to enforce subjective community defaults to ensure consistency.

👨🏻「recommendedって付いているし、plugin:vue/vue3-recommendedにしておこう」
👨🏻「ドキュメントではeslint:recommendedもextendsの先頭になっているから移動してみる」

👨🏻「vue3-recommendedに変更したら新しく警告でてきた。ルール変わってるみたい」

👨🏻「parserの指定も必要ぽい？最初から書いていなかったのはなぜだろう…」
👨🏻「extendsした設定で書いていれば書かないでいいみたいなので、元の設定に書いていたのかな？」
👨🏻「わかりやすくするために、一応書いておこう」

・parser
ESLintがコードを解析するために使用するパーサーを指定する
デフォルトではEspreeというパーサーが使用される
ここで指定するvue-eslint-parserは.vueの<template>を解析できるパーサー

~~👨🏻「VSCodeのESLintはデフォルトで.vueを対象にしないって書かれているけどlintされている気がする…が一応書いておくかな」~~
→👨🏻 ESLint拡張機能のページ見てみるとeslint.validateはもう必要なさそう
　→ eslint.probeで.vueも指定されている

eslint.validate – an array of language identifiers specifying the files for which validation is to be enforced. This is an old legacy setting and should in normal cases not be necessary anymore.

TypeScriptを追加してみる

👨🏻「Vue 3からはTypeScriptをちゃんとサポートしてるみたいなのでTypeScript使いたい」
👨🏻「vue add @vue/typescriptでいけるっぽい」

❯ vue add @vue/typescript

📦  Installing @vue/cli-plugin-typescript...

yarn add v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 19 new dependencies.
info Direct dependencies
└─ @vue/cli-plugin-typescript@4.5.15
info All dependencies
├─ @types/parse-json@4.0.0
├─ @types/webpack-env@1.16.3
├─ @vue/cli-plugin-typescript@4.5.15
├─ at-least-node@1.0.0
├─ babel-code-frame@6.26.0
├─ builtin-modules@1.1.1
├─ diff@4.0.2
├─ fork-ts-checker-webpack-plugin-v5@5.2.1
├─ fork-ts-checker-webpack-plugin@3.1.1
├─ fs-monkey@1.0.3
├─ has-ansi@2.0.0
├─ js-tokens@3.0.2
├─ memfs@3.4.1
├─ microevent.ts@0.1.1
├─ ts-loader@6.2.2
├─ tslint@5.20.1
├─ tsutils@2.29.0
├─ worker-rpc@0.1.1
└─ yaml@1.10.2
Done in 6.89s.
✔  Successfully installed plugin: @vue/cli-plugin-typescript

// classスタイルで定義するかどうか
? Use class-style component syntax? Yes
// Babelを使用するかどうか
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
// 既存のJSファイルをTSファイルに変換するかどうか
? Convert all .js files to .ts? Yes
// コンパイルにJSで実装したファイルを含めるかどうか
// TSでしか書かん！ってならいらないはず
? Allow .js files to be compiled? Yes
// 宣言ファイルの型チェックをスキップするかどうか
? Skip type checking of all declaration files (recommended for apps)? Yes

🚀  Invoking generator for @vue/cli-plugin-typescript...
📦  Installing additional dependencies...

yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 14.59s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-typescript

👨🏻「色々ファイル更新された」

👨🏻「eslintrcのextendsに@vue/typescriptが追加されたけど、prettierの後ろに追加されている」
👨🏻「prettierが最後じゃないといけないはずなので順番を入れ変えよう」

完了！

ここまでの設定でコード書いて保存したらフォーマットがかかるはずです！
全体の変更はリポジトリを参照ください。

ここまで個別にパッケージを入れて設定してきましたが、最初に書いたようにVue CLIでDefaultではなManually select featuresを選んだ方が簡単にできます。
プロジェクト作成から行うならこれのほうが断然いいです。
ただ、個人的にはプロジェクト作成時に入ったパッケージ色々あるけど、それぞれ何なのかがわからない…ということがあったため、ESLintやPrettierのパッケージについて調べることができて勉強になりました。
では、良い自動フォーマット体験を！

別途ハマったこと

色々試行錯誤しているときに、パッケージを入れても無いって言われる時がありました。
何故か？
コンテナ作ってその中で作業していたのですが、ホスト側でyarn addしていたからでした。
コンテナのnode_moduleディレクトリはホストと同期しないようにしていたので、ホストで入れたパッケージがコンテナ側に入らないのは当然です。
VSCodeのターミナルタブ使っていれば大丈夫だったはずですが、別途ターミナル開いてやってたので起きた事象ですね。（気づくのに結構時間掛かりました…）

最後までお読みいただき、ありがとうございました。