将 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
};

示例页面内容.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] 中的教程来完成这些部分：

\n

\n
1. 下载 VSCode 的 ESLint 和 Prettier 扩展。
\n
2. 将 ESLint 和 Prettier 库安装到我们的项目中。在您的项目\xe2\x80\x99s 根目录中，您需要运行： npm install -D eslint prettier
\n
3. 安装 eslint-config-prettier （禁用 ESLint 格式化）和 eslint-plugin-prettier （允许 ESLint 在我们键入时显示格式错误） npm install -D eslint-config-prettier eslint-plugin-prettier
\n
4. 最后一步是确保保存时格式更漂亮。将 "editor.formatOnSave": true 插入 VSCode 中的用户设置中。
\n

\n

我还将 Eslint 安装为 Ubuntu 的全局，并应用了问题中提到的 dev-deps。我还在 VSCode 中添加了 Vetur 插件，并将 VSCode 更新到最新版本。

\n

在.eslint.js文件中我有以下内容：

\n

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

\n

从 VSCode Settings.json 我有这个：

\n

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

\n

就在一切开始工作之前，我收到 VS Code 的一个问题，即 lint 在某些文件上未激活。我激活了“对所有文件执行此操作”，现在 lint 警告显示得很好。

\n

我试图在这里讲述我所做的每一步，但不能说 100% 是哪一步成功了。

\n

免责声明

\n

我无法验证为什么提到的大括号问题出现在构造函数的组件部分。我将其视为错误，但不能说是在哪一边：在代码上还是在 lint 上。在其他问题上prettier做出了好东西并esLint发现了许多错误和警告。也就是说，我认为这足以回答这个问题。

\n

编辑：

\n

您告诉过您在 WebStorm 中使用 Eslint。有一些设置 [2]，您可以在添加相关插件后激活它们。

\n

\n

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

  \n
\n

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

  \n
\n

\n

要在保存时自动修复：

\n

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

\n

在我的资料来源 [2] 上还有其他东西，但这些是“使其发挥作用”的东西，至少是某种可见的方式。

\n

资料来源：

\n

[1]如何使用 ESLint + Prettier + Airbnb 规则 + TypeScript + Vetur 配置 Vue CLI 4？

\n

[2] https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_verify_code

\n