[开发工具]前端常用编辑器的快捷键

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

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

一、Vs Code 常用快捷键

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常用快捷键

从整个项目中查找某一个字符
选中项目，鼠标右击

常用设置

关闭eslinet

滚轮修改字体大小

保存自动格式化文件

提交代码的快捷操作

三、HbuildX常用快捷键

这里预设方案为它自己

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

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