VS code 合集

目录

一、vs code 界面调整为中文

二、进行分栏

三、安装好webpack-dev-server后运行报错

四、在浏览器打开html页面（open in browser插件）

五、保存html文件后，浏览器自动刷新

六、Vetur 插件

七、Auto Close Tag 插件 和 Auto Rename Tag 插件

八、vue导入组件路径提示插件（Path Autocomplete插件）

---

一、vs code 界面调整为中文

1、方法一：通过快捷键设置中文

• 打开VSCode：首先，启动你的VSCode软件。
• 使用快捷键：按住键盘上的Ctrl+Shift+P组合键，这将打开命令面板。
• 输入命令：在命令面板的输入框中，输入Configure Display Language，然后从下拉列表中选择Configure Display Language选项。
• 选择中文：在弹出的语言选择列表中，选择zh-cn，这表示简体中文。
• 重启VSCode：点击列表中的Restart按钮，重启VSCode软件。
• 验证结果：重启后，VSCode的界面将变成中文。

2、方法二：通过设置菜单设置中文

• 打开VSCode：同样，首先启动你的VSCode软件。
• 访问设置：点击菜单栏中的“文件”(File)选项，在下拉菜单中选择“首选项”(Preferences)，然后点击“设置”(Settings)。
• 搜索设置：在设置页面中，通过搜索框快速找到locale选项。这个选项用于设置VSCode的区域语言。
• 选择中文：在locale选项的右侧下拉菜单中，选择zh-cn，表示简体中文。
• 保存并重启：保存设置后，重启VSCode软件。
• 验证结果：重启后，VSCode的界面将变成中文。

3、方法三：安装中文插件

如果以上两种方法都无法将VSCode设置成中文，可以尝试安装中文插件。

• 打开扩展商店：在VSCode中打开扩展商店(Extensions view)，可以通过点击菜单栏中的“查看”(View)选项，然后选择“扩展”(Extensions)来打开。
• 搜索中文插件：在扩展商店中搜索“Chinese”或“中文”，会出现很多中文插件。
• 安装插件：选择一个评分较高的中文插件，点击“安装”(Install)按钮。
• 重启VSCode：安装完成后，按照插件的提示重启VSCode。
• 验证结果：重启后，VSCode的界面将变成中文。

二、进行分栏

1、选择要进行分栏的文件

2、向右进行分栏：点击“小图标”或者使用快捷键“ctrl+\”

3、向下进行分栏：按住alt键，再点击“小图标”

三、安装好webpack-dev-server后运行报错

webpack-cli报错: Class constructor ServeCommand cannot be invoked without ‘new‘

解决方案：

1、卸载webpack-cli：npm uninstall webpack-cli

2、重新安装webpack-cli：npm install webpack-cli

四、在浏览器打开html页面（open in browser插件）

 1、点击左侧的扩展，打开扩展栏

2、在扩展栏目的搜索栏中输入“open in browser”，找到“open in browser”，点击这个小栏目右下角的“安装”（我已经安装好了，所有没有“安装”小图标了，只有一个齿轮）

3、安装完成后，回到html页面，右击选择”open in default browser”或者” open in other browsers”

五、保存html文件后，浏览器自动刷新

1、功能实现

（1） 打开visual studio code

（2） 选择“终端”>”新终端”

（3） 输入“npm install live-server -g”，等待live-server安装完毕

（4） 输入“live-server”，启动live-server

2、卡bug了

启动“live-server”时遇到的问题：无法加载文件 E:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170

3、解决方案

（1）退出软件，以管理员身份运行vs code

（2）在vs code终端执行：get-ExecutionPolicy

显示Restricted（表示状态是禁止的）

（3）在vs code终端执行：set-ExecutionPolicy RemoteSigned

（4）在vs code终端执行：get-ExecutionPolicy

显示RemoteSigned表示开启，即可。

六、Vetur 插件

功能：Vue开发必备，支持Vue语法高亮、片段（snippets）、Emmet等

七、Auto Close Tag 插件 和 Auto Rename Tag 插件

功能：自动闭合尾部的标签，以及修改HTML标签时自动同步修改头部和尾部闭合标签

在扩展中安装 auto close Tag 和 auto rename tag，安装完成后不需要做任何配置，也不需要重新启动vscode即可使用。

八、vue导入组件路径提示插件（Path Autocomplete插件）

1、vscode安装 Path Autocomplete插件

2、在项目根目录创建一个 jsconfig.json文件，内容如下

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3、点击左下角齿轮图标 - 设置

4、点击配置按钮，会自动打开settings.json文件

5、将这段代码粘贴到settings.json文件的顶部 - 保存 - 关闭页面

//导入文件时是否携带文件的拓展名
"path-autocomplete.extensionOnImport": true,
//配置@的路径提示
"path-autocomplete.pathMappings": {
    "@": "${folder}/src"
},

6、重启vscode

7、测试