正如标题所说,我在VSCode中显示了@个路径别名的ESLint错误(import/no-unresolved),但不是在我的终端中.我非常确定我在Vite.config.tsTsconfig.json.eslintrc.yml中有正确的配置,所以我不确定发生了什么.终端和VSCode中的ESLint版本有什么不同吗?

Link to GitHub

FYI:我判断了它是否是ESLint的全局安装,但是npm ls -g给出了:

/usr/local/lib
└── npm@10.2.3

截图

enter image description here

这是我在终端中运行npx eslint .npm run lint得到的输出.

enter image description here

Package.json

{
  "name": "pomodoro",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "npm run --silent lint --fix",
    "prettier": "prettier --check \"src/**/*.{ts,tsx,css,md}\" --config ./.prettierrc.yml",
    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,css,md}\" --config ./.prettierrc.yml",
    "format": "npm run --silent prettier:fix && npm run --silent lint:fix",
    "preview": "vite preview"
  },
  "dependencies": {
    "path": "^0.12.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.1"
  },
  "devDependencies": {
    "@types/node": "^20.10.6",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.16.0",
    "@typescript-eslint/parser": "^6.16.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "prettier": "3.1.1",
    "typescript": "^5.3.3",
    "vite": "^5.0.8"
  }
}

Vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // Path aliases for imports (alphabetical order)
      //* IMPORTANT: Mirror changes in Tsconfig.json, .eslintrc.yml
      '@': resolve(__dirname, './src'),
      '@assets': resolve(__dirname, './src/assets'),
      '@components': resolve(__dirname, './src/components'),
      '@routes': resolve(__dirname, './src/routes'),
    },
  },
});

Tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Absolute paths */
    "baseUrl": ".",
    "paths": {
      // Path aliases for imports (alphabetical order)
      //* IMPORTANT: Mirror changes in Vite.config.ts, .eslintrc.yml
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@components/*": ["src/components/*"],
      "@routes/*": ["src/routes/*"]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    /* https://typescript-eslint.io/rules/no-unused-vars/ */
    "noUnusedLocals": false,
    "noUnusedParameters": false
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

.eslintrc.yml

root: true
env:
  browser: true
  es2021: true
  jest: true
extends:
  - eslint:recommended
  - plugin:import/recommended
  - plugin:import/typescript
  - plugin:@typescript-eslint/recommended
  - plugin:react/recommended
  - plugin:react/jsx-runtime # After React v17+, no need to import React from 'react' everywhere.
  - plugin:react-hooks/recommended
  - prettier # eslint-config-prettier (put it last to override other configs)
ignorePatterns:
  - dist
  - node_modules

parser: '@typescript-eslint/parser'
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: latest
  sourceType: module
plugins:
  - '@typescript-eslint'
  - react
  - react-refresh

settings:
  # Fix the "Warning: React version not specified in eslint-plugin-react settings" message.
  react:
    version: detect

  # import/extensions:
  #   - .ts
  #   - .tsx
  import/parsers:
    '@typescript-eslint/parser':
      - .ts
      - .tsx
  # Absolute paths
  import/resolver: # eslint-import-resolver-***
    # https://github.com/import-js/eslint-plugin-import/issues/1485#issuecomment-535351922
    typescript: {}
    alias:
      extensions:
        - .ts
        - .tsx
      map:
        # Path aliases for imports (alphabetical order)
        #* Mirror changes in Vite.config.ts, Tsconfig.json
        - ['@', './src']
        - ['@assets', './src/assets']
        - ['@components', './src/components']
        - ['@routes', './src/routes']

VSCode settings.json

{
  "workbench.iconTheme": "vscode-icons",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[shellscript]": {
    "editor.defaultFormatter": "foxundermoon.shell-format",
    "files.eol": "\n"
  },
  "[ignore]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },
  "[gitignore]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "editor.insertSpaces": true
}

谢谢你的帮助!!

推荐答案

VSCode ESlint服务器在查找ESLint配置文件时遇到问题.

注意项目 struct ,默认情况下,ESlint VSCode扩展将查找相对于工作目录的ESlint配置文件.

  • 如果你用VSCode打开frontend文件夹,而不是项目pomodoro文件夹,它会像一个魅力.

  • 如果你想用这种方式使用,打开Pomodoro文件夹,那么你可以配置Working Directories ESlint Setting,就像here中建议的那样.

    在VSCode ESLint扩展设置中使用此选项

    {
       "eslint.workingDirectories": ["frontend"]
    }
    

Typescript相关问答推荐

typescribe警告,explate—deps,useEffect依赖项列表

单击并移除for循环中的一项也会影响另一项

如何在TypeScrip中使用嵌套对象中的类型映射?

是否使用非显式名称隔离在对象属性上声明的接口的内部类型?

如何使我的函数专门针对联合标记?

使用TypeScrip的类型继承

自动通用回调

如何正确地将元组表格输入到对象数组实用函数(如ZIP)中,避免在TypeScrip 5.2.2中合并所有值

为什么TypeScrip假定{...省略类型,缺少类型,...选取类型,添加&>}为省略类型,缺少类型?

为什么类型脚本使用接口来声明函数?他的目的是什么.

类型判断数组或对象的isEmpty

在TS泛型和记录类型映射方面有问题

打字:注解`是字符串`而不是`布尔`?

使用泛型以自引用方式静态键入记录的键

我的类型谓词函数不能像我预期的那样工作.需要帮助了解原因

可以将JS文件放在tsconfig';s includes/files属性?或者,我如何让tsc判断TS项目中的JS文件?

如何使用useSearchParams保持状态

如何创建允许使用带有联合类型参数的Array.from()的TS函数?

如何在没有空接口的情况下实现求和类型功能?

如何为对象创建类型,其中键是只读且动态的,但值是固定类型?