当前位置: 首页 > 資訊 >

Day02 工欲善其事必先利其器

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外掛套件,可依需求而安裝。