解决前端项目规范之后的一些 ESLint 报错问题

最新推荐文章于 2024-09-18 18:15:42 发布

FINE_CHENGLI

最新推荐文章于 2024-09-18 18:15:42 发布

阅读量1.6k

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_47119963/article/details/130778027

版权

文章讲述了在Vite项目中遇到的两个主要问题：1)ref未定义错误，通过调整unplugin-auto-import的配置来解决；2)在env.d.ts中处理模块导入的类型声明以避免ESLint报错，同时提供了一个粗暴的解决方案是忽略env.d.ts文件。此外，还提及了对Vue组件的TypeScript类型定义。

摘要由CSDN通过智能技术生成

1：ERROR: ‘ref’ is not defined

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

AutoImport({
  imports: [
    'vue',
    // "vue-router"
  ],
  dts: 'src/types/auto-import.d.ts', // 路径下自动生成文件夹存放全局指令
  // eslint报错解决
  eslintrc: {
    enabled: false, // Default `false`
    filepath: './src/types/.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  },
}),

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/recommended',
    './src/types/.eslintrc-auto-import.json',
    'prettier', // 来自 eslint-config-prettier，一定放在最后 @see https://github.com/prettier/eslint-config-prettier#readme
  ],
}

2：找不到模块或其相应的类型声明

在项目根目录或 src 文件夹下找到env.d.ts（或者自己新建一个），并写入以下内容:


// env.d.ts
/// <reference types="vite/client" />
// 简单版本
// declare module '*.vue'
// 推荐使用
declare module '*.vue' {
  // 引入vue模块中ts的方法
  import type { DefineComponent } from 'vue'
  // 定义vue组件以及类型注解
  const component: DefineComponent<{}, {}, any>
  export default component
}

ESlint 会报错，在eslintrc.cjs中添加（粗暴的做法～～）
// eslintrc.cjs
ignorePatterns: ['/src/types/env.d.ts'],