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

Vue3项目中的.vscode文件夹

article 2025/4/1 22:36:04

.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 编译器的错误信息。