科普一下你应该了解的 .vscode 文件科普一下你应该了解的 .vscode 文件 ==> .vscode 文件夹通常

科普一下你应该了解的 .vscode 文件

.vscode 目录是什么？

.vscode 文件夹通常出现在前端项目的根目录下，它主要用于存储与 Visual Studio Code（VSCode）相关的配置文件。

如下所示：

为什么需要 .vscode 目录？

.vscode 目录的存在主要有以下几个原因：

1. 统一开发环境：

   • 通过 .vscode 目录中的配置文件，可以确保所有开发者在使用同一个项目时，拥有一致的开发环境。例如，代码格式化工具、调试配置、任务配置等都可以在 .vscode 目录中统一管理。

2. 提高开发效率：

   • 通过预定义的配置文件，开发者可以快速设置好开发环境，减少手动配置的时间。例如，extensions.json 可以推荐或要求安装特定的扩展，tasks.json 可以定义常用的构建和测试任务。

3. 减少配置冲突：

   • 项目级别的配置文件可以覆盖用户级别的配置，避免不同开发者之间的配置冲突。例如，settings.json 中的配置会覆盖用户的全局设置。

4. 版本控制：

   • .vscode 目录中的配置文件可以被纳入版本控制系统（如 Git），确保所有开发者都能获取到最新的配置。

.vscode 目录的作用

.vscode 目录主要用于存储与 Visual Studio Code 相关的配置文件，具体作用如下：

1. settings.json:

   • 存储项目级别的 VSCode 设置，覆盖用户级别的设置。
   • 例如，指定代码格式化工具、文件关联、工作区特定的设置等。

2. extensions.json:

   • 推荐或要求安装特定的 VSCode 扩展。
   • 例如，推荐安装 ESLint、Prettier、TypeScript 等扩展。

3. launch.json:

   • 配置调试设置，定义如何启动和调试应用程序。
   • 例如，指定调试器类型、启动命令、环境变量等。

4. tasks.json:

   • 定义项目中的任务，如构建、测试、运行脚本等。
   • 例如，定义构建任务、测试任务、自定义任务等。

5. sftp.json:

   • 配置 SFTP 同步设置，通常与 SFTP 扩展一起使用。
   • 例如，指定远程服务器地址、用户名、密码、远程目录等。

6. keybindings.json:

   • 定义项目级别的键盘快捷键，覆盖用户级别的快捷键设置。
   • 例如，定义项目特定的快捷键。

编译器是否会自动识别 .vscode 目录？

.vscode 目录是 Visual Studio Code 特有的目录，其他编译器或 IDE 通常不会自动识别它。以下是一些关键点：

1. Visual Studio Code:
   • VSCode 会自动识别 .vscode 目录中的配置文件，并根据这些文件来配置开发环境。例如，当你打开一个包含 .vscode 目录的项目时，VSCode 会自动加载 settings.json、launch.json、tasks.json 等文件。
2. 其他 IDE 或编译器:
   • 其他 IDE 或编译器（如 WebStorm、IntelliJ IDEA、Sublime Text 等）通常不会自动识别 .vscode 目录。这些工具可能有自己特定的配置目录和文件。
3. 版本控制系统:
   • .vscode 目录通常会被纳入版本控制系统（如 Git），以确保所有开发者都能获取到相同的配置。

配置优先级

可能有的小伙伴会有疑问，.vscode/settings.json 配置的格式化规则和根目录下面的 .prettierrc 优先级谁更高呢？解答如下：

• Prettier 配置优先级：
  • .prettierrc 文件 > .vscode/settings.json 中的 Prettier 配置 > Prettier 默认配置
• VSCode 配置优先级：
  • .vscode/settings.json 中的配置 > 用户级别的 VSCode 配置

由此我们不难总结出：写了 .vscode 是针对编译器的，目的是为了给不同的开发者也能知道在这个项目的通用配置，但是由于 .vscode/settings.json 下面的 "prettier.configPath": ".prettierrc" 指定了 .prettierrc 文件，所以我们还需要建立一个 .prettierrc 这个文件(如果没有)，然后在 .prettierrc 文件内部定义相关规则，通过 Git 版本系统传给协同开发的小伙伴

配置示例

1. 配置settings.json

2. 首先在根目录下新建 .vscode/settings.json

   {
     // 设置编辑器的 Tab 大小为 2 个空格
     "editor.tabSize": 2,
   
     // 保存文件时自动格式化代码
     "editor.formatOnSave": true,
   
     // 指定默认的代码格式化工具为 Prettier
     "editor.defaultFormatter": "esbenp.prettier-vscode",
   
     // 排除某些文件或目录，使其不在资源管理器中显示
     "files.exclude": {
       "**/.git": true,
       "**/.DS_Store": true,
       "**/node_modules": true
     },
   
     // 指定特定文件类型使用的语言模式
     "files.associations": {
       "*.js": "javascriptreact",
       "*.vue": "vue"
     },
   
     // 启用 ESLint
     "eslint.enable": true,
   
     // 指定 ESLint 配置文件的路径
     "eslint.options": {
       "configFile": ".eslintrc.json"
     },
   
     // 要求 Prettier 配置文件存在
     "prettier.requireConfig": true,
   
     // 指定 Prettier 配置文件的路径
     "prettier.configPath": ".prettierrc",
   
     // 保存文件时自动去除分号
     "prettier.semi": false
   }
   

   如图：

  其次在根目录下新建: `.prettierrc`

  ```json
  {
    // 去除分号
    "semi": false,
  
    // 使用单引号
    "singleQuote": true,
  
    // 在多行对象和数组中添加尾随逗号
    "trailingComma": "all",
  
    // 设置每行的最大字符数为 80
    "printWidth": 80,
  
    // 设置 Tab 的宽度为 2 个空格
    "tabWidth": 2
  }
  ```

​ 如图：

效果验证

保存前：

保存后：

1. 配置extensions.json

   {
     // 推荐安装的 VSCode 扩展列表
     "recommendations": [
       "dbaeumer.vscode-eslint",  // ESLint 扩展
       "esbenp.prettier-vscode",  // Prettier 扩展
       "ms-vscode.vscode-typescript-tslint-plugin",  // TypeScript TSLint 插件
       "octref.vetur",  // Vue 语言工具
       "editorconfig.editorconfig"  // EditorConfig 扩展
     ]
   }
   

2. 配置launch.json

   {
     // 调试配置版本
     "version": "0.2.0",
   
     // 调试配置列表
     "configurations": [
       {
         // 调试器类型为 Node.js
         "type": "node",
   
         // 请求类型为启动
         "request": "launch",
   
         // 配置名称
         "name": "Launch Program",
   
         // 启动程序的路径
         "program": "${workspaceFolder}/src/index.js",
   
         // 工作目录
         "cwd": "${workspaceFolder}",
   
         // 环境变量
         "env": {
           "NODE_ENV": "development"
         },
   
         // 启用源映射
         "sourceMaps": true,
   
         // 输出文件的路径
         "outFiles": ["${workspaceFolder}/dist/**/*.js"]
       },
       {
         // 调试器类型为 Chrome
         "type": "chrome",
   
         // 请求类型为启动
         "request": "launch",
   
         // 配置名称
         "name": "Launch Chrome",
   
         // 启动的 URL
         "url": "http://localhost:3000",
   
         // 网页根目录
         "webRoot": "${workspaceFolder}/src",
   
         // 启用源映射
         "sourceMaps": true,
   
         // 源映射路径覆盖
         "sourceMapPathOverrides": {
           "webpack:///./src/*": "${webRoot}/*"
         }
       }
     ]
   }
   

3. 配置tasks.json

   {
     // 任务配置版本
     "version": "2.0.0",
   
     // 任务列表
     "tasks": [
       {
         // 任务标签
         "label": "build",
   
         // 任务类型为 npm
         "type": "npm",
   
         // 执行的 npm 脚本
         "script": "build",
   
         // 任务组配置
         "group": {
           "kind": "build",  // 任务组类型为构建
           "isDefault": true  // 默认构建任务
         },
   
         // 问题匹配器
         "problemMatcher": []
       },
       {
         // 任务标签
         "label": "test",
   
         // 任务类型为 npm
         "type": "npm",
   
         // 执行的 npm 脚本
         "script": "test",
   
         // 任务组配置
         "group": {
           "kind": "test",  // 任务组类型为测试
           "isDefault": true  // 默认测试任务
         },
   
         // 问题匹配器
         "problemMatcher": []
       },
       {
         // 任务标签
         "label": "start",
   
         // 任务类型为 npm
         "type": "npm",
   
         // 执行的 npm 脚本
         "script": "start",
   
         // 任务组配置
         "group": {
           "kind": "build",  // 任务组类型为构建
           "isDefault": false  // 非默认构建任务
         },
   
         // 问题匹配器
         "problemMatcher": []
       }
     ]
   }
   

4. 配置sftp.json

   {
     // 服务器名称
     "name": "My Server",
   
     // 服务器主机地址
     "host": "example.com",
   
     // 协议类型为 SFTP
     "protocol": "sftp",
   
     // 端口号
     "port": 22,
   
     // 用户名
     "username": "username",
   
     // 密码
     "password": "password",
   
     // 远程路径
     "remotePath": "/var/www/html",
   
     // 保存时自动上传
     "uploadOnSave": true,
   
     // 忽略的文件和目录
     "ignore": [
       ".vscode",
       ".git",
       ".DS_Store",
       "node_modules/**"
     ]
   }
   

5. 配置keybindings.json

   [
     {
       // 快捷键为 Ctrl+Shift+B
       "key": "ctrl+shift+b",
   
       // 执行的命令
       "command": "workbench.action.tasks.build",
   
       // 条件：编辑器文本获得焦点时
       "when": "editorTextFocus"
     },
     {
       // 快捷键为 Ctrl+Shift+T
       "key": "ctrl+shift+t",
   
       // 执行的命令
       "command": "workbench.action.tasks.test",
   
       // 条件：编辑器文本获得焦点时
       "when": "editorTextFocus"
     }
   ]
   

可能遇到的常见问题

1. 报错无法找到 .prettierrc 文件

解决：根目录下新建 .prettierrc 文件，并添加规则

1. 其他人拉取代码没有 .vscode 和 .prettierrc 文件

   解决：查看 .gitignore 文件，按照如下操作，确保文件被纳入 Git 版本控制系统，让其他和我们一起协同开发的小伙伴可以获得这些配置

总结

.vscode 目录的主要作用是提供一个集中管理项目特定配置的地方，确保所有开发者在使用同一个项目时，拥有一致的开发环境。Visual Studio Code 会自动识别 .vscode 目录中的配置文件，而其他 IDE 或编译器通常不会自动识别它。通过 .vscode 目录，可以提高开发效率，减少配置冲突，并确保配置的一致性。