2023年春节前夕mac笔记本罢工了，开工后喜提了红米笔记本w11系统，搭建前端环境时，下载了VScode编辑器，从而来汇总一下vscode常用的一些插件和设置问题，从而得到一款不卡顿的编辑器。
一、vscode下载
我是在笔记本的store商店下载的，当然大家也可以去vscode官网下载（https://code.visualstudio.com/Download），安装步骤不在赘述。
二、常用插件
1、chinese 简体中文
适用于想汉化vscode界面的同学，安装后使用ctrl+shift+p，并重启软件 更新配置，可以在扩展界面搜索 display language 回车选择简体中文，配置生效
2、live server
开启一个本地服务器，支持代码热更新，修改代码后自动刷新页面
使用：在html页面点击鼠标右键，选择open in live server选项
3、html css support
4、open in browser
打开浏览器浏览功能
5、prettier 代码格式化
安装完成
在设置界面搜索format
editer default formatter 设置为prettier
并勾选format on save(保存时格式化)
6、css peek 定位样式的插件
7、JavaScript (ES6) code snippets（js的快速插入）
8、Bracket Pair Color DLW 快速匹配括号颜色，已经并入vscode
9、Vetur （vue插件）
属性自动换行的问题，不换行的操作如下：
vs安装vetur插件
打开vscode的设置界面，找到format->default formatter.html
设置好之后，往下滑到Format：defaultF偶然Matter option，在setting.json中设置信息
"vetur.format.options.tabSize": 4, // 每个缩进级别的空格数，由所有格式化程序继承
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// - auto: 仅在超出行长度时才对属性进行换行
// - force: 对除第一个属性外的其他每个属性进行换行
// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐
// - force-expand-multiline: 对每个属性进行换行
// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐
// - force-expand-multiline：属性折行对齐方式 "wrap_attributes": "auto", "wrap_line_length": 1200, // 设置一行多少字符换行 "semi": false,
// 是否在每行末尾添加分号 "singleQuote": true, // 使用单引号
},
// 补充：script标签内 js 代码保存自动换行的问题
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.scriptInitialIndent": true,
// js部分是否有初始缩进
"vetur.format.styleInitialIndent": true,
// style部分是否有初始缩进
}
10、ES7 React/Redux/GraphQL/React-Native snippets（react插件）
11、Code Spell Checker（检查代码拼写是否正确）
12、project-tree（自动生成项目目录文件结构树，并写入readme中）
使用shift+ctrl+p输入project tree 找到需要生成目录的项目回车
三、快捷键
新建文件：ctrl+n
文件之间的切换：ctrl+tab
放大视图：ctrl+加号键
缩小视图：ctrl+减号键
全屏显示：F11
生成骨架屏：输入“ ！”，按下tab键
利用插件在浏览器中预览：点击鼠标右键，在弹出出口中点击“open in default browser”
注释：ctrl+/
四、vscode setting配置
方式一、界面操作
1、字体设置
2、html标签同步修改功能，等同于auto rename tag 插件
打开设置，搜索linked editing， 勾住该选项
2、settings.json文件
打开方式：ctrl + shift + p,搜索settings(JSON),选用户设置的settings,打开文件设置相关信息
详细配置可参考：
https://zhuanlan.zhihu.com/p/676121508
五、总结vscode配置
方式：1、插件， 2、设置界面操作， 3、settings.json文件
