vscode + vue.js + typescript + eslint + prettier + airbnb で自分向きの環境を整える (2)

ゴール再掲

vue-cli (ui) で生成したプロジェクトをベースにしたい
TypeScript つかいたい
スタイルガイドのベースとしては airbnb
スタイルガイドにそぐわない記述をしたときには、エディタ中に波線がでて、間違っていることをおしえてほしい
保存をしたときには、自動的にスタイルを修正してほしい
(できれば整形コマンドを手で実行したときにも、同じスタイルに修正してほしい)
~~できれば package.json に設定を集約したい~~ 各種設定ファイルは package.json から独立させる

最後の項目は方針を変え、 eslint 等の設定を独立ファイルに置くようにした。 (他のプロジェクトでも独立して扱っていることが多いので)

アプローチを変え、 vue-cli でプロジェクトを作成し、不満なところを解消していくことにした。

vue-cli でのプロジェクト生成

Features
- TypeScript
- Linter / Formatter
Linter / Formatter config
- ESLint + Prettier
Additional lint features
- Lint on save
placing config for Babel, ESLint, etc.
- In dedicated config files

この時点で不満なこと

ts ファイル
- 不整合があっても波線もでない
vue ファイルの ts
- 不整合があると波線はでる
- 保存時に整形されない

vue ファイルで保存時に整形されるようにする

vscode の設定 (.vscode/settings.json) に以下を追加する。

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

ts ファイルに linter がかかるようにする

eslintrc で parser として @typescript-eslint/parser を指定する。

--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,6 +11,7 @@ module.exports = {
     "@vue/prettier/@typescript-eslint"
   ],
   parserOptions: {
+    "parser": "@typescript-eslint/parser",
     ecmaVersion: 2020
   },
   rules: {

vue.js の場合 root 直下の parser 設定子ではなく parserOptions の下に設定することに注意。

(root 直下の parser には vue-eslint-parser が指定されている)

Airbnb style を適用する

この時点で lint rule としては vue の essential と eslint の recommended のみが指定された状態である。もうすこし厳しい (ポリシーに色のある) Airbnb style を適用する。

$ npm i -D eslint-config-airbnb-base eslint-plugin-import

(eslint-plugin-import は eslint-config-airbnb のために必要)

eslintrc の extend にも指定する。

--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
   extends: [
     "plugin:vue/essential",
     "eslint:recommended",
+    "airbnb-base",
     "@vue/typescript/recommended",
     "@vue/prettier",
     "@vue/prettier/@typescript-eslint"

prettier を設定する

@vue/prettier (@vue/eslint-config-prettier) が extend している eslint-config-prettier により、Prettier と競合する eslint の設定が消されている。 (たとえば、 Airbnb style では single quote 推奨だが、 double quote が強制されている)

よって、 Prettier で設定できる範囲の Airbnb style を指定する必要がある。

.prettierrc として以下のファイルを置く。

{
    "printWidth": 100,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "arrowParens": "avoid"
}

semi はもともと有効になっているが、念のために記述した。また、 arrowParens も、 (デフォルトは always であるにもかかわらず) どれかの plugin の影響で avoid になっているが、これも念のために記述した。

eslintrc.js を eslintrc.json に変換する

eslintrc.js だと vscode の autocompletion (IntelliSense) が効かない ( .eslintrc.js does not have suggestions · Issue #124 · microsoft/vscode-eslint · GitHub ) ので、 json 形式に変換する。

ただ、 js だと process.env をみて no-console, no-debugger あたりの設定を変更することができていたのが、静的な json で書く結果、固定値しか指定できなくなってしまう。

まとめ

これで当初のゴールが達成されたと思う。

ただし

(できれば整形コマンドを手で実行したときにも、同じスタイルに修正してほしい)

については、未検証。

最終的な .eslintrc.json は以下のようになった。

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended",
    "airbnb-base",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint"
  ],
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "ecmaVersion": 2020
  },
  "rules": {
    "no-console": "warn",
    "no-debugger": "warn"
  }
}

実際にコードを書いていくと、 rules にいろいろ指定する必要があるが、それはまたおいおい。