reactjs 在VSCode中出现eslint错误,但在终端中运行“eslint”命令时没有出现?(Vite,React,TypeScript)

ubof19bj  于 5个月前  发布在  React
关注(0)|答案(1)|浏览(53)

正如标题所说,我在VSCode中的@路径别名显示了这个ESLint错误(import/no-unresolved),但在我的终端中没有。我很确定我在vite.config.tstsconfig.json.eslintrc.yml中的配置是正确的,所以我不确定发生了什么。终端中的ESLint版本与VSCode中的ESLint版本有什么不同吗?
Link to GitHub

**仅供参考:**我检查了它是否是ESLint的全局安装,但npm ls -g给出了:

/usr/local/lib
└── [email protected]

字符串

截图

x1c 0d1x的数据
这是我在终端中运行npx eslint . AND npm run lint得到的输出。


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'),
    },
  },
});

tss.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
}


感谢您的帮助!

gzjq41n4

gzjq41n41#

VSCode ESlint服务器在查找ESLint配置文件时遇到问题。
注意项目结构,默认情况下ESlint VSCode扩展将查找与工作目录相关的ESlint配置文件。

  • 如果你用VSCode打开frontend文件夹,而不是项目pomodoro文件夹,它会像一个魅力。
  • 如果你想使用这种方式,打开番茄工作室文件夹,比你可以配置Working Directories ESlint Setting,如建议在here .

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

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

字符串

相关问题