前端项目搭建与调试

一.VsCode安装与使用
1.1下载VsCode
VS Code的当前版本为1.61,支持Windows,Ubuntu,Mac
https://code.visualstudio.com/Download
在这里插入图片描述

1.2 安装
VS Code的安装比较简单,一直下一步即可。安装完成后打开,界面如下:
在这里插入图片描述

1.3 Vscode的简单介绍
搜索,如果资源管理器文件过多,可通过输入内容查询在这里插入图片描述
1.4 扩展,搜索内容后安装需要的插件,长使用的插件为
在这里插入图片描述

配置类插件
Beautity:格式化代码工具,美化JavaScript,json,css,sass和HTML在Visual Studio代码
在这里插入图片描述

Atuo Rename Tag
修改html标签,自动帮你完成头部和尾部闭合标签的同步修改
Code Spell Checker
代码拼写检查器
一个与camelCase代码配合良好的基本拼写检查程序。
此拼写检查程序的目标是帮助捕获常见的拼写错误,同时保持误报数量较低。
在这里插入图片描述

guides
显示代码对齐辅助线,很好用
在这里插入图片描述

Path Intellisense
可自动填充文件名。
在这里插入图片描述

代码提示提示类
(1).HTML Snippets
完整的HTML代码提示,包括HTML5
在这里插入图片描述

(2).HTML CSS Support
在 html 标签上写class 智能提示css样式
在这里插入图片描述

(3).jQuery Code Snippets
jQuery代码提示
超过130个用于JavaScript代码的jQuery代码片段。
只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。
在这里插入图片描述

(4).HTMLHint
html代码检测,支持html5
在这里插入图片描述

语言相关
VUE插件
Vetur 语法高亮、智能感知Emmet等
VueHelper snippet代码片段
ESLint 将ESLintJavaScript集成到VS代码中。
Prettie 代码规范性插件
1.5 快捷键
查找替换
查找: Ctrl+F
查找替换: Ctrl+H
ctrl+^\ `:打开终端调试,依次打开查看-》集成终端,打开终端调试窗口,或者快捷键
编辑器与窗口管理
新建文件: Ctrl+N
文件之间切换: Ctrl+Tab
打开一个新的VS Code编辑器: Ctrl+Shift+N
切出一个新的编辑器窗口(最多3个): Ctrl+
切换左中右3个编辑器窗口的快捷键: Ctrl+1 Ctrl+2 Ctrl+3

代码编辑-格式调整

代码行向左或向右缩进: Ctrl+[ 、 Ctrl+]
复制或剪切当前行/当前选中内容: Ctrl+C 、 Ctrl+V
代码格式化: Shift+Alt+F
向上或向下移动一行: Alt+Up 或 Alt+Down
向上或向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down
在当前行下方插入一行: Ctrl+Enter
在当前行上方插入一行: Ctrl+Shift+Enter

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值