前端神器 webstorm 使用技巧

webstorm

本人几乎从开始做前端到现在，几乎是天天用ws，用了大约5年多了，ws真不亏是前端神器，真心强大的不行，下面share一下个人的一些Tips，希望对别人有所帮助。

---

1. 修改 编辑器字体

File-> Settings -> Editor -> Color Scheme -> Color Scheme Font
通过以上path来修改字体，本人一直使用 Consolas字体

2. 修改console 字体

File-> Settings -> Editor -> Color Scheme -> Console Font

3. 修改快捷键

File-> Settings -> KeyMap
常用快捷键如
ctrl + d复制一行
ctrl + y删除当前行
ctrl + j代码快速生成
ctrl + g快速定位到第几行

4. 修改皮肤

File-> Settings -> Editor -> Color Scheme -> General
可以选择ws自带的皮肤，并可以修改相关语法的颜色背景等。
除了ws自带的皮肤，还可以下载更多的皮肤 传送门，个人觉得其实默认的皮肤darcula就挺好看的

5. 修改新建文件模板

File-> Settings -> Editor ->File and Code Templates
新建文件时，会带一些预定义的内容，如新建一个html ，我的模板是这样的

<style>
	* {
	   padding:0;
	   margin:0;
	 }
</style>
<div id="app">
</div>
<script>
</script>

当然js什么的都可以 , 比如新建一个js文件，自带文件头 ，标出文件的信息，后期维护就非常方便

/**
*@title 购物车模块 
*@author 大黄 
*@date ${DATE} ${TIME}
*/

6. 代码模板

File-> Settings -> Editor -> Live Templates
当我们写react 组件，实现一个组件，要手写一大堆相同的代码，严重的浪费时间，其实只需要快捷键 ctrl + j , 然后输入rcfc 即可生成一个全周期的 React 类组件，其他语法模板，如angular、vue或者普通js都可以选择性的增加或者删除，大大加快写代码速度
import 和 export 同样可以简化

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Connect extends Component {
  constructor(props) { super(props); }
  componentWillMount() {}
  componentDidMount() {}
  componentWillReceiveProps(nextProps) {}
  shouldComponentUpdate(nextProps, nextState) {}
  componentWillUpdate(nextProps, nextState) {}
  componentDidUpdate(prevProps, prevState) {}
  componentWillUnmount() { }
  render() {
    return (
      <div>
      </div>
    );
  }
}
Connect.propTypes = {};
export default Connect;

7. git使用

在底部的 Version Control 板块，就是git的工具了，非常之强大，同样可以配置自己喜欢的快捷键

右下角可以管理本地和远程分支 ,切换分支，新建分支，重命名分支，删除分支，merge之类的操作都可以

git 快捷操作 更新，提交， 文件历史，回退

写代码时，经常要revert 和 diff文件 ，所有修改的文件，都在下边，非常之方便

ws的git功能实现太强大，下面是几个工作场景

1. 分支对比 文件对比 编辑器内 右键 git compare with branch目录对比 ,选中目录 右键 git compare with branch
2. 回退单个文件，右键 git revert

8. 查找

ws的查找也巨强，支持正则！！！

• Match Case大小写匹配
• Words是匹配整个单词，如 查找 Reac勾选 Words 则找不到，因为必须是Reac， React肯定不匹配整个单词
• Regex就是正则了
• 最右边是匹配了几个结果，下图为 One match ，就一个结果 2020
  
  ws同样支持全局搜索和文件夹搜索，如在一个文件夹搜索 input.js ，只需要右键文件夹 Find in Path
  

9. debug

ws 的debug也很方便 ，如图，只需要在文件的行数上，点击出现一个红点，然后右键debug这个文件即可，下边的面板，会有每个变量的值 ，调试一些源码很方便，比如看webpack的源码 。

10. TODO

快速定位未完成的任务