jsconfig.json是一个配置文件，它的核心作用是告诉 Visual Studio Code（VSCode）当前目录是一个 JavaScript 项目的根目录，从而为你的代码提供更强大的智能感知（IntelliSense）和语言支持。

下面这个表格概括了它的主要作用：

💡 详细解读与配置

• 定义项目上下文：在没有 jsconfig.json的“文件范围（File Scope）”模式下，VSCode 虽然能为单个文件提供基础语法高亮，但难以准确分析文件之间的模块引用关系。创建 jsconfig.json后，项目进入“显式项目（Explicit Project）”模式，VSCode 的语言服务能理解项目的整体结构，从而提供更精确的代码补全、类型推断和错误检查。

• 配置路径映射（Paths Mapping） ：这是在前端项目中非常实用的功能。许多项目使用 Webpack 或 Vite 等构建工具配置了路径别名，但在代码编辑器中，这些别名默认无法被识别。通过在 jsconfig.json中配置 paths，即可让 VSCode 理解这些别名。

  {
    "compilerOptions": {
      "baseUrl": "./", // 设置基础目录
      "paths": {
        "@/*": ["src/*"],    // 将 @ 映射到 src 目录
        "components/*": ["src/components/*"] // 配置其他别名
      }
    }
  }
  

  配置后，当你输入 import App from '@/App'，VSCode 就能知道 @指向 src目录，并提供自动补全和跳转功能。

• 优化性能（Exclude） ：JavaScript 语言服务会分析项目中的文件来提供 IntelliSense。如果它去解析庞大的 node_modules或构建输出的 dist目录，会严重拖慢速度。使用 exclude属性可以告诉语言服务忽略这些目录。

  {
    "exclude": ["node_modules", "dist", "build", "*.min.js"]
  }
  

🛠️ 创建与配置示例

你可以在项目的根目录下创建一个名为 jsconfig.json的文件。一个适用于现代前端项目（如 Vue、React）的常见配置如下：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "lib": ["esnext", "dom", "dom.iterable"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "build"]
}

配置项说明：

• compilerOptions：虽然名字叫“编译选项”，但它主要用于配置 VSCode 的 JavaScript 语言服务行为，因为 jsconfig.json源自 TypeScript 的 tsconfig.json。
• include：明确指定哪些文件属于项目。如果未设置，则默认包含所有子目录下的文件。
• exclude：指定要排除的文件和文件夹。

💎 总结

总而言之，jsconfig.json就像是你在 VSCode 中的项目地图和说明书。它通过定义项目根目录、映射路径别名、排除无关文件等方式，显著提升了代码编辑的智能体验、导航效率和整体性能。对于任何有一定规模的 JavaScript/TypeScript 项目，配置一个 jsconfig.json都是非常值得的。

希望这些信息能帮助你更好地理解和使用 jsconfig.json。如果你在配置过程中遇到具体问题，例如如何为特定框架进行优化，我很乐意提供进一步的帮助。

eslint 9+相较8版本使用eslint.config.js和扁平化配置方式。

1.在项目根目录下安装所需的开发依赖包

# 核心代码检查与格式化工具
pnpm add -D eslint prettier

# Vue.js 语法支持
pnpm add -D eslint-plugin-vue

# Prettier 与 ESLint 集成
pnpm add -D eslint-config-prettier eslint-plugin-prettier

💅 2. prettier配置

在vscode中安装插件

根目录下新建配置文件 .prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "ignore"
}

3.eslint配置并将prettier规则作为eslint一部分，对不符合要求的报错

// eslint.config.js
import eslintPluginVue from 'eslint-plugin-vue'
import vueEslintParser from 'vue-eslint-parser'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
// console.log(eslintPluginPrettierRecommended)
export default [
  // 全局配置：指定环境、解析器选项
  {
    files: ['**/*.js', '**/*.vue'],
    ignores: ['vite.config.js', 'node_modules/', 'dist/', 'public/'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: {
        browser: true, // 浏览器环境全局变量
        node: true, // Node.js 环境全局变量
        es2021: true // ES2021 语法支持
      }
    },
    rules: {
      'no-console': 'warn',
      'no-debugger': 'error',
      'no-unused-vars': ['warn', { varsIgnorePattern: '^_' }]
    }
  },

  // Vue 单文件组件专属配置
  {
    files: ['**/*.vue'],
    // 使用 vue-eslint-parser 解析 .vue 文件
    languageOptions: {
      parser: vueEslintParser,
      parserOptions: {
        parser: 'espree', // 解析 <script> 块内的 JavaScript
        ecmaVersion: 'latest',
        sourceType: 'module'
      }
    },
    plugins: {
      vue: eslintPluginVue
    },
    rules: {
      // 启用 Vue 官方推荐规则
      ...eslintPluginVue.configs['flat/recommended'].rules,
      // 自定义 Vue 规则
      'vue/multi-word-component-names': 'off' // 关闭组件名必须多单词的要求
    }
  },
  //prettier配置
  eslintPluginPrettierRecommended
]

此时运行

npm run lint

可以对不符合规则的代码检查，包含不符合eslint规则的

4.配置vscode插件eslint和Prettier ESlint，设置默认格式化工具为Prettier ESlint，让eslint直接报错prettier中的配置，有时修改了.prettierrc中的配置需要重启Prettier ESlint插件才能生效。

对于.eslintignore文件缺失时eslint会使用.gitignore文件