Vue + TypeScript の linter 設定メモ

はじめに

ライブラリの検証や学習のために Vue CLI でサンプルアプリケーションを作るのですが、初期設定だと思うようにフォーマットすることができなかったので色々模索してみた結果をまとめます。

方針

• できるだけシンプルに
• <template> は Vue.js の公式スタイルガイドに合わせる
• <script> は ESLint と Prettier でしっかり整形

結論

package.json

{
  "name": "vue-linter-setup",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.6.0",
    "@typescript-eslint/parser": "^4.6.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "eslint": "^7.12.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-prettier-vue": "^2.1.1",
    "eslint-plugin-vue": "^7.1.0",
    "prettier": "^2.1.2",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

.eslintrc.js

module.exports = {
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/recommended",
    "plugin:prettier-vue/recommended",
    // <template> に prettier を適用したくない場合は下記を記述しない
    // "prettier/vue"
  ],
  rules: {
    "prettier-vue/prettier": [
      "error",
      {
        semi: false,
      },
    ],
  },
  settings: {
    "prettier-vue": {
      SFCBlocks: {
        template: false, // <template> に prettier を適用しない
        script: true,
        style: true,
      },
    },
  },
  env: {
    node: true,
  },
}

ポイント

<template> には ESLint のみを適用

plugin:vue/recommended を設定すると、Vue スタイルガイドの優先度 A-C のすべてのルールが適用されます。 <template> のフォーマットはこれだけで十分だと感じました。むしろ prettier を実行するとこの良い感じのフォーマットが崩されてしまいます。

色々探してみた結果、eslint-plugin-prettier を拡張した eslint-prettier-vue を導入し、

.eslintrc.js

  settings: {
    "prettier-vue": {
      SFCBlocks: {
        template: false, // <template> に prettier を適用しない
        script: true,
        style: true,
      },
    },
  },

と設定することで <template> のみ prettier の対象外とすることができました。

この時 prettier/vue を edtends に記述するとうまく動かないので注意してください。

.eslintrc.js

  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/recommended",
    "plugin:prettier-vue/recommended",
    // <template> に prettier を適用したくない場合は下記を記述しない
    // "prettier/vue"
  ],

行末のセミコロンは付けない

これは好みの問題ですが、prettier はデフォルトだとセミコロンを行末に付けてしまうのでオフにしました。今後他にも追加、除外したくなるオプションはいくつかあるかもしれません。

.eslintrc.js

  rules: {
    "prettier-vue/prettier": [
      "error",
      {
        semi: false,
      },
    ],
  },

VSCode で保存時の自動整形を有効にしておくとより良い

settings.json

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

おわりに

linter の世界は流行り廃りが早いのでこの設定もすぐに使えなくなるかも...。もしくはもう既に非推奨かもしれません。自分のために書きましたが誰かの参考になれば幸いです。