vscode + vue.js + typescript + eslint + prettier + airbnb で自分向きの環境を整える (1)
タイトルと同じようなキーワードでググれば情報はいっぱいでてくるんだけど、鮮度とかの問題もあるのか、やりたいことに違いがあるのか、サイトによって若干内容に差がある。なので、まずは自分なりの requirement を決めて、それを満たすような vscode を整えたい。
つまり、これは個人的な備忘録であって、他の人の参考になるよう書かれた情報ではないというエクスキューズです*1。
自分のゴール
- vue-cli (ui) で生成したプロジェクトをベースにしたい
- TypeScript つかいたい
- スタイルガイドのベースとしては airbnb
- スタイルガイドにそぐわない記述をしたときには、エディタ中に波線がでて、間違っていることをおしえてほしい
- 保存をしたときには、自動的にスタイルを修正してほしい
- (できれば整形コマンドを手で実行したときにも、同じスタイルに修正してほしい)
- できれば package.json に設定を集約したい*2
つまり IntelliJ で SaveAction plugin 使って自動整形を有効にしたときと同じような感覚がほしい。
今日の進捗
まずは vue-cli ベースのコードではなく、 TypeScript ではなく JavaScript でゴールに近いことができることをめざす。
devDependencies に追加
{ "devDependencies": { "eslint": "^6.8.0", "eslint-config-airbnb-base": "^14.1.0", "eslint-config-prettier": "^6.11.0", "eslint-plugin-import": "^2.20.2", "eslint-plugin-prettier": "^3.1.3", "prettier": "^2.0.5" } }
eslint-plugin-import がなぜ必要なのかわかってないが、これいれないとなぜかうまくいかなかった。eslint-config-airbnb-base が必要としている?
eslint-plugin-prettier は使わないほうがいいよーという記事もあったんだけど、自分のやりたいことの感じだと、あったほうがよかった。このへんは後述している。
eslint の設定
ゴールに書いたように、いまのところ package.json に eslint の設定も書いている。
{ "eslintConfig": { "root": true, "env": { "node": true, "browser": true }, "extends": [ "airbnb-base", "prettier" ], "parserOptions": { "ecmaVersion": 2020 }, "plugins": [ "prettier" ], "rules": { "prettier/prettier": [ "error" ] } } }
上でも書いたように eslint-plugin-prettier 使ってる。
まだおためしコードしか書いていない規模感だから問題ないだけかもしれない。
vscode の設定
いったんはワークスペースの設定 (.vscode/settings.json) に書いてる。
{ "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }
formatOnSave を無効化しつつ、 save 時の code action として eslint の fixAll を走らせて、 eslint plugin で prettier を追加しているので、見た目の reformat も走る、みたいなことになっているのじゃないかなと自分では思っている。
ふりかえり
eslint-plugin-prettier を外しつつ vscode の editor.formatOnSave を true にするという方策もありそう (というか最近の主流?) だけど、それすると自分の環境では prettier 的に不正な入力時の波線がでなかった (もちろん eslint 的に不正な入力には波線がでる) ので、このような設定になった。
どうせ保存するときに auto format かかるし、波線にここまでこだわってもしかたがないのかもしれない。
*1:そもそも Visual Studio Code も JavaScript (TypeScript) エコシステムもまったくくわしくない。
