前端工程化入门 - 基础配置文件解析

🔧 前端工程化入门 - 基础配置文件全解析

现代前端项目离不开工程化配置，这些配置文件就像项目的"DNA"，决定了项目的构建、代码质量与协作规范。本文详解新手必备的6大核心配置：

---

📂 jsconfig.json - JavaScript 项目配置

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

作用：为 VSCode 和 TypeScript 编译器提供智能提示支持

🔍 配置解析：

• paths：路径别名映射，@/* 对应 ./src/* 目录，解决深层路径引用问题
• exclude：排除检查的目录，提升 IDE 性能

💡 使用场景：

// 配置前
import Button from '../../../../components/Button'

// 配置后
import Button from '@/components/Button'

---

� eslint.config.js - 代码质量守护

import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default [
  // 检查范围配置
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'],
  },
  
  // 忽略文件配置
  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/coverage/**'],
  },

  // 规则集配置
  js.configs.recommended,           // ESLint 推荐规则
  ...pluginVue.configs['flat/essential'], // Vue 必要规则
  skipFormatting                    // 禁用与 Prettier 冲突的格式规则
]

作用：代码质量检测与规范约束

🔍 关键配置：

• flat/essential：Vue 3 官方推荐的扁平化配置
• skipFormatting：与 Prettier 分工协作，ESLint 专注代码质量，Prettier 处理格式

---

💅 .prettierrc.json - 代码格式化标准

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,          // 语句末尾加分号
  "singleQuote": true,   // 使用单引号
  "printWidth": 100      // 换行字符阈值
}

作用：统一团队代码风格

🚥 与 ESLint 协作建议：

1. 安装 eslint-config-prettier 禁用冲突规则
2. 保存时先执行 ESLint 修复，再 Prettier 格式化

---

⚙️ 版本控制与编辑器配置

.gitattributes

* text=auto eol=lf

作用：强制统一换行符为 LF，避免 Windows/macOS/Linux 换行符差异问题

.editorconfig

[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
charset = utf-8                # 文件编码
indent_size = 2                # 缩进2空格
indent_style = space           # 空格缩进
insert_final_newline = true    # 文件末尾空行
trim_trailing_whitespace = true # 删除行尾空格
end_of_line = lf               # 换行符类型
max_line_length = 100          # 最大行宽

作用：跨编辑器统一编码风格（不原生支持的编辑器需配合编辑器插件使用）

---

🛠 配置联动建议

1. 安装必备 VSCode 插件：

   • ESLint
   • Prettier - Code formatter
   • EditorConfig for VS Code

2. 推荐 package.json 脚本：

{
  "scripts": {
    "lint": "eslint . --fix",
    "format": "prettier --write ."
  }
}

3. 典型工作流：

   graph LR
     A[编码] --> B[保存时自动格式化]
     B --> C[提交前执行 lint 检查]
     C --> D[CI/CD 流水线验证]
   

---

💡 小贴士：这些配置文件应该放在项目根目录，大部分工具会自动识别。建议团队新成员在首次拉取代码后，先执行 npm install 和 npm run lint 初始化环境。