3.vscode常用配置

https://blog.csdn.net/fmwind/article/details/118977950

1、下载安装

2、配置中文

安装完之后会有提示安装中文插件,或者扩展插件中搜索chinese,然后安装

手动切换流程也并不复杂，可使用以下三个步骤手动切换

按下 ctrl + shift + P（Mac 版请按下 cmd + shift + P）

输入 display language 就会跳出 “Configure Display Language”

选择安装的语系 “zh-cn” 即可安装

3、VSCode常用插件

3.1 Auto Close Tag (自动闭合HTML/XML标签)

3.2 HTML CSS Support (智能提示CSS类名以及id)

3.3 Icon fonts(图标字体)

3.4 open in browser(右键快速在浏览器中打开html文件)

3.5 Vetur(Vue多功能集成插件，错误提示等)

3.6 Live Server（在 vscode 中就可以直接启动一个本地服务，并且能监听文件变化自动刷新网页）

3.7 IntelliCode（微软推出的一款代码智能提示插件，和别的插件不同的是，采用的是 AI 技术，吸收了 github 上成千上万的优秀代码，还会结合你日常的编码习惯不断学习进化）

3.8 eslint 能够检测代码语法问题，与格式问题，对项目代码风格统一至关重要。

3.9 Vue 3 Snippets vue常用参数补全

3.10 Vue VSCode Snippets常用参数补全(和上面的提示功能相似，可以自己对比下载)

3.11 vscode-icons （开启漂亮图标）

4、创建文件夹

vscode是没办法直接在工具上创建文件夹的，必须要在电脑创建项目名称，打开之后才可以创建文件夹。同样根目录也是没办法直接删除的，要从电脑上删除掉才可以。

4.1首先在电脑上创建文件夹，也就是项目的名称，打开vscode并打开之前创建的文件夹，如下页面，此时就可以在根目录下创建新文件夹了

5、创建html文件

step1

step2

step3 在html文件上输入【!】叹号，然后按键盘的【Tab】建

可以点击【文件】然后点击【保存】或者按快捷键【ctrl+s】进入保存界面，【输入html文件名称】，选择html的后缀【html】，最后点击保存， 此种方法找扩展名比较麻烦，推荐用第一种方式

6、修改默认浏览器

选择文件—首选项—设置，在搜索栏输入open-in-browser.default，出现以下在编辑框中编辑 会看到右侧多了工作区设置，如你想默认谷歌打开，那就设置默认浏览器为Chrome，如果是火狐，就设置Firefox

7、设置自动提示

VSCode的快捷键是Ctrl+space！和windows系统默认设置冲突

文件 - 首选项 - 键盘快捷方式 ！会打开快捷键界面

调出界面！直接在键盘输入你要设置的快捷键方式！然后按enter! 我设置的是Alt+/

8、配置自动保存

很多同学刚学习使用VScode写代码，遇到了一个问题，修改以后的代码没有生效，其实原因是代码没有保存。

如图：当文件标签右边出色白色的点，就是文件发生了变动，尚未保存。

VSCode跟其它所有的编辑器的保存快捷键一样，都是Ctrl+S，所以要养成随时按快捷键保存的习惯。

设置自动保存：

File ——Preference —— Settings

在搜索栏输入auto save 搜索，把off修改为On Focus Change，也就是只要鼠标离开代码窗口，就会自动保存。

9、自定义vue代码补全

10、vscode常用快捷方式

快速生成	实现方式	说明
生成标签	直接按标签名称回车即可	无须按<
生成无序列表5列	ul>li*5
生成表格4行5列	table>tr*4>td*5
生成下拉列表5选项	select>option*5
生成带样式main的div	.main
生成样式属性width和height	w100px, h100px
background-color	bgc	取单词首字母
margin-bottom	mb	取单词首字母