前端神器 webstorm 使用技巧

webstorm

干了十多年的前端到现在，从开始使用最原始的DreamWeaver之后，几乎就是是天天用ws敲代码了（当然Vscode 也用过，本人不太喜欢）。ws真不亏是前端神器，真心强大的不行，除了占内存和收费两个缺点外，也没啥缺点。当然 vscode 也很不错，很轻量，可以安装很多插件，下面share一下个人使用ws的一些Tips，I hope can help you！

---

1. 修改字体

修改编辑器字体
File-> Settings -> Editor -> Color Scheme -> Color Scheme Font，通过这个路径来修改，本人一直使用 Consolas字体

修改console 字体
File-> Settings -> Editor -> Color Scheme -> Console Font

2. 修改快捷键

File-> Settings -> KeyMap

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

3. 修改主题

File-> Settings -> Editor -> Color Scheme -> General

可以选择ws自带的皮肤，并可以修改相关语法的颜色背景等。除了ws自带的皮肤，还可以下载喜欢的皮肤然后导入（也可以导出），个人就是使用默认的darcula主题。

安装更多皮肤传送门，这里下载到本地，直接import进入到编辑器即可，也可以通过插件的方式来安装。

4. 新建文件模板

File-> Settings -> Editor ->File and Code Templates

这种使用必须使用右键的新建类型文件才可以的

• 新建 Html模板

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

• 新建 JavaScript 文件模板

/**
*@title 购物车模块 
*@author 大黄 
*@date ${DATE} ${TIME}
*/
const a = 1;
for(let i=0;i < 10;i++){
  console.log(i)
}

• 新建 jsx模板，写react必备

import React, {useEffect, useState} from 'react';
import {Button, DatePicker, Table, Pagination, message} from "antd";
import moment from "moment";
import "./index.less"

function Demo() {
  const [value, setValue] = useState('');
  return (
    <div className="demo">demo</div>
  )
}

export default Demo;

class Demo1 extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      current: 1,
      total: 0,
      selectedRowKeys: [],
      value: ''
    }
  }

  componentDidMount() {

  }

  queryData = (page) => {


  }

  API_getList = () => {

  }

  render() {
    const {state, props} = this;
    const {selectedRowKeys} = state;
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys) => {
        this.setState({selectedRowKeys})
      }
    };
    return (
      <div className="page">
        <div className="data-wrapper">
          <Table
            rowSelection={rowSelection}
            dataSource={state.data}
            columns={[]}
            rowKey={(item, index) => index}
            pagination={false}
          />
          <Pagination
            current={state.current}
            total={state.total}
            pageSize={10}
            onChange={page => {
              this.queryData(page)
            }}
          />
        </div>
      </div>
    )
  }
}

5. 代码模板 Live Templates

File-> Settings -> Editor -> Live Templates

当我们写react 组件或者vue组件之类的吧，实现一个组件，要手写一大堆相同的代码，严重的浪费时间，其实只需要在文件里使用快捷键 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;

以上是系统内置的代码片段，也可以自定义代码片段，用自己熟悉的习惯的代码。如图所示，点击 + 号

如图所示，输入缩写名(比如 rcc) 、 描述 、 代码片段，最后点那个define，选择 JavaScript and Typescript 即可，这个算是高阶技巧啦。

6. git使用

在底部的 Version Control 板块，每个webstorm版本的可能不一样，新版本的是git，就是git的工具了，非常之强大，同样可以配置自己喜欢的快捷键。

下图是新版本的底部

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

git 快捷操作 更新，提交， 文件历史（文件历史也很强大），回退

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

如下图所示，可以很方便的看到，文件那些地方改了，要撤回某一行的修改也很简单，点击 >>> 即可

webstorm 的git功能实现太强大，根本就不需要其它的GUI工具了，下面是几个其它的工作场景

1. 分支对比 文件对比 编辑器内 右键 git compare with branch 目录对比 ,选中目录 右键 git compare with branch
2. 回退单个文件，右键 git revert
3. 简单的 cherry pick , 就是把某个分支的一次提交，合并在当前分支，右键某个提交记录即可。

7. Shelf

中文意思是书架、货架，可以理解为git的stash的功能的超级版

如图所示，当某些文件变化，需要暂存时，可以点那个类型下载的按钮，就可以把修改的文件给保存为一条记录。
顶部会增加一个tab，就是shelf，如图所示

右键文件或者这次更改，就可以把这个应用到当前项目

这个功能好处是不需要git也可以使用，而且这条记录只要不删除，可以一直保存。

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

快速定位未完成的任务

11. webstorm无法识别自定义路径问题（webpack配置，craco配置）

项目根目录新建jsconfig.json，亲测可用

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@pages/*": ["src/pages/*"],
      "@pages": ["src/pages"],
      "@components/*": ["src/components/*"],
      "@components": ["src/components"],
      "@assets/*": ["src/assets/*"],
      "@assets": ["src/assets"],
      "@configs/*": ["src/configs/*"],
      "@configs": ["src/configs"],
      "@imgs/*": ["src/assets/images/*"],
      "@imgs": ["src/assets/images"],
      "@utils/*": ["src/utils/*"],
      "@utils": ["src/utils"]
    }
  }
}