vue项目添加Eslint

Posted 2023-05-01

参考技术A 如果新创建项目，可以直接选择集成eslint

已存在的项目
该方法适合vue cli3及以上版本创建的项目，
可以直接使用vue add命令增加插件，并自动完成配置

运行vue add @vue/eslint
根据提醒输入y
选择标准模式Standard
选择保存时校验Lint on save

这时候会自动生成.eslintrc.js文件
所有的规则都可以在这里面增删

将 ESLint 添加到 Meteor + Vue + Typescript 项目中

【中文标题】将 ESLint 添加到 Meteor + Vue + Typescript 项目中

【英文标题】：Add ESLint to a Meteor + Vue + Typescript project

【发布时间】：2021-07-19 01:52:48

【问题描述】：

我在使用 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

【问题讨论】：

这篇文章是否包含有关该问题的任何见解？ ***.com/questions/58670850/…

很遗憾没有。我从头开始并添加了提到的依赖项并将其设置为 lint on save。它正在处理文件，但没有进行任何更改。

我得到它是为了给我来自 eslint 和更漂亮的错误。在保存时它也会自动运行那些。我没有得到的是，它给出了关于组件上大括号的错误。 Github 上的代码库真的运行正常吗？它是有效的代码吗？我从互联网上搜索了类似的代码，但找不到任何参考。如果我能知道那部分是否是错误，我就可以确定我的解决方案是否有意义，

我已经克隆了项目并运行了它，项目很好。我查看了组件，语法都是正确的。

【参考方案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

【讨论】：

如果我不使用 VSCode 怎么办？我正在为我的项目使用 WebStorm。我已经尝试按照您的步骤进行操作（忽略 VSCode 特定的步骤）。我必须将.eslint.js 更改为.eslintrc.js 才能找到并安装eslint-plugin-vue。我不再收到任何错误，但似乎什么也没发生。

查看我的编辑。它们展示了 lint 将如何自动运行，以便“发生某些事情”。

我之前在保存时启用了 lint，它不会在保存时进行任何更改。你使用的是什么版本的 ESLint？我正在使用7.26.0 而.eslint.js 显然不正确。例如。 sourceType、extraFileExtensions 和 exmaFeatures 未解决。它使用正确的语法吗？我能找到的所有示例都使用 .eslintrc.js 等。如果您采用我的示例项目并在 webstorm 中使用您的步骤，它会说找不到 eslint 配置。