README

开发效率工具集合。

Features

1. 将 require 语法转化为 import 语法。

需要在编辑器中选中需要转换的文本内容，点击右键，在菜单中可以看到操作选项。

// 转化前
require('./index.scss');
var Btn = require('./btn');
var Left = require('./left');
var withPlaceholder = require('component/hoc/withPlaceholder');

// 转化后
import './index.scss';
import Btn from './btn';
import Left from './left';
import withPlaceholder from 'component/hoc/withPlaceholder';

2. 将 React.createClass 语法转化为 React.Component 语法

需要在编辑器中选中整个 React.createClass 代码段，点击右键，选择 将 createClass 升级为 Component.

1. 可以将 React.createClass 方式转化为 React.Component 方式
2. 可以将旧的 getDefaultProps 转化为 static defaultProps
3. 可以将旧的 getInitialState 转化为 constructor 中的 this.state = {...} 方式

注意：第2、3点仅支持getDefaultProps、getInitialState为直接 return 函数的情况。如果函数中有多余的逻辑，则会降级转化成普通的类方法。

// 转化前
var Carousel = React.createClass({
  getDefaultProps: function() {
    return {
      minLen: 1,
      maxLen: 4,
      className: '',
      isSaleCenter: false
    };
  },
  getInitialState: function() {
    return {
      slideCount: React.Children.toArray(this.props.children).length,
    };
  },
  componentDidUpdate: function() {
    if(this.state.slideCount > 1) {
      this.initSwiper();
    }
  },
});

// 转化后
class Carousel extends React.Component {
  static defaultProps = {
    minLen: 1,
    maxLen: 4,
    className: '',
    isSaleCenter: false
  };
  constructor(props) {
    super(props);
    this.state = {
      slideCount: React.Children.toArray(this.props.children).length
    };
  }
  componentDidUpdate() {
    if (this.state.slideCount > 1) {
      this.initSwiper();
    }
  }
}

3. 在资源管理器目录中便捷初始化 React 组件文件夹

在资源管理器中，对需要初始化 React 组件文件夹的目录点击右键，选择：初始化React组件文件夹，然后在弹出的提示窗中输入组件名。插件会创建对应的文件夹，并生成.jsx和.scss文件

4. 新页面初始化

调用“新页面初始化”命令，输入页面路径即可生成该页面对应的Nunjucks模板、页面组件以及路由配置