vscode安装与配置

姜姜小妞
8,408 阅读14分钟

专栏指引

序言

目的： 为了修改vscode安装扩展安装路径，使其放置到目标路径。修改vscode的默认缓存工作区位置，缓解C盘压力

文件结构

  • vscode
    • Microsoft VS Code ——————软件包位置（后续软件更新只影响这个文件）
    • workspaceStorage———————工作区缓存路径
    • extensions——————————扩展安装路径

image.png

vscode相关网站

vscode官网：code.visualstudio.com/

一、下载安装包

vscode官网上下载安装包code.visualstudio.com/

二、安装

2.1.双击运行安装exe，进行安装

image.png

2.2.协议许可

点击“我同意此协议”后，下一步 image.png

2.3.选择安装目录

安装在D盘D:\vscode

image.png

2.4.选择开始菜单文件夹

默认

image.png

2.5.选择附加任务

我一般是全选，下一步

image.png

2.6.准备安装

下一步

image.png

2.7.安装中

image.png

2.8.安装完成

image.png

三、修改扩展安装路径extensions和工作区缓存路径workspaceStorage

你必须知道，

  • 使用桌面桌面图标右键属性目标值的方法与mklink方法的优先级，当双击桌面进入时，优先使用前者设置。
  • 扩展安装路径不可以在vscode软件安装路径里，否则每次启动vscode应用程序时，软件安装路径里的文件将会重新刷新或被强制性删除，这是新版的vscode的一些算法设置导致出现的问题，所以最好是让设置文件与软件安装路径独立开来，例如我是这样设计文件结构的： 文件结构
  • vscode ——————软件管理路径
    • Microsoft VS Code ——————软件包位置(后续软件更新只影响这个文件)
    • workspaceStorage———————工作区缓存路径
    • extensions——————————扩展安装路径

image.png

默认的扩展安装路径和工作区缓存路径

  • 扩展安装默认路径：C:\Users\{用户}\.vscode\extensions
  • 工作区缓存默认路径C:\Users\{用户}\AppData\Roaming\Code\User\workspaceStorage 135552508fd87924d84e60a58b631c01.png

方法一：通过桌面图标右键属性

网上一般会建议直接修改快捷方式的目标属性来修改，这样的

  • 缺点：我们必须通过点击桌面图标打开的vscode，设置的属性才会生效，否则其他方式打开的vscode例如在文件夹右键以vscode打开时，已经安装的扩展会失效，已设置好的工作区缓存路径也会失效，使用的是vscode默认的方式存储。
  • 优点：电脑系统升级或者重装软件，一般都能打开vscode软件，很少出现打不开的情况。通过这个方法修改比较简单快捷

打开vscode的属性，在目标位置追加输入(请注意留英文空格)，应用后确认

  • 扩展安装文件路径：( --extensions-dir "你的扩展安装目标路径")
    • --extensions-dir "D:\vscode\extensions"
  • 工作区缓存路径：( --user-data-dir "你的工作区缓存目标路径")
    • --user-data-dir "D:\vscode\workspaceStorage"

以下是我的完整目标属性值

"D:\vscode\Microsoft VS Code\Code.exe" --extensions-dir "D:\vscode\extensions" --user-data-dir "D:\vscode\workspaceStorage"

image.png

当我们双击桌面图标进入vscode后，在安装路径下就自动生成extensions和workspaceStorage两个文件夹 image.png

缺点

  • 只能通过桌面图标双击使用vscode程序才生效。其他方式打开程序则缓存及扩展都使用默认的存储路径, 修改后重启vscode，此时，因为我们以这个方式修改的时候，生效的只是通过双击这个快捷方式进去后安装的扩展才会在我们指定的目录路径里，通过其他方式打开的vscode安装的不生效或者已安装的扩展不生效。可以自行测试。

优点

修改比较方便快捷，就算重新安装系统、升级系统、重装软件都可以正常打开vscode

方法二：使用mklink方式修改（推荐）

写在前面的话：如果已安装很多的扩展，请先把扩展剪切到存放的目标路径下在进行接下来的操作。 记得先把 桌面图标右键属性目标值里的追加的扩展去掉，仅保留vscode的启动程序路径

image.png

1、【创建】——新建目标文件夹

这一步是必须的！！！！必须要存在目标路径 在你需要存放vscode扩展的目录新建存放路径 例如，以下是我的目标路径，由于我是想把扩展及缓存与vscode的安装文件放在一起

在vscode同级安装目录下新建extensions文件夹 和 workspaceStorage文件夹，分别作为扩展安装路径和工作区缓存路径

image.png

2、【删除】———移除默认安装扩展目录下的extensions文件夹

  • 扩展安装默认路径：C:\Users\{用户}\.vscode\extensions
  • 工作区缓存默认路径C:\Users\{用户}\AppData\Roaming\Code\User\workspaceStorage

必须要移除或删除默认的vscode的扩展存放文件夹和工作区默认缓存文件夹 image.png

image.png

3 【mklink链接】管理员身份运行cmd执行mklink命令

搜索栏输入cmd命令行提示符，右键以管理员身份运行 image.png

mklink命令规则

  • mklink /目标盘 "需要被软连接的路径如vscode默认存放扩展的路径" "目标路径"
    • 目标盘如果不存在，可以随意先设置为已经存在的磁盘，一般电脑是默认有C、D两个盘，而有一些是我们后面加装内存条建立出来的新磁盘，mklink是不识别的，例如你把扩展安装在G盘，那么你的命令行可以这样：“mklink /D "vscode默认存放扩展的路径" "在G盘的目标路径"”
    • 要被软连接的路径必须是不存在的，因为mklink在创建软连接时会重新创建类似快捷方式样式的路径文件夹，所以要被软连接的路径必须是不存在的，例如我们需要把默认的vscode存放扩展的路径文件夹删除
    • 目标路径必须是存在的，mklink不会帮我们自动创建目标文件夹，所以必须要我们在执行mklink之前就需要创建好

输入以下mklink命令行

  • 修改扩展安装路径:
    • mklink /D "C:\Users\{用户}\.vscode\extensions" "你的目标扩展安装路径"
  • 修改工作区缓存路径:
    • mklink /D "C:\Users\{用户}\AppData\Roaming\Code\User\workspaceStorage" "你的目标工作区缓存路径"

以下是我的命令行：

mklink /D "C:\Users\GXN\.vscode\extensions" "D:\vscode\extensions"

mklink /D "C:\Users\GXN\AppData\Roaming\Code\User\workspaceStorage" "D:\vscode\workspaceStorage"

第一句意思是，在目录C:\Users\GXN\.vscode\extensions 创建一个快捷方式extensions，此快捷方式指向（目标地址为）D:\vscode\extensions。其他同理 image.png

如果以上你不清除C盘下vscode的默认安装路径，你就会得到如下提示：“当文件已存在时，无法创建该文件”，这时，你应该先移除默认安装扩展目录下的extensions文件夹和目标工作区缓存路径workspaceStorage再行操作。如果你执行命令成功后，已创建了extensions快捷方式，再次运行命令，也会得到同样的结果。

执行以上命令后，你会发现在原来的默认扩展安装路径中，新增了extensions和workspaceStorage的快捷方式，目标指向了我们刚才设置的目标。这样就可以了，可以进行下一步测试了。

image.png

image.png

4、测试

安装一个扩展，例如chinese简体中文。使用右键菜单打开或者双击快捷方式打开需要打开的文件夹。看看界面是否都是中文，如果是，证明成功了。我就省略啦。

四、关闭vscode自动更新

打开vscode，【文件】-》【首选项】-》【设置】

image.png

在搜索框输入自动更新，找到Update:Mode（一般是在搜索结果的第一项），把选项值改为node，重启即可生效

image.png

五、修改工作区缓存

vscode默认的缓存区是在C:\Users\{用户}\AppData\Roaming\Code\User\workspaceStorage， 拿我的举例，我的就是在C:\Users\GXN\AppData\Roaming\Code\User\workspaceStorage

image.png

修改缓存区有两种情况，一般的情况是修改默认的缓存工作区，就是我们一般ctrl+s进行保存时，如果没有把项目工作区另存为，那么就会默认缓存到工作区。先说另存为工作区的。

5.1 另存为工作区

操作

在需要另存工作区的项目使用vscode打开 找到【文件】-》【将工作区另存为】

image.png

选择当前项目缓存的工作区位置即可。

例如：我打开这个测试项目，然后另存工作区为当前项目根路径下

image.png

工作区文件夹名后缀默认格式为：vscode当前打开根文件夹名.code-workspace，例如我目前打开的项目根目录名为uni-app-map-masker-test，另存工作区的json文件名默认为uni-app-map-masker-test.code-workspace

image.png

，请另存为后，我们可以找到vscode默认缓存文件夹里的缓存区，以下是我的对应的文件缓存区。发现缓存workspace.json的workspace属性是已经改为我们的目标路径了。

image.png

image.png

没有更改过缓存区的项目缓存文件workspace.json的workspace属性指向是指向默认的vscode缓存路径的。

image.png

后续不要随意更改这个json文件名，如果你要更改的话，请找到vscode工作区，找到缓存文件夹修改workspace.json的workspace属性。

优点

可以对单一的项目进行单独的缓存工作区

缺点

这个方式只是针对与单个项目而言，并不能做到全部由vscode打开的文件都缓存。这个另存工作区的方式，可以发现，我们在C盘还是有对应的一些目录缓存的。

5.2 修改快捷方式目标路径追加--user-data-dir "目标缓存的路径"

操作

打开快捷方式属性，在它的目标属性后追加 如下格式的命令

--user-data-dir "目标缓存的路径"

例如，我把工作区放到vscode的安装路径下，我的命令行为：

--user-data-dir "D:\vscode\workspaceStorage"

然后修改后点”应用“后点击”确认“

image.png

优点

针对于所有使用此快捷方式打开的文件，缓存区都默认为命令中的目标缓存路径 --user-data-dir "目标缓存的路径"。

缺点

就是必须由此快捷方式打开的文件的才能生效。这个和设置扩展也是一样的道理

5.3 使用mklink修改默认工作区缓存路径

使用mklink修改默认工作区缓存路径，上面已经介绍了方法，这里不再赘述，

  • 新建目标缓存路径，例如，"D:\vscode\workspaceStorage"
  • 删除工作区缓存默认路径C:\Users\{用户}\AppData\Roaming\Code\User\workspaceStorage
  • mklink命令行创建符号链接
mklink /D "C:\Users\{用户}\AppData\Roaming\Code\User\workspaceStorage" "你的目标工作区缓存路径"

我的mklink命令行

mklink /D "C:\Users\GXN\AppData\Roaming\Code\User\workspaceStorage" "D:\vscode\workspaceStorage"

优点

所有方式打开的vscode都能

五、vscode程序无法打开

这个情况一般存在于更新系统后，vscode的扩展路径或者工作路径无法找寻目标路径导致的，比如我电脑（联想电脑）经常被强制性更新系统，导致我的vscode无法启动

一、检查电脑的环境变量是否有vscode目标程序

右键"电脑"打开属性

image.png

打开高级系统设置,再打开环境变量 image.png

进入“用户变量”双击“path”选项，确认或添加或修改为正确的vscode启动程序路径（就是安装vscode的bin路径），确认后应用，刷新电脑界面（有必要时需要重启电脑，windows有时候是无法及时应用的需要重启生效）

如果重启电脑后还是无法打开vscode，那么，

你需要排查extensions扩展路径和workspaceStorage工作区缓存路径

image.png

二、使用mklink软链接文件导致无法打开vscode的解决办法

使用mklink软链接文件导致无法打开vscode的解决办法 最简单粗暴的方法是直接到默认路径删除扩展和工作区文件夹

  • 1、删除扩展路径：C:\Users\{用户}\.vscode里删除extensions文件夹
  • 2、删除工作区缓存路径，C:\Users\{用户}\AppData\Roaming\Code\User里删除workspaceStorage文件夹
  • 删除扩展和工作区文件夹后，重新打开vscode，它会默认重新创建新的文件夹到默认路径，此时虽然文件夹名字一样，但不再是mklink关联的软链接了，如果你还想使用mklink创建软链接，那你需要重新按照步骤来创建，你可以点此跳转使用mklink创建软链接

——————————————以下的内容是排除问题的方法————————————

由于我使用的mklink软连的扩展路径和工作区路径，小伙伴们如果是按照我的教程设置的，那你不需要重装vscode，直接在原来的vscode安装路径同级文件夹照着步骤新建文件夹就行了，只需要在安装vscode的路径下新建extensions文件夹和workspaceStorage这两个文件夹就可以打开vscode应用程序了，如下图：

image.png

但是如果你的扩展文件夹和工作区是和我不一样的，那么你需要排查2个地方

1、排查vscode的extensions扩展路径

排查vscode扩展路径，我们进入vscode的默认扩展路径，C:\Users\{用户}\.vscode里的extensions文件夹 image.png

右键查看extensions软链接的属性，在“目标”里可以看到真实的链接路径，

此时你就看这个“真实的链接路径”下有没有对应的文件夹，没有就新建就行了 image.png

2、排查vscode的workspaceStorage工作区缓存路径

找到vscode的默认工作区缓存路径，C:\Users\{用户}\AppData\Roaming\Code\User里的workspaceStorage文件夹 image.png

右键查看workspaceStorage软链接的属性，在“目标”里可以看到真实的链接路径，

此时你就看这个“真实的链接路径”下有没有对应的文件夹，没有就新建就行了

image.png

三、使用桌面图标vscode右键属性定义的扩展及工作缓存区导致无法打开vscode的解决办法

我们右键桌面图标打开“vscode”右键“属性”打开 image.png

如果你的目标属性值只有默认的安装路径，

  • 那你的扩展安装路径就是默认在C盘的C:\Users\{用户}\.vscode里的extensions文件夹，
  • 工作区缓存路径就是在C盘的C:\Users\{用户}\AppData\Roaming\Code\User里的workspaceStorage文件夹

image.png

如果有设置扩展，例如下图：

  • 此时你应该去检查对应的路径是否存在，没有就添加就可以了
  • 以下是我的完整目标属性值
"D:\vscode\Microsoft VS Code\Code.exe" --extensions-dir "D:\vscode\extensions" --user-data-dir "D:\vscode\workspaceStorage"

image.png

六、vscode的扩展安装路径extensions莫名其妙消失

扩展安装路径不可以在vscode软件安装路径里，否则每次启动vscode应用程序时，软件安装路径里的文件将会重新刷新或被强制性删除，这是新版的vscode的一些算法设置导致出现的问题，所以最好是让设置文件与软件安装路径独立开来，

例如我是这样设计文件结构的（正确的）：

  • vscode ——————软件管理路径
    • Microsoft VS Code ——————软件包位置(后续软件更新只影响这个文件)
    • workspaceStorage———————工作区缓存路径
    • extensions——————————扩展安装路径

image.png

错误的文件结构是这样的（错误的）：

  • Microsoft VS Code ——————软件包位置(后续软件启动将会影响所有文件)
    • workspaceStorage———————工作区缓存路径
    • extensions——————————扩展安装路径（每次启动软件后扩展将会消失，再次启动软件将无法正常启动）
    • 软件包的其他文件

专栏指引

avatar
文章
阅读
粉丝