一、vs code 常用插件
安装方法:点击vscode左侧扩展,搜索插件,点击安装
- Path Intellisense 可以查找文件路径
- Auto Rename Tag 改变开始标签自动修改结尾标签
- Document This js 的注释模板( 按两次 Ctrl+Alt+D ,只在js文件中有效)
- beautify 格式化代码的工具
- AutoFileName 文件路径自动补全插件
- ESLint 添加对 ESLint 的支持
- Project Manager 项目管理器插件,可以在你的编辑器中快速切换项目
按F1,输入pm会出来相关的命令
打开文件件,选择响应的save命令进行保存,后续才能打开
- Settings Sync 设置同步插件( 方法参考:https://blog.csdn.net/u012207345/article/details/78246623#commentBox )
- Align 使代码根据 =,: 等对齐
- npm Intellisense 在 import 导入语句中自动完成npm 模块。
- Vetur vue开发者才需安装,包含语法高亮、代码片段、Emmet、代码格式化、错误检测功能
二、vs code 常用快捷
- 命令面板:F1(命令面板可以执行相应插件)
- 重命名:F2
- 跳转定义(切出新编辑器): Ctrl + Alt + click
- 跳转定义(切出新tab):F12 或 Ctrl + 左键点击文件
- 快速定位文件 ctrl + p
- 分割编辑窗口 ctrl+ \
- 快速调出终端 Ctrl+`
- ctrl + d 选择同样元素
- shift + tab 移动代码
三、Emmet
输入 div 回车
<div></div>
扫描二维码关注公众号,回复:
3901514 查看本文章
<!-- div.className -->
<div class="className"></div>
输入 div#IDname 回车
<div id="IDname"></div>
输入ul>li*2 回车
<ul>
<li></li>
<li></li>
</ul>
更多阅读:http://www.w3cplus.com/tools/emmet-cheat-sheet.html
四、snippets 定义代码片段,便于快速复用
依次点击:左下角设置图标=》用户代码片段=》在顶部弹出框中选择新建代码片段,起个名字保存后,生成的文件注释中有下面一段,把注释去掉,修改对应的内容即可,各项内容含义看下面注释。
"Print to console": { //是智能提示显示的
"scope": "javascript,typescript",
"prefix": "log", //用户输入此处字符进行提示
"body": [//代码片段写在此处
"console.log('$1');", // $1代表光标位置
"$2"
],
"description": "描述"
}
这样定义后,下次输入log,就会显示提示,在提示中选择我们定义的那项,就会将代码片段插入,光标自定义到相应的$1处