VSCode离线升级秘籍：一键完成插件与配置迁移

Visual Studio Code（简称 VSCode）凭借其强大的功能和丰富的插件生态，成为了众多开发者的选择。然而，当我们更换电脑或升级到新版本时，重新手动配置环境和重装插件无疑是一项耗时的任务。幸运的是，有一些简单的方法可以帮助我们高效迁移 VSCode 的配置和插件。

本文介绍了如何高效迁移Visual Studio Code（VSCode）的配置和插件，确保在更换电脑或升级版本时能快速恢复开发环境。文中详细说明了通过指定插件安装位置、备份settings.json文件以及使用命令行参数来简化这一过程的方法。此外，还推荐了一系列提高生产力的常用插件，如代码美化、主题定制、括号配对颜色化等，并提供了一个优化后的settings.json配置示例，以满足Vue和Java全栈开发的需求。

vscode插件同步升级管理

放心，我们可以指定插件安装位置和备份settings.json文件就可以了

(1)、默认情况下，(Windows)vscode的安装路径为C:\Users\用户名.vscode\extensions。

将此文件下的extensions文件夹删除即可。

(2)、在其他目录下创建存放扩展安装包（插件）的位置，例如：

新建扩展安装包目录vscode-extensions文件夹。（存放插件）

(3)、右键桌面vscode快捷方式找到属性中的目标位置

在最后加入指定扩展安装包的指令。

"F:\javaee\VSCode-win32-x64\Code.exe" --extensions-dir "F:\javaee\VSCode-win32-x64\extensions"

这样每次主程序升级时，我们只需要解压替换主程序文件就可以了，插件目录保留。

(4)、启动vscode,验证插件是否正常，如果插件有升级的，会自动升级到最新版本。

附常用插件推荐

1、Chinese Language 简体中文汉化插件，和我一样英文不好的童鞋可以安装这个插件进行汉化。这个插件重载之后还没有汉化成功的话，把编辑器关闭重新打开就行了。

2、vscode-icons 让 vscode 资源树目录加上图标，有利于我们进行文件格式的判断。

3、强烈推荐 cobalt2 主题或Dracula Official主题，作者是名声大噪的 Wes Bos，该主题的主色调是蓝色和黄色，快尝试吧。

以下是该主题推荐的编辑器配置：

// setting.json
{
  "workbench.colorTheme": "Cobalt2",
  // The Cursive font is operator Mono, it's $200 and you need to buy it to get the cursive
  "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 17,
  "editor.lineHeight": 25,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "400",
  "prettier.eslintIntegration": true,
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid",
  "editor.renderWhitespace": "all",
}

4、字体：推荐使用 Fira Code，它是等宽字体，被誉为最适合程序员用的字体，谁用谁知道。

点击上面链接，找到图中按钮下载 Fira Code 字体包：

{
     "editor.fontFamily": "Fira Code",
     "editor.fontLigatures": true
}

5、local history

安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样，每当我们保存更改时，它都会备份一份历史文件，当我们需要恢复之前版本时，只需要点击一下对应的文件即可。此外，它还会在编辑框显示对比详情，能够让你对修改位置一目了然。

6、Bracket Pair Colorizer

Bracket Pair Colorizer这款插件可以给()、[]、{}这些常用括号显示不同颜色，当点击对应括号时能够用线段直接链接到一起，让层次结构一目了然。除此之外，它还支持用户自定义符号。

7、Prettier

Prettier，一个在前端开发者中流行的VSCode扩展，拥有1100万的下载量，并且还在不断增长，它可以帮你快速格式化你的代码，只需要按一个按钮，代码就格式化完成了。

• 在样式指南更改时，Prettier可以自动应用到整个代码库中。
• 不需要花功夫去修正格式化。
• 不用在拉取请求中浪费时间讨论样式。
• 不需要在样式指南中查找规则。

Prettier不仅支持JavaScript，还支持许多开箱即用的不同语法，包括TypeScript、CSS、JSON、JSX、GraphQL等等。

8、快捷键：Eclipse Keymap for Visual Studio Code

如果熟悉使用eclipse建议快捷键可以使用此插件，无缝使用

9、安装Git ：Git Extensions for VS Code

对vscode源代码进行版本控制

先决条件：先安装git客户端工具：git-scm.com/download/wi…

10、数据库辅助工具SQLTools和sqltools MySQL驱动

管理-设置-sqltools

11、Lombok插件：Lombok Annotations Support for VS Code

12、Markdown Preview Github Styling 【荐】

以 GitHub 风格预览 Markdown 样式，十分简洁优雅。就像下面这样，左侧书写 Markdown 文本，右侧预览 Markdown 的渲染效果：

13、minapp：小程序支持

小程序开发必备插件。

14、javascript console utils：快速打印 log 日志【荐】

安装这个插件后，当我们按住快捷键「Cmd + Shift + L」后，即可自动出现日志 console.log()。简直是日志党福音。

当我们选中某个变量 name，然后按住快捷键「Cmd + Shift + L」，即可自动出现这个变量的日志 console.log(name)。

其他的同类插件还有：Turbo Console Log。

不过，生产环境的代码，还是尽量少打日志比较好，避免出现一些异常。

编程有三等境界：

（1）. 第三等境界是打日志，这是最简单、便捷的方式，略显低级，一般新手或资深程序员偷懒时会用。

（2）. 第二等境界是断点调试，在前端、Java、PHP、iOS 开发时非常常用，通过断点调试可以很直观地跟踪代码执行逻辑、调用栈、变量等，是非常实用的技巧。

（3）. 第一等境界是测试驱动开发，在写代码之前先写测试。与第二等的断点调试刚好相反，大部分人不是很习惯这种方式，但在国外开发者或者敏捷爱好者看来，这是最高效的开发方式，在保证代码质量、重构等方面非常有帮助，是现代编程开发必不可少的一部分。

15、Local History 【荐】

维护文件的本地历史记录，强烈建议安装。代码意外丢失时，有时可以救命。

16、Polacode-2020：生成代码截图 【荐】

可以把代码片段保存成美观的图片，主题不同，代码的配色方案也不同，也也可以自定义设置图片的边框颜色、大小、阴影。

尤其是在我们做 PPT 分享时需要用到代码片段时，或者需要在网络上优雅地分享代码片段时，这一招很有用。

使用方法：查看----命令面板----Polacode---最下面图标生成图版即可

生成的效果如下：

17、Image preview

光标悬浮在图片路径上时，显示图片预览，这样我们在敲代码的时候一下子就能知道有没有引用了正确的图片或图标。

18、Code Spell Checker

我们日常敲代码很多命名都是使用英文单词，粗心的小伙伴可能会拼错，这个插件就是单词拼写错时的拯救神器，它可以标志错的单词，还可以提示单词的正确拼法。有了它，就再也不用因为单词拼错找半天的 bug 了

19、native-ascii-converter

可以看到打开properties文件时自动进行了中文转换，保存时又会自动转换成unicode编码 20、CSS Peek或CSS Navigation 追踪至样式表中 CSS 类和 id 定义的地方（ctrl+鼠标左键）

vscode常用配置

现在大部分同学都是使用vue和Java全栈开发，常用的vscode设置基本满足要求，下面提供一个 settings.json内容如下：

{ // The Cursive font is operator Mono, it's $200 and you need to buy it to get the cursive
    "editor.fontFamily": "Fira Code,Operator Mono, Menlo, Monaco, 'Courier New'",
    "editor.fontSize": 17,
    "editor.lineHeight": 25,
    "editor.letterSpacing": 0.5,
    "editor.fontWeight": "400",
    "prettier.eslintIntegration": true,
    "editor.cursorStyle": "line",
    "editor.cursorWidth": 5,
    "editor.renderWhitespace": "all",
    "editor.fontLigatures": true,
    "editor.smoothScrolling": true,
    "editor.cursorBlinking": "expand",
    "editor.cursorSmoothCaretAnimation": "on",
    "workbench.list.smoothScrolling": true,
    "editor.mouseWheelZoom": true,
    "editor.wordWrap": "on",
    "editor.fastScrollSensitivity": 10,
    "editor.guides.bracketPairs": true,
    "editor.bracketPairColorization.enabled": true,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.acceptSuggestionOnEnter": "smart",
    "editor.suggest.insertMode": "replace",
    // 补全括号选择
    "editor.autoClosingBrackets": "beforeWhitespace",
    "editor.autoClosingDelete": "always",
    "editor.autoClosingOvertype": "always",
    "editor.autoClosingQuotes": "beforeWhitespace",
    // 关闭缩进猜测
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
    "window.dialogStyle": "custom",
    "debug.showBreakpointsInOverviewRuler": true,
    // 文件夹紧凑模式
    "explorer.compactFolders": true,
    "notebook.compactView": true,
    // 自动补齐`HTML`尖括号
    "editor.linkedEditing": true,
    "html.format.wrapAttributes": "preserve",
    "html.format.wrapLineLength": 70,
    "html.format.indentHandlebars": true,
    // 格式化自动删分号
    "javascript.format.semicolons": "remove",
    "typescript.format.semicolons": "remove",
    // 类型提示
    "javascript.inlayHints.enumMemberValues.enabled": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": false,
    "javascript.inlayHints.parameterNames.enabled": "none",
    "typescript.inlayHints.enumMemberValues.enabled": true,
    "typescript.locale": "zh-CN",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.preferences.preferTypeOnlyAutoImports": true,
    "typescript.preferences.includePackageJsonAutoImports": "on",
    "javascript.suggest.autoImports": true,
    "typescript.suggest.autoImports": true,
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    "vue.updateImportsOnFileMove.enabled": true,
    "vue.inlayHints.missingProps": true,
    "vue.autoInsert.dotValue": true,
    "files.autoGuessEncoding": true,
    // 保存自动删除末尾空格
    "files.trimTrailingWhitespace": false,
    "path-intellisense.mappings": {
        "@": "${workspaceFolder}/src"
    },
    // 搜索吸附目录
    "search.searchEditor.singleClickBehaviour": "peekDefinition",
    "editor.stickyScroll.enabled": true,
    "workbench.tree.enableStickyScroll": true,
    // 终端配置
    "terminal.integrated.shellIntegration.suggestEnabled": true,
    "terminal.integrated.stickyScroll.enabled": true,
    "terminal.integrated.gpuAcceleration": "on",
    "accessibility.signals.terminalCommandFailed": {
        "sound": "auto",
        "announcement": "auto"
    },
    "workbench.iconTheme": "material-icon-theme",
    "workbench.list.fastScrollSensitivity": 10,
    "workbench.colorTheme": "Pretty Dark Theme",
    "editor.foldingImportsByDefault": true,
    // index 替换成 目录名
    "workbench.editor.customLabels.patterns": {
        "**/index.vue": "${dirname}.vue",
        "**/index.js": "${dirname}.js",
        "**/index.ts": "${dirname}.ts",
        "**/index.jsx": "${dirname}.jsx",
        "**/index.tsx": "${dirname}.tsx"
    },
    "markdown.experimental.updateLinksOnPaste": true,
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    },
    // 行内样式代码补全
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    "editor.wordSeparators": "`~!@%^&*()=+[{]}\\|;:'\",.<>/?（），。；：",
    "editor.minimap.enabled": false,
    "editor.foldingStrategy": "indentation",
    // JSX
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "typescript": "javascriptreact"
    },
    "emmet.excludeLanguages": [
        "javascript",
        "typescript"
    ],
    "search.followSymlinks": false,
    "liveServer.settings.donotVerifyTags": true,
    "update.mode": "manual",
    "search.exclude": {
        "**/node_modules": true,
        "**/pnpm-lock.yaml": true,
        "**/package-lock.json": true,
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.idea": true,
        "**/.svn": true,
        "**/.vscode": true,
        "**/build": true,
        "**/dist": true,
        "**/tmp": true,
        "**/yarn.lock": true
    },
    // 配置文件关联
    "files.associations": {
        // 比如小程序中的 .wxss 这种文件 会把它作为css文件来处理 提供对应的css的语法提示 css的格式化等。
        "*.wxss": "css",
        "*.wxml": "html",
        "*.svg": "html",
        "*.xml": "html",
        "*.wxs": "javascript",
        // json注释
        "*.cjson": "jsonc",
        "*.json": "jsonc"
    },
    "css.lint.unknownAtRules": "ignore",
    "scss.lint.unknownAtRules": "ignore",
    "less.lint.unknownAtRules": "ignore",
    "togglequotes.chars": [
        "'",
        "`"
    ],
    "explorer.copyRelativePathSeparator": "/",
      "java.configuration.runtimes": [
          {
            "name": "JavaSE-1.8",
            "path": "F:\\javaee\\jdk\\jdk1.8.0_281",
          },
          {
            "name": "JavaSE-11",
            "path": "F:\\javaee\\jdk\\jdk-11.0.10",
          },
        ],
     "workbench.startupEditor": "newUntitledFile",
      "java.errors.incompleteClasspath.severity": "ignore",
       "java.jdt.ls.java.home": "F:\\javaee\\jdk\\jdk-11.0.10",
      "files.exclude": {
          "**/.classpath": true,
          "**/.project": true,
          "**/.settings": true,
          "**/.factorypath": true
      },
      "editor.suggestSelection": "first",
      "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
      "xml.java.home": "",
      "spring.initializr.defaultLanguage": "Java",
      "spring.initializr.defaultJavaVersion": "8",
      "spring.initializr.serviceUrl": [
           "https://start.aliyun.com"
          ],
      "java.configuration.maven.userSettings": "F:\\javaee\\apache-maven-3.6.3\\conf\\settings.xml",
      "maven.executable.path": "F:\\javaee\\apache-maven-3.6.3\\bin\\mvn.cmd",
      "maven.terminal.useJavaHome": true,
      "maven.terminal.customEnv": [
          {
              "environmentVariable": "JAVA_HOME",
              "value": "F:\\javaee\\jdk\\jdk1.8.0_281"
          }
      ],
      "concourse.ls.java.home": "",
      "java.configuration.maven.globalSettings": "F:\\javaee\\apache-maven-3.6.3\\conf\\settings.xml",
      "java.project.outputPath": "",
    "spring-boot.ls.java.home": "",
      "open-in-browser.default": "Chrome",
      "liveServer.settings.CustomBrowser": "chrome",
      "cloudfoundry-manifest.ls.java.home": "F:\\javaee\\jdk\\jdk1.8.0_281",
      "sonarlint.ls.javaHome": "F:\\javaee\\jdk\\jdk1.8.0_281",
      "workbench.iconTheme": "material-icon-theme",
      "java.test.log.level": "error",
      "java.debug.logLevel": "info",
    "vsicons.dontShowNewVersionMessage": true,
    "files.autoSave": "afterDelay",
    "java.jdt.ls.vmargs": "-XX:+UseParallelGC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx1G -Xms100m -javaagent:\"c:\\Users\\zhujw\\.vscode\\extensions\\vscjava.vscode-lombok-1.0.1\\server\\lombok.jar\"",
    "redhat.telemetry.enabled": true,
    "editor.semanticTokenColorCustomizations": {

    },
    "workbench.colorTheme": "Cobalt2",
    "Lingma.LocalStoragePath": "C:\\Users\\zhujw\\.lingma",
    "terminal.integrated.enableMultiLinePasteWarning": false,
    "git.autofetch": true,
    "git.enableSmartCommit": true,
    "explorer.confirmDelete": false,
    "diffEditor.useInlineViewWhenSpaceIsLimited": false,
    "workbench.editor.enablePreview": false,
    "git.confirmSync": false,
    "vue.server.hybridMode": true,
    "[vue]": {
      "editor.defaultFormatter": "Vue.volar"
    },
    "tabnine.experimentalAutoImports": true,
     
    // 行内样式代码补全
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    "editor.wordSeparators": "`~!@%^&*()=+[{]}\\|;:'\",.<>/?（），。；：",
    "editor.minimap.enabled": false,
    "editor.foldingStrategy": "indentation",
    // JSX
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "typescript": "javascriptreact"
    },
    "emmet.excludeLanguages": [
        "javascript",
        "typescript"
    ],
    "search.followSymlinks": false,
    "liveServer.settings.donotVerifyTags": true,
    "update.mode": "manual",
    "search.exclude": {
        "**/node_modules": true,
        "**/pnpm-lock.yaml": true,
        "**/package-lock.json": true,
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.idea": true,
        "**/.svn": true,
        "**/.vscode": true,
        "**/build": true,
        "**/dist": true,
        "**/tmp": true,
        "**/yarn.lock": true
    },
    // 配置文件关联
    "files.associations": {
        // 比如小程序中的 .wxss 这种文件 会把它作为css文件来处理 提供对应的css的语法提示 css的格式化等。
        "*.wxss": "css",
        "*.wxml": "html",
        "*.svg": "html",
        "*.xml": "html",
        "*.wxs": "javascript",
        // json注释
        "*.cjson": "jsonc",
        "*.json": "jsonc"
    },
    "css.lint.unknownAtRules": "ignore",
    "scss.lint.unknownAtRules": "ignore",
    "less.lint.unknownAtRules": "ignore",
    "togglequotes.chars": [
        "'",
        "`"
    ],
    "explorer.copyRelativePathSeparator": "/",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "cSpell.languageSettings": [
    

    
    ]
   }

补充另外一种方法：Settings Sync 插件一键备份和恢复配置

使用 Settings Sync 插件

Settings Sync 是一个流行的 VSCode 插件，允许用户同步设置、键绑定、工作区设置和扩展（插件）到 GitHub Gist 或远程服务器。

安装步骤：只需在 VSCode 中搜索并安装 Settings Sync 插件，按照提示登录 GitHub 账户，并选择一个 Gist 来存储你的配置。

优点：能够一键备份和恢复配置，极大简化了迁移流程。