VSCode统一前后端文档

一、软件下载

• 软件地址下载

Documentation for Visual Studio Code

二、软件汉化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B0uCKmDL-1669770108463)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

三、插件下载（插件和快捷键可以参考下面的文章）

参考文章：https://blog.csdn.net/weixin_45601379/article/details/100550421

所有插件从下面的插件商店进行下载，根据个人需要下载相关的插件，具体下载安装方式如下1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FsGWl094-1669770108466)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

1.文件类型一目了然插件vscode-icons

插件商店搜索 vscode-icons，进行下载安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P3JgBbMI-1669770108468)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

2.自动格式化代码插件

Beautify(格式化html,js,css)

3.自动闭合HTML/XML标签插件

Auto Close Tag

4.自动完成另一侧标签的同步修改插件

Auto Rename Tag

5.给括号加上不同的颜色，便于区分不同的区块

Bracket Pair Colorizer

6.映射vscode上的断点到chrome上，方便调试

Debugger for Chrome

7.js语法纠错，可以自定义配置

ESLint

8.方便查看git日志

GitLens

9.智能提示CSS类名以及id

HTML CSS Support

10智能提示HTML标签，以及标签含义

HTML Snippets

11.ES6语法智能提示，以及快速输入

JavaScript(ES6) code snippets

12.jQuery代码智能提示

jQuery Code Snippets

13实时预览markdown

Markdown Preview Enhanced

14.markdown语法纠错

Markdownlint

15.vscode图标主题

Material Icon Theme

16图标字体

Icon fonts

17.右键快速在浏览器中打开html文件

open in browser

18自动提示文件路径

Path Intellisense

19Vue多功能集成插件，错误提示等

Vetur

20.智能提示HTML class =“”属性

Class autocomplete for HTML

21require 时的包提示

npm Intellisense

22.⼀键搭建各类语⾔言的学习测试环境

Code Runner

23.Chrome 联动调试

Debugger for Chrome

四、常见问题

前端开发常见问题

进行前端开发，需要自定义html5和vue模板

1.VScode自定义html5模板

参考文章：VSCode 自定义html5模板 - 汉唐风雨夜 - 博客园

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iUXiZ1wX-1669770108470)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mO23rtMR-1669770108472)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

打开html.json,粘贴下面的代码至原大括号中

“h5 template”: {

“prefix”: “vh”, // 对应的是使用这个模板的快捷键

“body”: [

“”,

“”,

“”,

“\t”,

“\t”,

“\t”,

“\t”,

“\t