前端

## 背景

在日常开发过程中，我们可能会遇到新版VSCode插件存在问题，无法正常工作的情况。这种情况下，一种可行的解决方案就是安装插件的历史版本。VSCode 插件默认安装的都是插件最新的版本，例如下面 **vscode-styled-compoents** 插件

![Untitled.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1767cc6b-87a7-4066-bbb4-6af67dcaa621/12e7dc50-a0ba-4a23-84ff-2d61b0c364b7/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20231228%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231228T141155Z&X-Amz-Expires=3600&X-Amz-Signature=4a408f66650b13d720f20d9a77775fd69798666cad8414fb7f3610c6f11ff129&X-Amz-SignedHeaders=host&x-id=GetObject)

本人最近面临这种情况，我在项目中使用**styled-compoent**时，为了实现代码智能提示，官方推荐使用 **vscode-styled-compoents** 插件，但是我按照步骤按照了 **vscode-styled-compoents** 插件后发现并没有生效。

我在 **vscode-styled-compoents** 插件 github 仓库的 **issue** 中看到有不少人遇到了相同的问题，推荐的做法是按照固定版本的 **vscode-styled-compoents** 插件，这个版本不是最新的 **vscode-styled-compoents** 版本。

那么应该如何安装**VSCode**插件的历史版本？

## 操作步骤

### 1. 找到 VSCode 插件下载地址

访问 [https://marketplace.visualstudio.com/](https://marketplace.visualstudio.com/)，搜索对应的VSCode 插件，比如**vscode-styled-compoents**

![Untitled.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1767cc6b-87a7-4066-bbb4-6af67dcaa621/99ef8aa8-4828-495b-853e-fac0721939a5/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20231228%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231228T141155Z&X-Amz-Expires=3600&X-Amz-Signature=f318da218d5985c4b334a0db36e8d9db1e29953371b1d726eb028c174fb65f02&X-Amz-SignedHeaders=host&x-id=GetObject)

**vscode-styled-compoents 插件地址**

[https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)

![Untitled.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1767cc6b-87a7-4066-bbb4-6af67dcaa621/2d362ad6-d023-4160-a17b-e4c4ce8f5ff4/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20231228%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231228T141155Z&X-Amz-Expires=3600&X-Amz-Signature=1da9d1a2e34bd391a030b747b933439db07dd8b43f88d3b7e5a6e1346edd0f74&X-Amz-SignedHeaders=host&x-id=GetObject)

### 2. 下载 VSCode 插件历史版本文件

![Untitled.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1767cc6b-87a7-4066-bbb4-6af67dcaa621/cf77cf6c-60e7-4d77-935b-e970fce64058/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20231228%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231228T141155Z&X-Amz-Expires=3600&X-Amz-Signature=b83c440f57fbbafbbc30fab3d6d24d4c7be0e222bbfa1834c88fd41f188ecc3b&X-Amz-SignedHeaders=host&x-id=GetObject)

![Untitled.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1767cc6b-87a7-4066-bbb4-6af67dcaa621/3f6c1336-4ea8-4914-8b85-5daf357735fd/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20231228%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231228T141155Z&X-Amz-Expires=3600&X-Amz-Signature=574c264eb32c4fced6cddba0ca5a7130438afcd6e22b34c3bea4ee6341b71b90&X-Amz-SignedHeaders=host&x-id=GetObject)

### 3. VSCode 安装下载的插件文件

1. **VSCode** 执行安装插件命令行

   ```shell
   extensions:install from vsix
   ```

   ![Untitled.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1767cc6b-87a7-4066-bbb4-6af67dcaa621/d7fa5c49-89a2-4dd0-a400-8a15d4f256f7/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20231228%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231228T141155Z&X-Amz-Expires=3600&X-Amz-Signature=a663b78c4553ab4374aa82a5010c3aa8e8077d9900c350fea13f1c910fde4450&X-Amz-SignedHeaders=host&x-id=GetObject)

   ![Untitled.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1767cc6b-87a7-4066-bbb4-6af67dcaa621/fed061c7-7b66-47c9-aaf6-e985b601c6b4/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20231228%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231228T141155Z&X-Amz-Expires=3600&X-Amz-Signature=e0ef7c9a6a3635d3865db7ce39b6dbf7e0b47c0b75099b028e53f97b9a9a6b3b&X-Amz-SignedHeaders=host&x-id=GetObject)
2. 选择下载完成的 vslx 文件，

   ![Untitled.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1767cc6b-87a7-4066-bbb4-6af67dcaa621/b79edbee-bd87-4065-acf6-fa97c0af9e58/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20231228%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231228T141155Z&X-Amz-Expires=3600&X-Amz-Signature=5ef9f645df0de4bcb79131a920e18671eb2cd0f1f4234e4debf209da3795f630&X-Amz-SignedHeaders=host&x-id=GetObject)

### 4. 安装成功

**vscode-styled-compoents** 历史版本成功安装

![Untitled.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1767cc6b-87a7-4066-bbb4-6af67dcaa621/45a77267-4a70-4638-8e78-7846f6bca31a/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20231228%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231228T141155Z&X-Amz-Expires=3600&X-Amz-Signature=21dd30d3e13801cc272d112c580a8940b9b73270c946f32133922c19bc439977&X-Amz-SignedHeaders=host&x-id=GetObject)

![Untitled.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1767cc6b-87a7-4066-bbb4-6af67dcaa621/d6dcbfca-e2ad-40ab-aaad-34e87ba1ed70/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20231228%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231228T141155Z&X-Amz-Expires=3600&X-Amz-Signature=05cae343a3626f518c05ef0f98e036bdbd0eb154fdd2df3bc70ff5621c847a04&X-Amz-SignedHeaders=host&x-id=GetObject)


在日常开发过程中，我们可能会遇到新版VSCode插件存在问题，无法正常工作的情况。这种情况下，一种可行的解决方案就是安装插件的历史版本。VSCode插件默认安装的都是插件最新的版本，例如下面vscode-styled-compoents插件本人最近面临这种情况，我在项目中使用styled-compoent时，为了实现代码智能提示，官方推荐使用vscode-styled-compoents插件，

VSCode 如何安装插件的历史版本

## 前言

对于开发者来讲，怎么科学合理的进行程序调试是至关重要的。调试工具可以协助开发者清晰的看到程序的走向以及程序每一步执行的详细信息。

开发前端项目，比如 React,vue 等，开发者可以直接在代码中插入 `debugger` 进行调试。

Node 程序调试，我们可以借助开发工具 vscode 提供的能力进行操作。

## 调试配置

1. 选择调试选项，`create a lunch.json file`
   ![](https://cdn.fmlg1688.cn/levenx-world/v8Nt5TIwF-Ru7SN-.jpeg)
2. 选择需要调试的环境，以 Node 程序调试
   ![](https://cdn.fmlg1688.cn/levenx-world/Su5fz2k_u47IsArN.jpeg)
   系统生成最基础的模版信息

   ```jso
   {
       "version": "0.2.0",
       "configurations": [
           {
               "type": "node",
               "request": "launch",
               "name": "Launch Program", //调试程序名称，方便开发者区分
               "skipFiles": [
                   "<node_internals>/**"
               ],
               "program": "${workspaceFolder}/index.js" // 调试程序入口
           }
       ]
   }


   ```
3. 根据  `program `参数可以看出，默认是以跟路径下 `index.js `作为入口执行调试。启动方式类似于直接控制台 `node index.js `，但是有时候我们碰到使用必须使用 `npm `启动的程序，比如使用 `eggjs nest `这些框架时，入口 js 是被隐藏的，都是通过框架提供的 `bin` 命令启动的。
4. npm 启动调试![](https://cdn.fmlg1688.cn/levenx-world/KMocZ9_m4S2br70-.jpeg)

   可以自定义调试程序的名称

   vscode 提供了很多 `configuration` 配置模版，因为此处需要调试 `npm` 脚本，所以选择下图选项。
   提供的模块大家感兴趣可以都自己尝试下，毕竟 `纸上得来终觉浅`。

   ![](https://cdn.fmlg1688.cn/levenx-world/U7Ev6lnx5kauPb5n.jpeg)

   ```json
   {
     "version": "0.2.0",
     "configurations": [
     // npm 调试配置
       {
         "command": "npm dev",
         "name": "NPM 调试",
         "request": "launch",
         "type": "node-terminal"
       },
       {
         "type": "node",
         "request": "launch",
         "name": "JS文件调试", //调试程序名称，方便开发者区分
         "skipFiles": ["<node_internals>/**"],
         "program": "${workspaceFolder}/app.js" // 调试程序入口
       }
     ]
   }


   ```
5. 选择调试配置![](https://cdn.fmlg1688.cn/levenx-world/2MJJSEZ2pZScmip_.jpeg)
6. 调试快捷键 F5
7. 同时启动多个调试进程

   ```jso
   // launch.json 

    "compounds": [
       {
         "name": "同时调试",
         "configurations": ["NPM 调试", "JS文件调试"],
       }
     ]

   ```

## 调试控制

![](https://cdn.fmlg1688.cn/levenx-world/Ow6OV7NaZn3YcvxP.jpeg)

按钮功能说明从左到右依次说明

* Continue 直接跳过当前断点到下一个断电或者直接结束断点
* Step Over 单步执行时，遇到子函数时不会进行子函数内执行，而是执行完整个子函数
* Step Into 单步执行时，遇到子函数会进入内部并且继续单步执行
* Step Out 单步执行进入子函数内部时， 可以执行完子函数余下部分，并且返回上一层函数调用处
* Restart 重新执行
* Stop 关闭


对于开发者来讲，怎么科学合理的进行程序调试是至关重要的。调试工具可以协助开发者清晰的看到程序的走向以及程序每一步执行的详细信息。开发前端项目，比如React,vue等，开发者可以直接在代码中插入debugger进行调试。Node程序调试，我们可以借助开发工具vscode提供的能力进行操作。调试配置选择调试选项，createalunch.jsonfile选择需要调试的环境，以Node程序调试系统

vscode node开发调试断点配置 launch.json

客户端

服务端

算法

工程

产品

信息安全

运维

VSCode是一款强大的代码编辑器，支持多种编程语言。它有着易于使用的用户界面和丰富的插件生态系统，可以提高您的开发效率和优化开发流程。探索VSCode，提高您的代码编写和调试体验