VSCode 常用插件及配置使用

约定不等于承诺〃 2023-09-29 08:48 6阅读 0赞

--------------------

title: VSCode 常用插件及配置使用  
date: 2022-04-05 20:38:14  
tags:

*  VSCode
 *  编辑器
 *  Java  
    categories:
 *  开发工具及环境  
    cover: https://cover.png  
    feature: false

--------------------

#### 文章目录 ####

*  1. 常用插件
 *  2. 配置 Java Home
 *  3. 配置 Maven 的配置文件位置
 *  4. 更改 JDK 版本支持
 *  5. 更换终端为 CMD
 *  6. 设置 open in browser 的默认浏览器
 *  7. 设置 Live Server 的默认浏览器
 *  8. 禁用自动更新
 *  9. 代码格式、ESLint 配置
 *  10. 定义用户代码片段
 *  11. background 配置

## 1. 常用插件 ##

1.  Bracket Pair Colorizer 2
2.  Debugger for Chrome
3.  Auto Close Tag
4.  Auto Rename Tag
5.  Beautify
6.  ESLint
7.  Java extension pack：Java 相关包大全
8.  GitHub Copilot
9.  HTML CSS Support
10. HTML Snippets
11. JavaScript (ES6) code snippets
12. Live Server：可以将 html 网页用一个虚拟服务器打开
13. Material Icon Theme
14. Night Owl：主题插件
15. open in browser：网页通过浏览器打开
16. Open in External App：文件以外部应用打开
17. Path Intellisense
18. Spring Boot Extension Pack：Spring Boot 相关包大全
19. Vetur
20. Vue 3 Snippets
21. backbackground

![在这里插入图片描述][fd070d654f31447c99923b5c92cde1c8.png]

## 2. 配置 Java Home ##

**打开设置，搜索 javahome，在 Java Home 里输入 Java JDK 的路径**  
![在这里插入图片描述][9b7920b50477452bbee1fc892fc860d7.png]  
**可以看到用户配置里多了我们一条配置的信息**  
![在这里插入图片描述][88dc43f1eb8f4139a329e2a6fd76db33.png]

## 3. 配置 Maven 的配置文件位置 ##

**打开设置，搜索 maven，在 Maven: User Settings 里输入 maven 配置文件的路径**  
![在这里插入图片描述][6dbc085e0e9a497aa12c64576dd684e8.png]  
**可以看到用户配置里多了我们一条配置的信息**  
![在这里插入图片描述][5dfe21714b57419a8d619d9ceb8ed7ab.png]

## 4. 更改 JDK 版本支持 ##

**新版默认最低支持 JDK 11，需要重新修改为 JDK 8**  
**找到 Language Support for Java™ by Red Hat，安装另一个版本为 0.64.1**  
![在这里插入图片描述][d1f1d917c189443b86691b4683dd0467.png]  
![在这里插入图片描述][ee5c54f13b02484584da0e9aecda3659.png]

## 5. 更换终端为 CMD ##

**默认终端为 Windows Powershell，更换为 CMD，按下快捷键 Ctrl + Shift + P，然后输入 terminal 进行搜索，选择 Terminal：Select Default Profile**  
![在这里插入图片描述][fe343d03c013460a8c8c545891cfb803.png]  
**然后选择终端类型为 CMD**  
![在这里插入图片描述][abd8f91350b446ba8e1220ec76237dbb.png]  
**可以看到用户配置里多了我们一条配置的信息**  
![在这里插入图片描述][22c239d1eb744ed9b1b5fd5000c8e6a3.png]

## 6. 设置 open in browser 的默认浏览器 ##

**打开设置，搜索 open in browser，将默认浏览器设为 Chrome 或者其他自己选择的浏览器**  
![在这里插入图片描述][6eba65b49b7c4f7c8b72cb7a8a5d686e.png]  
**可以看到用户配置里多了我们一条配置的信息**  
![在这里插入图片描述][5471474059a84551af3c1c8bf6897085.png]

## 7. 设置 Live Server 的默认浏览器 ##

**打开设置，搜索 live server，在下拉框选择默认的浏览器**  
![在这里插入图片描述][ed5be37ea99044438e2c4bf10d039fac.png]  
**可以看到用户配置里多了我们一条配置的信息**  
![在这里插入图片描述][029a34a3ab5f4457b7d589b35126e9f5.png]

## 8. 禁用自动更新 ##

**打开设置，搜索 update，将 update mode 更改为 none，然后重启即可**  
![在这里插入图片描述][87f1115f90c04a1f8a400d58a330d607.png]  
**可以看到用户配置里多了我们一条配置的信息**  
![在这里插入图片描述][edf1ad0fff774c20b224e4c337a53d5a.png]

## 9. 代码格式、ESLint 配置 ##

{
        
      "bracket-pair-colorizer-2.depreciation-notice": false,
      "editor.inlineSuggest.enabled": true,
      "workbench.iconTheme": "material-icon-theme",
      "workbench.colorTheme": "Night Owl",
      "java.home": "C:/Java/JDK1.8.0_131",
      "java.configuration.maven.userSettings": "D:/DevelopmentTools/NewMaven/apache-maven-3.8.2/conf/settings.xml",
      "terminal.integrated.defaultProfile.windows": "Command Prompt",
      "open-in-browser.default": "Chrome",
      "liveServer.settings.CustomBrowser": "chrome",
      "update.mode": "none",
      // vscode 默认启用了根据文件类型自动设置 tabsize 的选项，这里关闭
      "editor.detectIndentation": false,
      // 重新设定 tabsize
      "editor.tabSize": 2,
      // 每次保存的时候自动格式化代码
      "editor.formatOnSave": true,
      // 每次保存的时候将代码按 eslint 格式进行修复
      "editor.codeActionsOnSave": {
        
        "source.fixAll.eslint": true
      },
      // 配置 eslint 验证规则
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue",
      ],
      // 让函数(名)和后面的括号之间加个空格 不加空格 false
      "javascript.format.insertSpaceAfterFunctionParenthesis": false,
      // 格式化 html 代码
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      // 让 vue 中的 js 按编辑器自带的 ts 格式进行格式化
      "vetur.format.defaultFormatter.js": "vscode-typescript",
    }

## 10. 定义用户代码片段 ##

**点击 User Snippets**  
![在这里插入图片描述][d5a15e74a60d4988881e82cb6d85046b.png]  
搜索 html，选择 HTML 的 html.json  
![在这里插入图片描述][587a6c0d8efb4e8ea040afaa6b2cfe59.png]

{
        
      "HTML模板": {
        
        "prefix": "html",
        "body": [
          "<!DOCTYPE html>",
          "<html lang=\"\">",
          "",
          "<head>",
          "  <meta charset=\"utf-8\">",
          "  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
          "  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">",
          "  <title>$1</title>",
          "</head>",
          "<body>",
          "  <div id=\"app\">",
          "    $2",
          "  </div>",
          "  <script>",
          "    new Vue({",
          "      el: '#app',",
          "      data() {",
          "        return {",
          "          $3",
          "        }",
          "      },",
          "    })",
          "  </script>",
          "</body>",
          "</html>"
        ]
      }
    }

**在 html 文件里输入 html 选择该代码片段即可生成模板**

## 11. background 配置 ##

{
        
      // background 配置
      "background.enabled": true,
      "background.useDefault": false,
      "background.style": {
        
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "center",
        "background-repeat": "no-repeat",
        "background-size": "cover",
        "opacity": 0.2
      },
      "background.fullscreen": {
        
        "image": [
          "file:///C:/Users/Fan/Pictures/壁纸/3.jpg", // 图片的url
          "file:///C:/Users/Fan/Pictures/壁纸/2.jpg",
          "file:///C:/Users/Fan/Pictures/壁纸/1.jpg",
          "file:///C:/Users/Fan/Pictures/壁纸/4.jpg"
        ],
        // "image": ["https://pathtoimage.png"], // 当开启轮播图的时候，可以用数组配置多张图片
        "opacity": 0.65, // 建议值 0.85 ~ 0.95
        "size": "cover", // css, 建议使用 `cover`自适应，或者 `contain`、`200px 200px`
        "interval": 1800 // 设置图片轮播切换间隔 `秒` 数，默认 `0` 表示不开启
      },
      "background.loop": true,
    }

[fd070d654f31447c99923b5c92cde1c8.png]: https://img-blog.csdnimg.cn/fd070d654f31447c99923b5c92cde1c8.png
[9b7920b50477452bbee1fc892fc860d7.png]: https://img-blog.csdnimg.cn/9b7920b50477452bbee1fc892fc860d7.png
[88dc43f1eb8f4139a329e2a6fd76db33.png]: https://img-blog.csdnimg.cn/88dc43f1eb8f4139a329e2a6fd76db33.png
[6dbc085e0e9a497aa12c64576dd684e8.png]: https://img-blog.csdnimg.cn/6dbc085e0e9a497aa12c64576dd684e8.png
[5dfe21714b57419a8d619d9ceb8ed7ab.png]: https://img-blog.csdnimg.cn/5dfe21714b57419a8d619d9ceb8ed7ab.png
[d1f1d917c189443b86691b4683dd0467.png]: https://img-blog.csdnimg.cn/d1f1d917c189443b86691b4683dd0467.png
[ee5c54f13b02484584da0e9aecda3659.png]: https://img-blog.csdnimg.cn/ee5c54f13b02484584da0e9aecda3659.png
[fe343d03c013460a8c8c545891cfb803.png]: https://img-blog.csdnimg.cn/fe343d03c013460a8c8c545891cfb803.png
[abd8f91350b446ba8e1220ec76237dbb.png]: https://img-blog.csdnimg.cn/abd8f91350b446ba8e1220ec76237dbb.png
[22c239d1eb744ed9b1b5fd5000c8e6a3.png]: https://img-blog.csdnimg.cn/22c239d1eb744ed9b1b5fd5000c8e6a3.png
[6eba65b49b7c4f7c8b72cb7a8a5d686e.png]: https://img-blog.csdnimg.cn/6eba65b49b7c4f7c8b72cb7a8a5d686e.png
[5471474059a84551af3c1c8bf6897085.png]: https://img-blog.csdnimg.cn/5471474059a84551af3c1c8bf6897085.png
[ed5be37ea99044438e2c4bf10d039fac.png]: https://img-blog.csdnimg.cn/ed5be37ea99044438e2c4bf10d039fac.png
[029a34a3ab5f4457b7d589b35126e9f5.png]: https://img-blog.csdnimg.cn/029a34a3ab5f4457b7d589b35126e9f5.png
[87f1115f90c04a1f8a400d58a330d607.png]: https://img-blog.csdnimg.cn/87f1115f90c04a1f8a400d58a330d607.png
[edf1ad0fff774c20b224e4c337a53d5a.png]: https://img-blog.csdnimg.cn/edf1ad0fff774c20b224e4c337a53d5a.png
[d5a15e74a60d4988881e82cb6d85046b.png]: https://img-blog.csdnimg.cn/d5a15e74a60d4988881e82cb6d85046b.png
[587a6c0d8efb4e8ea040afaa6b2cfe59.png]: https://img-blog.csdnimg.cn/587a6c0d8efb4e8ea040afaa6b2cfe59.png