webstorm

我从开始做前端到现在，几乎是天天用ws，当然Vscode 也用过（除了以前的切图仔前端用的dreamweaver），用了大约7年+多了，ws真不亏是前端神器，真心强大的不行，除了占内存和收费两个缺点外，也没啥缺点，当然 vscode 也很不错，很轻量，可以安装很多插件，下面share一下个人使用ws的一些Tips，I hope can help you！

---

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>

• 新建 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>
    )
  }
}

6. 代码模板 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 即可，这个算是高阶技巧啦。

7. 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 , 就是把某个分支的一次提交，合并在当前分支，右键某个提交记录即可。

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"]
    }
  }
}