前端常用编辑器的快捷键

发布于:2023-01-19 ⋅ 阅读:(578) ⋅ 点赞:(0)

嘿嘿:打代码如打游戏,按键都不清楚,怎么秀出高超的技巧。来look look 前端常用编辑器快捷键大全,记住一两个保证让你敲代码丝滑到起飞。


常用的C V大法还是不显示了

一、Vs Code 常用快捷键

Ctrl+b 切换项目目录的显示和隐藏
Ctrl+~ 切换终端的显示和隐藏
Ctrl+z 返回上一步
Ctrl+y 返回下一步
Ctrl+z 返回上一步
Ctrl+f 查找
Ctrl+h 替换
Ctrl+k+c 单行注释
Ctrl+k+u 取消单行注释
Alt+Shift+a 多行注释
Shift+Alt+up/down 复制当前行
Shift+Alt+拖动鼠标 复制选中区域(配合c v超好用)
Alt+鼠标点击 分出多个光标同时操作
Shift+Ctrl+k 删除当前行
Ctrl+k+0 折叠代码
Ctrl+k+j 展开代码
Ctrl+w 关闭当前编辑窗口
Ctrl+p 查找文件
Ctrl+回车 切换下一行输入

vs Code 便捷设置

在vsCode中点出设置搜索即可找到
保存自动格式化代码
在这里插入图片描述
按住Ctrl+鼠标滚轮切换字体大小
在这里插入图片描述
切换格式化的代码风格(需要提前安装好格式化插件,推存Prettier)
在这里插入图片描述
设置自动保存
在这里插入图片描述

vs Code 个人常用插件库

在这里插入图片描述

vs Code 用户代码片段的使用

在这里插入图片描述
1.搜索javascript.json
在这里插入图片描述
2.编辑属于自己的代码模板
比如这里:
v +回车/Tab 可以出现vue基本模板
random! 可以出现我定义好的获取随机数js模板
ajax! 可以快捷发送请求

{
  "Vue练习": {
    "prefix": "v",
    "body": [
      "Vue.config.productionTip = false;",
      "new Vue({",
      "el: '#root',",
      "data: {",
      "name: '',",
      "},",
      "methods: {",
      "myfun(e) {",
      "console.log(e.target.value);",
      "},",
      "},",
      "});"
    ],
    "description": "基本Vue模板"
  },
  "随机数": {
    //名称
    "prefix": "random!", //快敏捷键  random!
    "body": [
      //内容
      "let d = Math.floor(Math.random() * (max - min) + min); // min<= d <max;",
      "//[min,max] min<= d <max+1",
      "parseInt((Math.random() * (max-min+1)+min))",
      "//(min,max) min+1<= d <max",
      "parseInt((Math.random() * (max-min-1)+min+1 ))"
    ],
    "description": "Math.random()随机数规则" //说明
  },
  "ajax": {
    //名称
    "prefix": "ajax!", //快敏捷键  ajax!
    "body": [
      //内容
      "$.get('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){",
      "console.log(data);",
      "},'json');"
    ],
    "description": "ajax常用" //说明
  },
  "axios": {
    //名称
    "prefix": "axios!", //快敏捷键  axios!
    "body": [
      //内容
      "axios.get('http://localhost:8080/students').then((res) => {",
      "console.log('请求成功了', res.data);",
      "},(error) => {",
      "console.log('请求失败了', error.message);",
      "});"
    ],
    "description": "axios常用" //说明
  }
}

Vs Code 快捷写法(注意:复制没用)

批量有序生成html

ul>li{我是第$个li标签}*10        加上Tab键
<ul>
       <li>我是第1个li标签</li>
       <li>我是第2个li标签</li>
       <li>我是第3个li标签</li>
       <li>我是第4个li标签</li>
       <li>我是第5个li标签</li>
       <li>我是第6个li标签</li>
       <li>我是第7个li标签</li>
       <li>我是第8个li标签</li>
       <li>我是第9个li标签</li>
       <li>我是第10个li标签</li>
</ul>

快速第义标签和类

div.box1+div.box2 加上Tab键

<div class="box1"></div>
<div class="box2"></div>


div.box1>div.box2+div.box3 加上Tab键

<div class="box1">
  <div class="box2"></div>
  <div class="box3"></div>
</div>

二、Webstorm常用快捷键

ctrl+alt+L 格式化当前代码
ctrl+Y 删除一行
ctrl+D 复制当前行
alt+shift+F 将当前文件加入收藏夹
alt+3 打开收藏夹
alt+1 切换项目文件夹隐藏
ctrl+shift+N 快速查找文件夹
选中文本,按Ctrl+Shift+F7 高亮显示所有该文本,按Esc高亮消失。
Ctrl+Shift+z 反撤销操作
ctrl+G 到指定行的代码
Ctrl+E 最近打开的文
F2 高亮错误或警告快速定位
Ctrl+R 替换文本
F11 标记
Ctrl + Alt + 左箭头或者右箭头 返回鼠标上一次位置

从整个项目中查找某一个字符
选中项目,鼠标右击
在这里插入图片描述

常用设置

关闭eslinet
在这里插入图片描述
滚轮修改字体大小
在这里插入图片描述
保存自动格式化文件
在这里插入图片描述
提交代码的快捷操作
在这里插入图片描述


三、HbuildX常用快捷键

这里预设方案为它自己
在这里插入图片描述

1.对项目文件的操作(鼠标点击到某一个文件时)

按键名称 作用
Alt+q 显示/隐藏项目区域
Alt+p 显示/隐藏内置浏览器
Alt+o 显示/隐藏工具栏
Alt+x 显示/隐藏控制台
Ctrl+f5 启动项目(得启动过一次)
Ctrl+r 选择启动项目
Shift+鼠标滚轮 横向滚动
Ctrl + K 格式化代码
Ctrl + / 单行注释
Ctrl + Shift+/ 多行注释
Ctrl + Shift+c 复制文件路径
Alt+鼠标托选 设置区域选中
Ctrl+f2 设置书签
f2 切换下一个书签
Ctrl+Shift+f2 清除所有书签
f2 当前文件重命名(可当作复制文件名使用)
Ctrl + w 关闭当前标签卡
Ctrl + q 关闭其他文件
Ctrl + tab 切换最近的标签卡
Ctrl + Alt+ 滚轮 横向切换标签卡
Ctrl+Alt+鼠标点击某个方法 右侧复制标签卡并定位
Ctrl + shift +t 重开已经关闭的标签卡
Ctrl + p 查找文件
Ctrl + n 新建文件
Alt+Shift+f 打开收藏菜单
Ctrl+Alt+s 全部保存
Ctrl + 回车 向下插入空行
Ctrl + d 删除一行
Ctrl + Shift +R 复制当前行到下一行
Ctrl + y 返回下一步
Ctrl + e 选则下一当前词(可用于搜索)
Ctrl + alt+e 选择所以相同词(可用于替换)
Ctrl+鼠标左击 设置多个光标
Ctrl+鼠标右击 删除一个光标

2.其他相比之下不常用快捷键

按键名称 作用
Ctrl + shift+k 合并行
Ctrl+] 包围
Ctrl+Shift+u 全部字母大写
Ctrl+Shift+l 全部字母小写
Alt+/ 智能提示
Shift+tab 反缩进
Alt+鼠标滚动 加速滚动

网站公告

今日签到

点亮在社区的每一天
去签到