如何利用webstorm快速开发

做前端开发我个人很喜欢用webstorm，即便曾经很多人推荐IntelliJ IDEA、VSCode，但是我觉得webstorm更专注于前端，用起来更得心应手，下面整理了些利用webstorm的优势进行快速开发的小技巧。

一、快速编写CSS

webstorm为几乎每个css属性设置了快捷方式，而且非常智能，最主要的是用起来非常方便顺手。
比如width: 10px;就可以通过w10+Tab键轻松呈现，此时属性值单位会默认px，若想得到width: 10%，直接在后面加%w10%+Tab键。再比如border-right: 10px;我们可以br10+Tab键生成。
还有一种神奇的速写法，border: 1px solid #000;可以直接bd++Tab键。
一般来说属性名首字母+属性值首字母就是简写的方式，对于缩写后一样的css属性，表现方式就略有区别，比如position: relative;简写就是por+Tab键；而padding-right简写才是pr
列举一些常见的css属性，大家举一反三
width: 10px;---w10
width: 10%;---w10%
height: 10px;---h10
color: #000;---c
font-size: 10px---fs10
text-align: left---ta
display: block---d
display: inline---di
display: inline-block---dib
border: 1px solid #000---bd+
background: #fff url() 0 0 no-repeat;---bg+
border-radius: 5px;---bdrs
cursor: pointer;---cu
display: flex;---df
align-item: center;---aic
justify-content: center;---jcc

二、创建webstorm模版

相信大家在写代码的时候，一定需要反复写同样的代码。比如新建一个react文件，下面的代码一般来说是必要的。

/**
 * 模版名字
 */
import React, {Component} from 'react';
import {connect} from 'dva';

class classname extends Component {
  state = {};

  componentDidMount() {

  };

  render() {

    return (
      

    )
  }
}
function mapStateToProps(state) {
  return {};
}
export default connect(mapStateToProps)(classname);

这么多的代码一句句敲下来是很繁琐且没有意义的，这时，我们可以利用webstorm的模版一键搞定。首先要做一定的配置，虽然有一点点小麻烦，但是相信我，此举很值得。

1. 找到webstorm的配置，mac上如下图：

   
   
   

   img1.png

2. 在设置中搜索live，找到Live Templates，创建一个Live Templates

   
   
   

   img2.png
3. 像下图一样配置，就完成啦
   
   

   img3.png
   接下来保存你的配置，当你在js文件里输入react+Tab键，就出现了以上那坨代码，以后每次你需要那坨代码的时候，就输入react按Tab键就OK啦，省时省力又逼格满满。凡是你想简化编写的代码都可以配置哦。有时你可能忘了自己配置的模版名字，不用打开设置去看，Commond J会帮你show出该文件可用的模板

三、webstorm常用快捷键

对于快捷键，可能每个人webstorm并不相同，当你用不习惯某一个快捷键时，可以根据自己的习惯重新配置它。下面列举些mac下webstorm快捷键，windows下把Command替换成Ctrl。
注释代码以行的形式：Command /
注释代码以块的形式：Command Shift /
全选：Command A
复制行 或 选中内容：Command C
复制当前文件路径：Command Shift C （引入文件时快速定位路径）
粘贴：Command V
从历史复制内容里粘贴：Command Shift V （最近五条）
重新生成行 或 选中内容：Command D
剪切行 或 选中内容：Command X
删除行：Command backspace
将光标定在多行：alt 鼠标定位 （同时修改多个相同的变量）
多行选中相同的内容：alt J
上下移动行： alt 上键， alt 下键
反向删除：Fn backspace
撤销：Command Z
恢复撤销：Command Shift Z
在当页搜索：Command F
在当页搜索并替换：Command R
在全局搜索：Command Shift F
在全局搜索并替换：Command Shift R
按文件名搜索：Shift Shift
格式化代码：Command alt L
将选中字符大写：Command Shift U
关闭当前页签：Command W
打开最近关闭的页签：Command E
快速查看选中变量的定义：Command Y
快速查看选中变量的描述： F1
重命名变量及其引用：Shift F6(会将该变量的所有引用一同重命名)
关闭webstorm：Command Q
react开发中，引入一个组件作为标签来使用时，可以不用急着写import，我们直接书写标签若跳出提示并且包括该标签，直接选中并回车，webstorm会自动帮你补全并import的。
在尝试快捷键时不经意间发现了一个很方便的小功能，选中内容后Command Shift Y会打开Mac的便签功能，会直接新建一个便签，并把选中的内容复制过来，方便记录。mac的便签功能真的不错，当你写了一段很有灵魂的代码，它可以帮你快速记录下来，待会再整理归档在自己的小知识库里。当然你可以记录除了代码所有你想记录的，比如今天要做的工作，需求变动的地方，一个思路一个灵感……
接下来介绍快捷键的查找和修改：

• 找到设置中的Keymap，会看到右侧所有快捷键
• 可以通过输入框查找快捷键：例如Copy，会找到Copy对应的快捷键Command C
• 或者通过直接键入快捷键查找，点击输入框右侧按钮，直接键盘点击Command C，会出现该快捷键的描述

• 右击该快捷键条目，会出现添加快捷键，移除快捷键的选项，直接操作即可

  
  
  

  img4.png
  
  
  

  img5.png