当前位置: 博客 /  IDE  / VS Code插件推荐——ES7 React/Redux/GraphQL/React-Native Snippets

VS Code插件推荐——ES7 React/Redux/GraphQL/React-Native Snippets

工具推荐

推荐一个好用的提高开发效率的VS Code插件:ES7 React/Redux/GraphQL/React-Native snippets

官方介绍:

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code

通俗解释:

使用简写命令,生成基础代码片段。

地址

安装地址:https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

GitHub地址:https://github.com/dsznajder/vscode-es7-javascript-react-snippets

基本使用步骤

  1. 将插件安装到VS Code

  2. 新建一个test.js文件,输入rce,Enter或者Tab

  3. 该插件会自动生成如下代码,组件名称默认与文件名相同:

import React, { Component } from 'react'

export class test extends Component {
  render() {
    return (
      <div>

      </div>
    )
  }
}

export default test

简介

支持的语言(文件扩展名)| Supported languages (file extensions)

JavaScript (.js)
JavaScript React (.jsx)
TypeScript (.ts)
TypeScript React (.tsx)

片段信息 | Snippets info

Every space inside { } and ( ) means that this is pushed into next line :) $ represent each step after tab.

{ }和( )中的空格表示换行,$表示生成后光标所在位置,提示后续修改的地方

命令分类

  1. Basic Methods

https://github.com/dsznajder/vscode-es7-javascript-react-snippets#basic-methods

  1. React

https://github.com/dsznajder/vscode-es7-javascript-react-snippets#react

  1. React Native

https://github.com/dsznajder/vscode-es7-javascript-react-snippets#react-native

  1. Redux

https://github.com/dsznajder/vscode-es7-javascript-react-snippets#redux

  1. PropTypes

    https://github.com/dsznajder/vscode-es7-javascript-react-snippets#proptypes

  2. GraphQL

https://github.com/dsznajder/vscode-es7-javascript-react-snippets#graphql

  1. Console

https://github.com/dsznajder/vscode-es7-javascript-react-snippets#console

  1. React Components

https://github.com/dsznajder/vscode-es7-javascript-react-snippets#react-components

  1. React Native Components

https://github.com/dsznajder/vscode-es7-javascript-react-snippets#react-native-components

  1. Others

https://github.com/dsznajder/vscode-es7-javascript-react-snippets#others

小建议

  1. 建议按照文档全部浏览一遍,并且实践几次,因为在你知道一个东西之前不会想到去用它;

  2. 新手可以用来学习如何写正确的或者建议的基础代码。

- END -