typescript - 将 ESLint 添加到 Meteor + Vue + Typescript 项目

Question

我在使用 Meteor、Vue、Typescript 和 prettier 设置 ESLint 时遇到了麻烦。我可以成功解析和格式化 Typescript 文件，但它引发了 .vue 的语法错误文件。
ESLint 相关依赖

"@babel/plugin-transform-typescript": "^7.12.1",
"@meteorjs/eslint-config-meteor": "^1.0.5",
"@types/meteor": "^1.4.64",
"@types/mocha": "^8.0.3",
"@typescript-eslint/eslint-plugin": "^4.22.0",
"@typescript-eslint/parser": "^4.22.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-vue-typescript-eslint": "^1.1.7",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.9.0",

.eslinrc.js

module.exports = {
    root: true,
    env: {
        node: true,
        webextensions: true
    },
    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
    parserOptions: {
        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
        sourceType: 'module', // Allows for the use of imports
        ecmaFeatures: {
            jsx: true // Allows for the parsing of JSX
        }
    },
    settings: {
        vue: {
            version: 'detect' // Tells eslint-plugin-vue to automatically detect the version of Vue to use
        }
    },
    extends: [
        'plugin:vue/recommended',
        'eslint:recommended',
        'vue-typescript-eslint',
        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
        'plugin:prettier/recommended' // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
    ],
    rules: {
        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
        'no-unused-vars': 'warn'
    }
};

.prettierrc.js

module.exports = {
    semi: true,
    trailingComma: "all",
    singleQuote: true,
    printWidth: 120,
    tabWidth: 4
};

SamplePageContent.vue

<template>
  <v-row>
    <h4>Sample page content</h4>
  </v-row>
</template>

<script lang="ts">

import Vue from "vue";

export default Vue.extend( {
  components: {},
  props: {
    giftList: {
      type: Object
    }
  },
});
</script>

<style scoped>
</style>

我得到一个 ESLint: Parsing error: '}' expected.发生在 components部分。
我怎样才能让它解析/格式化我的 .vue文件正确吗？
更新 - 设置信息
这是我的问题，显示了最初用于设置我的项目的命令。
https://forums.meteor.com/t/creating-a-meteor-vue-typescript-project-that-uses-class-style-components/55778

meteor create --vue gift-list-app
meteor add typescript
meteor npm install --save-dev @types/meteor
meteor add nathantreid:vue-typescript-babel
meteor npm install --save-dev @babel/plugin-transform-typescript

如果缺少这些开发依赖项，请添加它们。

"devDependencies": {
    "@babel/plugin-transform-typescript": "^7.12.1",
    "@types/meteor": "^1.4.67",
    "@babel/core": "^7.4.4",
    "@babel/plugin-syntax-decorators": "^7.2.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/preset-typescript": "^7.3.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0"
}

这是一个 Meteor + Vue + Typescript我创建的示例项目。如果 ESLint 可以正确添加到这里，那就完美了。
https://github.com/Michael2109/meteor-vue-typescript-example

Answer 1

对于这些部分，我确实遵循了 [1] 中的教程:

下载 VSCode 的 ESLint 和 Prettier 扩展。

将 ESLint 和 Prettier 库安装到我们的项目中。在项目的根目录中，您需要运行: npm install -D eslint prettier

安装 eslint-config-prettier(禁用 ESLint 的格式)和 eslint-plugin-prettier(允许 ESLint 在我们输入时显示格式错误) npm install -D eslint-config-prettier eslint-plugin-prettier

最后一步是确保保存时使用 Prettier 格式。在 VSCode 中将 "editor.formatOnSave": true 插入到您的用户设置中。

我还将 Eslint 作为全局安装到我的 Ubuntu 并应用了问题中提到的 dev-deps。我还在 VSCode 中添加了 Vetur 插件并将 VSCode 更新到最新版本。
在 .eslint.js文件我有以下内容:

  parserOptions: {
      ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
      sourceType: 'module', // Allows for the use of imports
      extraFileExtensions: ['.vue'], // ADDED
      ecmaFeatures: {
          jsx: true // Allows for the parsing of JSX
      }
  },

从 VSCode Settings.json 我有这个:

  {
    "editor.formatOnSave": true,
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }

就在一切开始工作之前，我从 VS Code 那里得到了一个问题，即 lint 在某些文件上未处于事件状态。我使用“对所有文件执行此操作”激活，现在 lint 警告显示正常。
我试图在这里讲述我所做的每一步，但不能说 100% 成功了。
免责声明
我无法验证为什么提到的大括号问题出现在构造函数的组件部分。我把它当作一个错误，但不能说在哪一边:在代码上还是在 lint 上。关于其他问题 prettier做好东西和esLint发现许多错误和警告。也就是说，我认为这足以回答这个问题。
编辑:
你告诉过你在 WebStorm 中使用 Eslint。有一些设置 [2] 您可以在添加相关插件后激活它们。

要在当前项目中自动配置 ESLint，请打开设置/首选项对话框 Ctrl+Alt+S ，转至 Languages and Frameworks | JavaScript | Code Quality Tools | ESLint ，然后选择 Automatic ESLint configuration选项。

要在所有新项目中自动配置 ESLint，请打开“新项目设置”对话框 (File | New Projects Settings | Settings for New Projects)，转到 Languages and Frameworks | JavaScript | Code Quality Tools | ESLint ，然后选择 Automatic ESLint configuration选项。

要在保存时自动修复:

打开设置/首选项对话框 Ctrl+Alt+S ，转至 Languages and Frameworks | JavaScript | Code Quality Tools | ESLint ，然后选择 Run eslint --fix on save复选框。

在我的资料来源 [2] 上还有其他东西，但这些是“让它发挥作用”的东西，至少是一些可见的方式。
资料来源:
[1] How to configure Vue CLI 4 with ESLint + Prettier + Airbnb rules + TypeScript + Vetur?
[2] https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_verify_code