【第一节】VS Code中的一些骚操作,设置,做完这些,前端开发仿佛加了“瑞士军刀”!

vs code现在作为开发,尤其是前端开发,不知道给前端开发者提供了多少便捷,简直就是IDE中的开发神器!废话不多说,看着一篇文章就够了,整合了常用的vs中的方法!

第一节:vs code中常用的插件

第二节:vs code中常用的快捷键

HTML

  • auto close tag : 自动闭合HTML标签
    在这里插入图片描述
  • auto rename tag :自动更改闭合标签
    在这里插入图片描述
  • HTML CSS Support: CSS自动提示
    在这里插入图片描述

CSS

  • beautify css/sass/scss : 格式化
    在这里插入图片描述
  • color highlight :颜色值高亮显示
    在这里插入图片描述
    VUE
  • vetur :vue语法高亮
    在这里插入图片描述
  • vueHelper :vue代码帮助
    在这里插入图片描述

代码注释

  • better comments :编写更加人性化的注释
    在这里插入图片描述
  • eslint: eslint高亮提示
    在这里插入图片描述
  • guides: 高亮缩进基准线
    在这里插入图片描述
  • Chinese : 汉化
    在这里插入图片描述
  • open in browser 打开浏览器预览
    在这里插入图片描述

如何快速格式化

快捷键: Alt+ Shift+F
在这里插入图片描述

如何保存即可自动格式化代码的方法?

  • 打开首选项设置
    在这里插入图片描述
  • 找到user
    在这里插入图片描述
  • 添加配置信息
    在这里插入图片描述
"editor.formatOnType": true, 
"editor.formatOnSave": true,

如何让文档自动保存?

在这里插入图片描述
其实就上上面设置的

 "files.autoSave": "afterDelay"

如何快速编码,拒绝单调的重复输入?

生成固定结构

新建的html文件是什么内容都没有的空文件,每次新建之后我们都要写那一坨一模一样的固定结构,但是又懒得去记那十几行的东西
在VSCode中编辑.html文件只需要输入一个 感叹号!(英文的) 然后一回车就可以自动生成这个固定结构了

输入内容:

!

在这里插入图片描述
在这里插入图片描述

HTML部分快捷键

  • 生成标签直接输标签名回车即可

输入内容

div 回车

生成:
在这里插入图片描述

  • 生成多个相同标签输标签名之后输个*后面加上个数
    输入内容
a*5

生成:
在这里插入图片描述

  • 父子级关系的标签用>连接
    输入内容
ul>li*3

生成
在这里插入图片描述
再比如,输入内容:

tr*3>td*5

输出
在这里插入图片描述

  • 兄弟关系的用+连接
    输入内容
h1+div*3+p+ul>li*3

输出
在这里插入图片描述

  • 带有类名或id名的
    输入内容:
div.header

输出
在这里插入图片描述
输入内容

div#headers

输出
在这里插入图片描述

  • 标签内部有内容的内容用{}括起来
    输入内容
div{names}

输出
在这里插入图片描述

  • 自增符号$
    输入内容
div.div$*3

输出
在这里插入图片描述
再比如:
输入内容

 div*3{$}

CSS部分

敲的时候直接敲缩写就好
输入内容:

div {
    w200
}

在这里插入图片描述
结果如下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

其他便捷操作

同时添加多个光标:
单个添加: 将光标放在一个位置,然后按住Alt键的时候用鼠标点击其他地方,点到的地方就会添加一个光标出来
添加一整列: 按住Shift+Alt然后鼠标下拉,即可添加一整列光标
在这里插入图片描述

已标记关键词 清除标记
相关推荐
<p> <b><span style="font-size:14px;"></span><span style="font-size:14px;background-color:#FFE500;">【Java面试宝典】</span></b><br /> <span style="font-size:14px;">1、68讲视频课,500道大厂Java常见面试题+100个Java面试技巧与答题公式+10万字核心知识解析+授课老师1对1面试指导+无限次回放</span><br /> <span style="font-size:14px;">2、这门课程基于胡书敏老师8年Java面试经验,调研近百家互联网公司及面试官的问题打造而成,从筛选简历和面试官角度,给出能帮助候选人能面试成功的面试技巧。</span><br /> <span style="font-size:14px;">3、通过学习这门课程,你能系统掌握Java核心、数据库、Java框架、分布式组件、Java简历准备、面试实战技巧等面试必考知识点。</span><br /> <span style="font-size:14px;">4、知识点+项目经验案例,每一个都能做为面试的作品展现。</span><br /> <span style="font-size:14px;">5、本课程已经在线下的培训课程中经过实际检验,老师每次培训结束后,都能帮助同学们运用面试技巧,成功找到更好的工作。</span><br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><b>【超人气讲师】</b></span><br /> <span style="font-size:14px;">胡书敏 | 10年大厂工作经验,8年Java面试官经验,5年线下Java职业培训经验,5年架构师经验</span><br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><b>【报名须知】</b></span><br /> <span style="font-size:14px;">上课模式是什么?</span><br /> <span style="font-size:14px;">课程采取录播模式,课程永久有效,可无限次观看</span><br /> <span style="font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span><br /> <br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><strong>如何开始学习?</strong></span><br /> <span style="font-size:14px;">PC端:报名成功后可以直接进入课程学习</span><br /> <span style="font-size:14px;">移动端:<span style="font-family:Helvetica;font-size:14px;background-color:#FFFFFF;">CSDN 学院APP(注意不是CSDN APP哦)</span></span> </p>
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页