当前位置：首页 > news >正文

Vue3项目中的.vscode文件夹

news 2025/4/3 22:51:22

.vscode 文件夹主要用于存放与 Visual Studio Code（VS Code）编辑器相关的项目配置文件，这些文件能让项目在 VS Code 里的开发体验更加个性化和高效。

extensions.json

在 .vscode 文件夹中，extensions.json 文件的作用是列出项目推荐的 VS Code 扩展。当其他开发者打开该项目时，VS Code 会提示他们安装这些推荐的扩展，以此保证团队成员使用一致的开发工具和环境，提升开发效率与代码质量。

{"recommendations": ["vue.volar","esbenp.prettier-vscode","dbaeumer.vscode-eslint","octref.vetur","lokalise.i18n-ally"]
}

`settings.json`

此文件可对 VS Code 工作区的设置进行定制。在 Vue 3 项目里，你可以设置代码格式化、自动保存、语法检查等功能。示例如下：

{"editor.formatOnSave": true,"vetur.format.defaultFormatter.html": "prettier","vetur.format.defaultFormatter.js": "prettier","prettier.semi": false,"prettier.singleQuote": true,"i18n-ally.localesPaths": ["src/locale/lang","packages/*/src/locale/lang"],
}

i18n-ally.localesPaths：这是 i18n-ally 扩展所使用的一个配置项，它的作用是指明项目里存放国际化语言文件的路径。
"src/locale/lang"：这表明在项目的 src/locale/lang 目录下存放着国际化语言文件。i18n-ally 扩展会对这个目录进行扫描，从而识别并管理其中的语言文件。
"packages/*/src/locale/lang"：这里的 * 属于通配符，意味着 i18n-ally 扩展会扫描 packages 目录下的所有子目录，并且在每个子目录的 src/locale/lang 目录中查找国际化语言文件。

`launch.json`

用于配置 VS Code 的调试器，可以设置调试模式，像调试 Vue 组件、运行测试等。用于配置 VS Code 的调试器，让你可以在代码中设置断点、单步调试等。

{"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Launch Chrome against localhost","url": "http://localhost:8080","webRoot": "${workspaceFolder}"}]
}

顶层配置项

version：指定 launch.json 文件的版本，目前最新版本是 "0.2.0"，用于确保 VS Code 能正确解析配置文件。

调试配置项（每个 `configurations` 数组中的对象）

type：指定调试器的类型，常见的类型有 "chrome"、"node" 等。"chrome" 表示使用 Chrome 浏览器进行调试；"node" 表示使用 Node.js 环境进行调试。
request：指定调试请求的类型，常见的类型有 "launch" 和 "attach"。"launch" 表示启动一个新的进程进行调试；"attach" 表示附加到一个已经运行的进程进行调试。
name：调试配置的名称，在 VS Code 的调试面板中显示，用于识别和选择调试配置。
url：当 type 为 "chrome" 时，url 指定要在 Chrome 浏览器中打开的 URL。例如 "http://localhost:8080" 表示打开本地开发服务器的地址。
webRoot：指定项目的根目录，用于调试器定位源代码文件。"${workspaceFolder}" 是一个 VS Code 的变量，表示当前工作区的根目录。

`tasks.json`

可配置 VS Code 的任务，例如运行脚本、构建项目等。

{"version": "2.0.0","tasks": [{"label": "serve","type": "npm","script": "serve","isBackground": true,"problemMatcher": "$tsc-watch"},{"label": "build","type": "npm","script": "build"}]
}

顶层配置项

version：指定 tasks.json 文件的版本，目前最新版本是 "2.0.0"，用于确保 VS Code 能正确解析配置文件。

任务配置项（每个 `tasks` 数组中的对象）

label：任务的名称，在 VS Code 的命令面板中显示，用于识别和调用任务。例如 "serve" 和 "build" 就是任务的名称。
type：指定任务的类型，常见的类型有 "npm"、"shell" 等。"npm" 表示该任务是通过 npm 脚本来执行的；"shell" 则表示在系统的 shell 中执行命令。
script：当 type 为 "npm" 时，script 指定要运行的 npm 脚本名称。例如 "serve" 和 "build" 分别对应 package.json 文件中 scripts 字段下定义的脚本。
isBackground：布尔值，用于指定任务是否为后台任务。如果设置为 true，表示任务会持续运行，不会自动终止，例如开发服务器启动后会一直监听端口。
problemMatcher：指定问题匹配器，用于捕获任务执行过程中产生的错误信息，并在 VS Code 的问题面板中显示。"$tsc-watch" 是一个预定义的问题匹配器，用于匹配 TypeScript 编译器的错误信息。