.vscode文件夹详解

在使用 Visual Studio Code (VSCode) 进行开发时，配置 .vscode 文件夹可以显著提高开发效率和代码质量。.vscode 文件夹通常包含一些配置文件，如 settings.json、launch.json、tasks.json 等，用于自定义编辑器的行为、调试设置、任务自动化等。以下是详细的配置指南：

1. 创建 .vscode 文件夹

首先，在你的项目根目录下创建一个 .vscode 文件夹：

mkdir .vscode

2. 配置 settings.json

settings.json 文件用于配置 VSCode 的编辑器设置，这些设置仅适用于当前项目。

示例 settings.json：

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "onFocusChange",
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/dist": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.options": {
    "extensions": [
      ".js",
      ".jsx",
      ".ts",
      ".tsx"
    ]
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "prettier.requireConfig": true,
  "prettier.configFile": ".prettierrc",
  "prettier.useEditorConfig": false,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "prettier.trailingComma": "all",
  "prettier.bracketSpacing": true,
  "prettier.arrowParens": "always",
  "prettier.endOfLine": "auto",
  "eslint.alwaysShowStatus": true,
  "eslint.packageManager": "npm",
  "eslint.experimental.useFlatConfig": true,
  "eslint.workingDirectories": [
    "./"
  ],
  "eslint.probe": [
    "src"
  ],
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.quiet": true,
  "eslint.debug": false,
  "eslint.packageManager": "npm",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.options": {
    "extensions": [
      ".js",
      ".jsx",
      ".ts",
      ".tsx"
    ]
  },
  "eslint.packageManager": "npm",
  "eslint.experimental.useFlatConfig": true,
  "eslint.workingDirectories": [
    "./"
  ],
  "eslint.probe": [
    "src"
  ],
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.quiet": true,
  "eslint.debug": false
}

3. 配置 launch.json

launch.json 文件用于配置调试设置。

示例 launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Vite",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/vite",
      "args": ["--open"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Production Build",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/vite",
      "args": ["build"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

4. 配置 tasks.json

tasks.json 文件用于配置自动化任务。

示例 tasks.json：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build Vite",
      "type": "shell",
      "command": "npm",
      "args": ["run", "build"],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": ["$tsc"]
    },
    {
      "label": "Serve Vite",
      "type": "shell",
      "command": "npm",
      "args": ["run", "dev"],
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "problemMatcher": ["$tsc"]
    }
  ]
}

5. 配置 extensions.json

extensions.json 文件用于推荐项目所需的扩展。

示例 extensions.json：

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-next",
    "msjsdiag.vscode-react-native",
    "christian-kohler.path-intellisense",
    "bradlc.vscode-tailwindcss"
  ]
}

总结

通过配置 .vscode 文件夹中的 settings.json、launch.json、tasks.json 和 extensions.json，你可以显著提高 VSCode 的开发体验。这些配置文件帮助你管理编辑器设置、调试设置、自动化任务和推荐扩展，确保项目的一致性和代码质量。