Viết React nhanh hơn với Tiện ích mở rộng VSCode React Snippets Đơn giản

---

Tôi rất thích tăng tốc mọi phần trong quá trình phát triển của bạn. Nếu bạn cạo đi những giây phút ở đây và ở đó nhiều lần trong ngày, bạn sẽ tiết kiệm được rất nhiều thời gian trong suốt một năm.

Điều này liên quan đến việc sử dụng bàn phím thường xuyên nhất có thể và chạm vào chuột càng ít càng tốt . Mục tiêu của tôi là làm cả ngày mà không cần chạm vào chuột. Vẫn chưa đạt được điều đó.

Học vim là một phần quan trọng để trở nên hiệu quả trong trình soạn thảo của bạn. Ngay cả việc đưa vim vào trình duyệt của bạn với Vimium cũng giúp ích rất nhiều.

Đoạn mã là một cách khác để tiết kiệm thời gian phát triển. Simple React Snippets for VS Code của Burke Holland là một cách tốt để tăng tốc độ phát triển.

Đây là imrc mở rộng để import React, { Component } from 'react'; imrc import React, { Component } from 'react';

Phần mở rộng

Các đoạn mã phản ứng đơn giản có thể được tìm thấy trong Thị trường mở rộng mã VS

Một ví dụ nhanh

Khi nào bắt đầu một file mới phản ứng, tôi sẽ sử dụng imr hoặc imrc đoạn.

• imr -> import React from 'react' imr import React from 'react'
• imrc -> import React, { Component } from 'react' imrc import React, { Component } from 'react'

Đoạn mã

Sau khi cài đặt Phần mở rộng mã VS (có thể phải khởi động lại Mã VS?), Bạn có thể sử dụng các đoạn mã bằng lệnh phím tắt và nhấn Tab hoặc Enter .

Dưới đây là một số đoạn mã hữu ích khi bắt đầu các file mới:

imr - Nhập React

import React from 'react'; 

imrc - Nhập React và Thành phần

import React, { Component } from 'react'; 

cc - Tạo thành phần lớp và xuất

class | extends Component {   state = { | },   render() {     return ( | );   } }  export default |; 

sfc - Tạo một thành phần chức năng không trạng thái

const | = props => {   return ( | ); };  export default |; 

cdm - componentDidMount

componentDidMount() {   | } 

cdu - componentDidUpdate

componentDidUpdate(prevProps, prevState) {   | } 

ss - setState

this.setState({ | : | }); 

ren - kết xuất

render() {   return (     |   ); } 

Kết luận

Có một số đoạn trích khác mà bạn có thể sử dụng mà bạn có thể tìm thấy trên trang chính thức .

---

---

Các tin liên quan