.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 的开发体验。这些配置文件帮助你管理编辑器设置、调试设置、自动化任务和推荐扩展，确保项目的一致性和代码质量。