tslintを使わずにtypescript系のlintエラー対応する方法

Question

tslintを使うと解決できますが、eslintだけ使って以下のエラーを解消する方法はありますでしょうか。
tslintは非推奨になるそうで使わない方針で考えてます

error: Parsing error: Unexpected token

  10 | })
  11 | export default class HeadLineListItem extends Vue {
> 12 |   @Prop({ type: String, required: true }) private title!: string;
     |                                                   ^
src/vue/app/components/Atoms/ArticleListHeadlineItem.vue:24:50:
  22 | })
  23 | export default class HeadLineListItem extends Vue {
> 24 |   @Prop({ type: String, required: true }) private title!: string;
     |                                                  ^

現在の.eslintrc設定

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": ["plugin:vue/essential", "eslint:recommended"],
  "rules": {},
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaFeatures": {
      "legacyDecorators": true
    }
  },
  "globals": {
    "jQuery": true,
    "googletag": true,
    "$": true
  }
}

Answer 1

最小構成だと下記のようになります。
parserをplugin:vue/recommendedから継承してvue-eslint-parserに、
parserOptions.parserを**@typescript-eslint/parser**に設定するのがミソです。

{
  "root": true,
  "extends": ["plugin:vue/recommended"],
  "parserOptions": {
    "parser": "@typescript-eslint/parser"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "no-undef": "off",
    "no-unused-vars": "off",
    "strict": "off"
  }
}

あとは依存パッケージをインストールするだけです。

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue

Comments

[Kimsehwa]

ありがとうございます。見事に動きました。