// .eslintrc.js
module.exports = {
  extends: [
    '@nuxt/eslint-config',
    'plugin:prettier/recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020,
    parser: '@typescript-eslint/parser'
  },
  rules: {
    // 基础规则
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    
    // Vue 规则
    'vue/multi-word-component-names': 'warn',
    'vue/attribute-hyphenation': 'on',
    'vue/require-default-prop': 'off',
    
    // TypeScript 规则
    '@typescript-eslint/explicit-module-boundary-types': 'warn',
    '@typescript-eslint/no-explicit-any': 'warn'
  }
}

4.4.1.2 Prettier 配置

创建或完善 .prettierrc 文件：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "avoid",
  "vueIndentScriptAndStyle": true
}

4.4.1.3 TypeScript 配置

在 tsconfig.json 中添加严格的类型检查选项：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

4.4.1.4 package.json 中的脚本配置

{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write .",
    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false"
  }
}

4.4.2 后端项目配置

4.4.2.1 pyproject.toml 配置

[tool.black]
line-length = 88
target-version = ['py39']
include = '\\.pyi?$'
exclude = '''
/(\\.
  |venv
  |__pycache__
  |build
  |dist
)/
'''

[tool.isort]
profile = "black"
line_length = 88
known_first_party = ["app"]
known_third_party = ["fastapi", "uvicorn", "sqlalchemy", "pydantic"]

[tool.flake8]
max-line-length = 88
extend-ignore = ["E203", "W503"]
select = ["E9", "F63", "F7", "F82"]

4.4.2.2 mypy 配置（可选，用于类型检查）

创建 mypy.ini 文件：

[mypy]
python_version = 3.9
warn_return_any = True
warn_unused_configs = True
no_implicit_optional = True
disallow_untyped_defs = False
disallow_incomplete_defs = False
check_untyped_defs = False

[mypy-fastapi.*]
follow_imports = skip

[mypy-pydantic.*]
follow_imports = skip

4.4.2.3 任务脚本配置

使用 taskipy 或创建 Makefile 来管理开发任务：

# 在 pyproject.toml 中添加
[tool.taskipy.tasks]
dev = "uvicorn app.main:app --reload --host 0.0.0.0 --port 8000"
test = "pytest"
format = "black app tests && isort app tests"
lint = "flake8 app tests"
check-types = "mypy app"
check-all = "task format && task lint && task check-types && task test"

4.4.3 工具使用指南

通过以上配置，你可以在开发过程中使用以下命令来保持代码质量：

前端项目：

pnpm run lint - 检查并修复代码风格问题
pnpm run format - 格式化所有代码
pnpm run type-check - 运行 TypeScript 类型检查

后端项目：

task format - 使用 Black 和 isort 格式化代码
task lint - 使用 Flake8 检查代码质量
task check-types - 使用 mypy 检查类型 task check-all - 运行所有检查和测试

这些工具和配置将帮助你在项目开发过程中保持一致的代码风格，减少常见错误，并提高代码的可读性和可维护性。

4.5 命令行与计算机基础概念

作为全栈开发者，熟练掌握命令行工具和理解计算机基础概念是必不可少的技能。这不仅能提高开发效率，还能帮助你更好地理解系统运行机制。

4.5.1 终端与 Shell

终端 (Terminal): 提供与计算机交互的文本输入输出环境的程序（如 VS Code 的终端、Windows Terminal、iTerm2）。
Shell: 运行在终端中的命令解释器，负责处理用户输入的命令并传递给操作系统执行（如 PowerShell, Bash, Zsh, Cmd）。
命令行界面 (CLI): 通过文本命令进行交互的界面，相对于图形用户界面 (GUI)。

4.5.2 文件系统概念

路径 (Path): 文件或目录在文件系统中的位置。
- 绝对路径: 从根目录开始的完整路径 (如 C:\Users\Name\Project 或 /home/user/project)。
- 相对路径: 相对于当前工作目录的路径 (如 ./src, ../components)。
  - . 代表当前目录。
  - .. 代表上一级目录。
  - ~ 通常代表用户主目录 (Home Directory)。

4.5.3 常用命令行操作

以下命令以 PowerShell (Windows) 和 Bash (macOS/Linux) 为主：

目录导航

pwd (Print Working Directory): 显示当前工作目录路径。
ls (List): 列出当前目录下的文件和文件夹 (Windows PowerShell 中 ls 是 Get-ChildItem 的别名，dir 也可以)。
cd <目录> (Change Directory): 进入指定目录。
- cd ..: 返回上一级。
- cd ~: 回到用户主目录。

文件操作

mkdir <目录名> (Make Directory): 创建新目录。
touch <文件名> (Linux/Mac) / ni <文件名> (PowerShell): 创建空文件。
cp <源> <目标> (Copy): 复制文件或目录 (PowerShell 中使用 cp 或 Copy-Item)。
mv <源> <目标> (Move): 移动或重命名文件 (PowerShell 中使用 mv 或 Move-Item)。
rm <文件> (Remove): 删除文件 (PowerShell 中使用 rm 或 Remove-Item)。
- rm -r <目录>: 递归删除目录及其内容。

4.5.4 网络基础概念

IP 地址: 计算机在网络中的唯一标识 (如 192.168.1.1)。
- Localhost / 127.0.0.1: 指向当前计算机本身的特殊 IP 地址。
端口 (Port): 应用程序在计算机上的通信通道 (如 Web 服务常用 80, 443, 3000, 8080)。
- 开发中常见：localhost:3000 (前端), localhost:8000 (后端)。
HTTP/HTTPS: 超文本传输协议，Web 通信的基础。
- Request (请求): 客户端发出的消息 (GET, POST, PUT, DELETE)。
- Response (响应): 服务器返回的消息 (状态码 200 OK, 404 Not Found, 500 Error)。

4.5.5 环境变量

环境变量: 操作系统级别的变量，用于存储系统配置信息。
PATH: 最重要的环境变量之一，存储了可执行程序的搜索路径。当你输入一个命令 (如 node, python) 时，系统会在 PATH 包含的目录中查找对应的程序。
设置环境变量:
- 在开发中常用 .env 文件来管理项目级别的环境变量 (如数据库密码、API 密钥)，避免硬编码在代码中。

4.5.6 进程管理

进程 (Process): 正在运行的程序实例。
PID (Process ID): 进程的唯一标识符。
终止进程:
- Ctrl + C: 在终端中强制停止当前运行的命令。
- kill <PID> (Linux/Mac) / Stop-Process <PID> (PowerShell): 根据 ID 停止进程。
- 常见场景：端口被占用时，需要找到占用端口的进程并结束它。