VS Code Extension外掛套件

在建立React應用程式之前，建議可先安裝VS Code Extension外掛套件，
用 VS Code 編寫 React 應用程式時可以快速又方便的編寫程式，可以自動完成元件架構，尤其在寫jsx 的時候可以少打很多東西，能更有效地開發 React 應用程式。

1. ES7 React/Redux/GraphQL/React-Native snippets

此套件可以輕鬆地為 React生成語法和代碼片段，每次需要創建一個新組件時(new component)，只需編寫rce（對於類組件）或rfce or rfc（對於功能組件），打 rccp 就可以自動完成元件架構。

例如：

imr →import React from 'react'
imrd→import ReactDOM from 'react-dom'

rafce → 這個會很常用到

import React from 'react'

const Card = () => {
    return (
        <div>
            
        </div>
    )
}

export default Card

rfc →

import React from 'react'

export default function test() {
    return (
        <div>
            
        </div>
    )
}

rccp→

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class test extends Component {
    static propTypes = {
        prop: PropTypes
    }

    render() {
        return (
            <div>
                
            </div>
        )
    }
}

2.Prettier

Prettier可以將代碼格式化並使其看起來清晰為美觀且易於編寫與閱讀程式。

網路上還有許多推薦的VS Code Extension外掛套件，可依需求而安裝。