1. 常用插件及配置

1.1 完整插件及配置总览

总览如下，更多可自行补充：

vscode javascipt vscode javascipt插件_vscode

完整配置如下，可以直接复制到 settings.json 文件，直接完成配置，具体根据实际情况调整

{
  "workbench.colorTheme": "Night Owl",
  "workbench.iconTheme": "material-icon-theme",
  "update.mode": "none",
  "Codegeex.Privacy": false,
  "liveServer.settings.CustomBrowser": "chrome",
  "open-in-browser.default": "chrome",
  "terminal.integrated.defaultProfile.windows": "Command Prompt",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "background.fullscreen": {
    "images": [
      "file:///D:/Pictures/15.jpg",
      "file:///D:/Pictures/3.jpg",
      "file:///D:/Pictures/12.jpg"
    ],
    "opacity": 0.85,
    "size": "cover",
    "position": "center",
    "interval": 1800
  }
}

1.2 Night Owl

可以直接应用 1.1 的完整配置完成该节配置

颜色主题插件，下载完成后在插件页面点击 Set Color Theme，设置主题，或可根据个人偏好选择其他主题插件

vscode javascipt vscode javascipt插件_Vue_02

1.3 Material Icon Theme

可以直接应用 1.1 的完整配置完成该节配置

文件图标主题插件，下载完成后在插件页面点击 Set File Icon Theme，设置主题，或可根据个人偏好选择其他主题插件

vscode javascipt vscode javascipt插件_vscode javascipt_03

1.4 CodeGeeX

可以直接应用 1.1 的完整配置完成该节配置

AI 智能代码补全，或可选择 GitHub Copilot，现已收费。下载完成后打开设置，搜索 CodeGeeX，取消勾选 Privacy 选项，勾选的话会分享自己的代码给 CodeGeeX 用于优化，具体可根据个人选择进行配置

vscode javascipt vscode javascipt插件_vscode_04

1.5 Live Server

可以直接应用 1.1 的完整配置完成该节配置

可以将 HTML 网页用一个虚拟服务器打开，下载完成后打开设置，搜索 Live Server，可以设置默认的浏览器为 Chrome，即谷歌浏览器，具体可根据个人选择进行配置

vscode javascipt vscode javascipt插件_Vue_05

1.6 open in browser

可以直接应用 1.1 的完整配置完成该节配置

网页通过浏览器打开，下载完成后打开设置，搜索 open in browser，可以设置默认的浏览器为 Chrome，即谷歌浏览器，具体可根据个人选择进行配置

vscode javascipt vscode javascipt插件_vscode_06

1.7 Prettier

代码格式化插件，或可选择其他插件，如 ESLint 等。下载完成后在根目录或者需要格式化的目录下创建 .prettierrc 文件，定义 Prettier 的配置信息

{
  "printWidth": 120,
  "singleQuote": true
}

大部分使用官方的默认配置即可，可根据需要自行调整，官网配置地址：Options · Prettier，常用配置如下：

  • printWidth：打印机换行的宽度，即一行的最大宽度，如果超过，会强制每行使用单一属性，默认 80
  • tabWidth：缩进的空格数，默认 2
  • useTabs：使用制表符而不是空格来缩进，默认 false，即不使用制表符
  • semi：在语句末尾加分号，默认 true
  • singleQuote：使用单引号而不是双引号，默认 false，即不使用单引号
  • quoteProps：是否给对象属性加上引号，默认 as-needed
  • trailingComma：是否在多行逗号结构默认加上逗号，默认 all
  • bracketSpacing：在括号间打印空格，默认 true
  • bracketSameLine：标签结尾符放在末尾还是另起一行，默认 false，即不放在末尾
  • arrowParens：是否在箭头函数周围包上括号，默认 always
  • proseWrap：是否更改 Markdown 文本中的换行，默认 preserve，即不做改动
  • htmlWhitespaceSensitivity：指定空白敏感度，即是否允许标签周围存在空格，默认 CSS
  • vueIndentScriptAndStyle：是否缩进 Vue 文件 <script> 和 <style> 标签下的代码，默认 false，这里的缩进会缩进首行，不需要
  • endOfLine：结尾符的格式，默认 lf，仅换行，适用于 Linux、MacOS 以及 Git
  • embeddedLanguageFormatting：是否格式化文件中嵌入的代码，默认 auto
  • singleAttributePerLine：强制每行使用单一属性，默认 false

然后设置编辑器使用 Prettier 来进行格式化，并且设置保存时进行格式化，1.1 的完整配置已包含

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

1.8 Auto Complete Tag

自动补全标签，下面两个插件的聚合包

  • Auto Close Tag
  • Auto Rename Tag

1.9 Open in External App

支持文件以外部应用打开

1.10 Path Intellisense

自动补全文件名

1.11 Vue - Official

目前最新的 Vue 官方插件，提供 Vue 语言支持，使用 Vue 进行开发可选择下载

1.12 background

设置背景图，配置如下，1.1 的完整配置已包含

{
  "background.fullscreen": {
    "images": [
      "file:///D:/Pictures/15.jpg",
      "file:///D:/Pictures/3.jpg",
      "file:///D:/Pictures/12.jpg"
    ],
    "opacity": 0.85,
    "size": "cover",
    "position": "center",
    "interval": 1800
  }
}

具体可见官网地址：shalldie/vscode-background: Bring background images to your vscode.

2. 禁用自动更新

可以直接应用 1.1 的完整配置完成该节配置

打开设置，搜索 update，将 Mode 更改为 none，然后重启即可

vscode javascipt vscode javascipt插件_搜索_07

3. 更换默认终端

可以直接应用 1.1 的完整配置完成该节配置

默认终端为 Windows Powershell，优点是可以记录之前输入的命令，但如果存在多版本环境，如多个版本的 Node.js，需要进行切换时，Powershell 无法即时应用更改，可以更换终端为 CMD

按下快捷键 Ctrl + Shift + P，搜索选择 Terminal：Select Default Profile

vscode javascipt vscode javascipt插件_vscode javascipt_08

然后选择终端类型为 CMD

vscode javascipt vscode javascipt插件_编辑器_09

4. 定义用户代码片段

点击 User Snippets，输入 vue 进行搜索，选择 vue.json

vscode javascipt vscode javascipt插件_搜索_10

模板代码如下：

{
    "vue-template": {
	"prefix": "vue3",
	"body": [
	    "<template>",
	    "  $1",
	    "</template>",
	    "",
	    "<script setup lang='ts'>",
	    "",
	    "</script>",
	    "",
	    "<style scoped lang='scss'>",
	    "",
	    "</style>",
	]
    }
}

在 Vue 文件里输入 vue3 选择该代码片段即可生成模板，可自行定义更多模版