vue3 解决 ESLint 各类型错误

更新日期: 2022-07-15阅读: 1.6k标签: eslint

前期项目中忽略了 eslint 检查,导致一运行 npm run lint 出现两千多条错误(இдஇ; ) 造孽啊
花了两三天搞完,做个错误汇总。

环境和配置

项目用 vue@3.2 + vite + ant-design@6.0

关于eslint 配置的用法可参考:ESLint中文
eslint 有专门应用于 vue 的插件:eslint-plugin-vue
大致贴一下版本依赖

devDependencies: {
    "@babel/eslint-parser": "^7.18.2",
    "eslint": "^8.7.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jest": "^25.7.0",
    "eslint-plugin-vue": "^8.3.0",
}

eslint 的配置采用 JS 文件格式,经过几次修改已经忘了一开始的内容,只贴基础配置如下:

// .eslintrc.js
module.exports = {
    // 只作用于当前目录
    root: true,
    // 运行环境
    env: {
        node: true,
        es6: true,
    },
    // 解析器
    parser: '@babel/eslint-parser',
    // 解析器选项
    parserOptions: {
        sourceType: 'module',
    },
    // 插件
    plugins: ['import'],
    // 扩展配置
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:import/recommended',
        'prettier',
    ],
    // 启用规则
    rules: {},
    // 全局变量
    globals: {
        h: true,
    },
    // 为指定文件指定处理器
    overrides: [
        {
            files: ['*.vue', '*.jsx'],
            parser: 'vue-eslint-parser',
            parserOptions: {
                ecmaVersion: 2018,
            },
            rules: {}
        }
    ],
}

ERROR: Parsing error: Unexpected token .

错误代码

const isOpen = data?.form?.isOpen || false;

原来是无法识别可选链操作符(?.),但是扩展运算符没问题,看了eslint 的配置,发现是 ECMAScript 的版本设置了2018(ES9),而可选链操作符是 ES2020(如果没记错),修改配置就可以了

// .eslintrc.js
module.exports = {
    parserOptions: {
        // ES版本,最新可设置 2022 or "latest",overrides 中配置了有需要也要同步修改
        ecmaVersion: 2020,
        sourceType: 'module',
    }
}

ERROR: Unable to resolve path to module

错误代码:

import Upload from '@/components/upload/index.vue'

路径引用错误??看起来没毛病,vite.config.js中明明配置了短链

resolve: {
    alias: {
        '@': pathResolve('src'),
    }
}

但 eslint 并不会自动读取 vite 的配置,因此 eslint 也要加上对应配置:

// .eslintrc.js
module.exports = {
    settings: {
        'import/resolver': {
            alias: {
                map: ['@': './src']
            }
        }
    }
}

另外引入 vue 文件需要加上后缀.vue,否则也会报相同错误。


ERROR: 'ref' is not defined

错误代码:

setup(){
    const isOpen = ref(false);
    return {
        isOpen,
    }
}

运行都没报错,怎么突然 undefined 了??
等等,因为偷懒,vue 的语法糖都是unplugin-auto-import每个文件自动引入的:

// vite.config.js
import autoImport from 'unplugin-auto-import/vite';

autoImport({
    imports: [
        'vue',
        'vue-router',
    ]
})

所以也要让 eslint 知道,先生成一个包含所有变量的文件:

// vite.config.js
autoImport({
    ...last,
    eslintrc: {
        // 已存在文件设置默认 false,需要更新时再打开,防止每次更新都重新生成
        enabled: false,
        // 生成文件地址和名称
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true,
    }
})

上面的enabled在生成文件后建议关闭,否则每次更新都会重新生成。
扩展到 eslint:

// .eslintrc.js
module.exports = {
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:import/recommended',
        'prettier',
        './.eslintrc-auto-import.json'
    ],
}

ERROR: vue/no-mutating-props

错误代码:

<!-- parent.vue -->
<template>
    <Child v-model:open="openModal" />
</template>
<script>
export default{
    setup(){
        const openModal = ref(false);
        return {
            openModal,
        }
    }
}
</script>

<!-- child.vue -->
<template>
    <a-modal v-model:visible="open"></a-modal>
</template>

<script>
export default{
    props: {
        open: {
            type: Boolean,
            default: true,
        }
    },
}
</script>

这是个低级错误,vue3支持多个参数双向绑定,但是子组件不能直接修改props,需要转换一下:

方法一:用computed代替

<template>
  <a-modal v-model:visible="isOpen"></a-modal>
</template>

<script>
export default{
  props: {
      open: {
          type: Boolean,
          default: true,
      }
  },
  setup(props, { emit }){
      const isOpen = computed({
          get: () => {
              return props.open;
          },
          set: (value) => {
              emit('update:open', value);
          },
      });

      return {
          isOpen,
      }
  },
}
</script>

方法二:用watch监听

<template>
  <a-modal v-model:visible="isOpen"></a-modal>
</template>

<script>
export default{
  props: {
      open: {
          type: Boolean,
          default: true,
      }
  },
  setup(props, { emit }){
      const isOpen = ref(props.open);
      
      watch(
          () => isOpen.value,
          (value) => emit('update:open', value)
      );

      return {
          isOpen,
      }
  },
}
</script>

ERROR: no-console

错误代码:

console.log(data);

eslint 的规则设定了不能有console,当然可以改配置:

// .eslintrc.js
rules: {
    'no-console': 'off',
    // or:
    'no-console': [2, { allow: ['warn', 'error'] }],
    // or:
    'no-console': process.env.NODE_ENV === 'production' ? [2, { allow: ['warn', 'error'] }] : 'off'
}

提这个错误是为了引入下面的问题,在某些地方需要打印但不希望 eslint 报错,可以让其忽略检查:

// 忽略整个文件在第一行加
/* eslint-disable */

// 忽略一段代码检查
/* eslint-disable */
...this our codes;
/* eslint-enable */

// 忽略一行代码检查
console.log(data); // eslint-disable-line

// 忽略下一行代码检查
// eslint-disable-next-line
console.log(data);

那么在<template>中呢?

<template>
    <!-- eslint-disable -->
    <div v-for="item in options">{{ item }}</div>
</template>

然后发现不行,会报vue/require-v-for-key错误,注释失败。
找了各种文章最后发现是自己的锅Ծ‸Ծ,找不出问题的时候还是要看官方文档,在eslint-plugin-vue已有说明vue/comment-directive规则就是用于忽略代码检查,一看 eslint 的文件配置果然是关闭了:

// .eslintrc.js
rules: {
    'vue/comment-directive': 'off',
}

改为error,完美

来源:https://segmentfault.com/a/1190000042177952

链接: https://fly63.com/article/detial/11887

你不知道的Vuejs - 使用ESLint检查代码质量

Javascript 是一门弱类型语言,所以语法检查变得尤为重要。因此对 Javascript 进行语法检查的工具应运而生,目前 ESLint 使用最为广泛。这篇将讲解如何将 ESLint 集成到我们的项目中。

vue中关于eslint,以及如何在vue项目中关闭或使用ESLint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。 由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要。 这篇文章主要讲解如何在vue项目中关闭或使用ESLint

ESLint_JS代码检查工具

ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。本文将详细介绍ESLint

Eslint规则_ESLint常见命令

详解 ESLint 规则,规范你的代码,ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。

ESLint规则配置说明

有的时候多人开发,代码的风格,用的代码编辑器都各不相同,所以为了大家能保持一种统一的风格,ESLint就可以帮我们检查代码的格式,和风格。

vue-cli3 取消eslint 校验代码

vue create hello-world创建项目的时候选择了Linter / Formatter,所以写代码的时候会有代码规范检查,怎么才能关闭这个校验呢?

如何在 React 项目中整合 Eslint 和 Prettier?

首先,我们使用官方提供的脚手架 create-react-app 来创建一个项目:Eslint 是一个可以检验代码,并给出报告的工具。它的目标是保证代码的一致性,避免错误。Eslint 为我们提供了 ECMAScript/JavaScript 规范的代码校验

webpack插件ProvidePlugin的使用方法和eslint配置

配置 webpack.config.js文件里 plugins 属性,配置完以后就可以在代码里直接使用 _ ,而不再需要 import; 注意:(如果不配置eslint,浏览器就会报错:\\\\\\\'_\\\\\\\' is not defined no-undef)

什么是ESLint?

官网上告诉我们,ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,哦,所以我们可以知道,ESLint 就是一个工具,而且是一个用来检查代码的工具。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码

项目常用eslint配置(Vue/React/TypeScript)

Vue项目常用eslint配置需要安装依赖(Vue这里使用standard扩展和vue插件,所以需要安装);React项目常用eslint配置同样安装依赖,React这里使用的airbnb扩展。安装eslint-import-resolver-webpack用来解决webpack中设置的别名eslint无法识别报错的问题。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!