正如标题所说,我在VSCode中显示了@
个路径别名的ESLint错误(import/no-unresolved
),但不是在我的终端中.我非常确定我在Vite.config.ts
、Tsconfig.json
和.eslintrc.yml
中有正确的配置,所以我不确定发生了什么.终端和VSCode中的ESLint版本有什么不同吗?
FYI:我判断了它是否是ESLint的全局安装,但是npm ls -g
给出了:
/usr/local/lib
└── npm@10.2.3
截图
这是我在终端中运行npx eslint .
和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'),
},
},
});
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
}
谢谢你的帮助!!