文章目录1. 官网下载地址2. Windows系统版本的安装3. 必备设置禁止收集数据保存时自动删包自动修剪尾随空格多彩缩进控制你重新启动vscode窗口的模式编辑器是否使用预览模式禁止vscode自动更新4. 常用快捷键代码格式化快捷键快速查找文件夾和文件快捷鍵快速切換已經顯示在代碼編輯區的文件快速查找文件内容批量改选择的名字5. 扩展插件ChinesegitlensPrettierRest Client安装与使用1. 安装2. 使用主要功能1. 直接在 VSCode 中发送 HTTP 请求2. 支持多种 HTTP 方法3. 环境变量4. 请求历史记录5. 响应预览6. 自定义请求头7. 文件上传todo treevar-translate-enTemplate String Converter6.注意事项vs code Windows版本终端事项1. 官网下载地址https://code.visualstudio.com/2. Windows系统版本的安装安装一直下一步即可注意: 建议不要勾选注册为受支持的文件类型3. 必备设置打开设置界面快捷键 Ctrl 禁止收集数据搜索 Telemetry Level保存时自动删包打开settings.json文件添加以下内容editor.codeActionsOnSave:{source.organizeImports:explicit},自动修剪尾随空格搜索 Trim Trailing如果想在md使用时不进行删除空格需要在settings.json文件添加以下内容[markdown]:{files.trimTrailingWhitespace:false}多彩缩进搜索 Bracket Pairs控制你重新启动vscode窗口的模式搜索 Restore Windows编辑器是否使用预览模式搜索Workbench Editor Enable Preview, 不启用取消勾选禁止vscode自动更新搜索 Update: Mode4. 常用快捷键代码格式化快捷键window系统Shift Alt flinux系统Ctrl Shift imac系统Shift Option f快速查找文件夾和文件快捷鍵Ctrl p快速切換已經顯示在代碼編輯區的文件Ctrl Tab快速查找文件内容CTRLF批量改选择的名字鼠标选中, 使用快捷键CTRLD, 按住CTRL, 继续按d, 可以连续多选5. 扩展插件Chinesegitlens作用查看代码编辑器区域每一行的 git 提交信息Prettier作用代码格式化Rest Client作用在vscode中创建.http文件就可以类似postman这样的工具安装与使用1. 安装打开 VSCode进入扩展市场Extensions搜索REST Client。点击安装按钮安装完成后重启 VSCode。2. 使用创建一个新的.http或.rest文件。编写你的 HTTP 请求例如GET https://api.example.com/users在请求行上方会出现Send Request链接点击即可发送请求并查看响应。主要功能Rest Client有非常多的功能。主要的功能有1. 直接在 VSCode 中发送 HTTP 请求你可以在 VSCode 中创建一个.http或.rest文件然后直接编写 HTTP 请求。例如GET https://api.example.com/users点击Send Request链接VSCode REST Client 会立即发送请求并显示响应。如下图所示。2. 支持多种 HTTP 方法支持GET、POST、PUT、DELETE、PATCH等多种 HTTP 方法。例如POST https://api.example.com/users Content-Type: application/json { name: John Doe, email: john.doeexample.com }3. 环境变量你可以定义环境变量以便在不同的环境中使用不同的配置。例如baseUrl https://api.example.com GET {{baseUrl}}/users你可以在.env文件中定义这些变量并在请求中引用它们。4. 请求历史记录VSCode REST Client 会自动保存你发送的请求历史记录方便你快速重新发送之前的请求。5. 响应预览响应会以清晰的格式显示在 VSCode 中支持 JSON、XML、HTML 等多种格式。你可以直接在 VSCode 中查看响应头、响应体等信息。6. 自定义请求头你可以为每个请求添加自定义请求头例如Authorization头GET https://api.example.com/users Authorization: Bearer your_token_here7. 文件上传支持文件上传你可以通过multipart/form-data格式上传文件POST https://api.example.com/upload Content-Type: multipart/form-data; boundary----WebKitFormBoundary7MA4YWxkTrZu0gW ------WebKitFormBoundary7MA4YWxkTrZu0gW Content-Disposition: form-data; namefile; filenameexample.txt Content-Type: text/plain ./example.txt ------WebKitFormBoundary7MA4YWxkTrZu0gW--todo treevar-translate-en作用通过快捷键可以快速帮你翻译Template String Converter作用: 你在’ ‘这样的字符串写入${}会自动把’ 变成 这种模板字符串6.注意事项vs code Windows版本终端事项默认用的是powershell, 如果你的powershell执行脚本策略可能是全部禁用的,执行yarn这样的脚本命令会报错,需要解开禁用# 查看当前的执行策略Get-ExecutionPolicy如果是Restricted,请执行如下命令Set-ExecutionPolicy RemoteSigned-ScopeCurrentUserRemoteSigned 允许本地脚本和通过网络下载的已签名脚本执行而未签名的网络脚本将被阻止。-Scope CurrentUser 是指修改当前用户的执行策略不会影响系统的其他用户。执行该命令时系统会提示确认更改输入 Y 并按回车确认。