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的工具了，非常之强大，同样可以配置自己喜欢的快捷键
webstorm git
右下角可以管理本地和远程分支 ,切换分支，新建分支，重命名分支，删除分支，merge之类的操作都可以
webstorm git branch
git 快捷操作更新，提交，文件历史，回退

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

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

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

8. 查找

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

Match Case大小写匹配
Words是匹配整个单词，如查找 Reac勾选 Words 则找不到，因为必须是Reac， React肯定不匹配整个单词
Regex就是正则了
最右边是匹配了几个结果，下图为 One match ，就一个结果 2020

ws同样支持全局搜索和文件夹搜索，如在一个文件夹搜索 input.js ，只需要右键文件夹 Find in Path