Một số extension Visual Studio Code hữu ích cho React Native
Bài đăng này đã không được cập nhật trong 6 năm
Chào các bạn .
Như mọi người thấy Visual Studio Code IDE đã và đang được lựa chọn là ưu tiên hàng đầu để làm về React/React Native . Bên cạnh đó cũng có rất các extension đi cùng với IDE này để tăng tốc độ phát triển cũng như cho dev có cái nhìn trực quan nhất .
Dưới đây tôi xin được list ra một số extension hữu ích trong Visual Studio Code .
Để giúp bạn dễ dàng cài đặt danh sách Extension này, tôi đã đã tạo VSCode Extension Pack , RN Full Pack.
Pack này đã bào gồm tất cả các extension mà tôi sẽ giới thiệu bên dưới đây .
Phần 1 : Fundamentals
Những extension này liên quan đến việc giúp tôi viết code nhanh hơn và trông có vẻ dễ đọc :
-
Tại sao bạn cần một static type-checker ? Để biết thêm chi tiết bạn có thể đọc tại đây
-
Làm thế nào để có thể viết code tốt hơn bằng cách dùng linter . Bạn có thể tham khảo tại đây
Các extension này bản thân cách đặt tên của chúng đã nói lên được chức năng của chúng nhưng tôi khuyên bạn nên đọc kỹ các README trong mỗi extension để thiết lập chúng một cách chính xác.
Nếu bạn gặp khó khăn trong việc thiết lập chúng hoạt động đúng cách, tôi đã thực hiện hầu hết công việc cho bạn trong repo ở đây, được gọi là react-native-starting-point. Điều này sẽ giúp bạn thiết lập và chạy nhanh chóng với các tính năng chính này . Bạn có thể kiểm tra những file cài đặt trong đó và sao chép vào file cài đặt của bạn .
Phần 2 : Các Extension bổ sung
Các extension dưới cung cấp thêm một vài tính năng nhỏ mà tôi thấy hữu ích .
-
Nếu bạn là tin đồ của Atom IDE , đây là cách dễ nhất để bạn giữ các keybindings mà bạn đã quen thuộc khi dùng Atom IDE
-
3 extensions trên để đơn giản hóa việc quản lý tags
-
Khi viết màu trong hệ HEX, chỉ cần sai 1 ký tự là màu có thể thay đổi hoàn toàn , extension này cho phép bạn có thể xem trước nó tại nơi bạn viết code .
-
Một extension hỗ trợ cho việc quản lý suorce code Git
-
Path Intellisense Các đường dẫn import components/containers/image sẽ rất khó nhớ và khó viết , chỉ cần sai 1 ký tự là cả 1 thư viện bạn import vào sẽ không thể hoạt động . Extension sẽ giúp bạn làm điều đó một cách tự động
-
Trong RN, bạn gặp dấu ngoặc ở khắp mọi nơi , Extension này cung cấp một cách trực quan để biết cái nào chứa cái nào . Sẽ giúp bạn dễ quản lý code hơn .
-
Các file SVG được thêm rất nhiều vào trong 1 dự án RN .Extension này giúp bạn có một cái nhìn trực quan hơn . Điều này có nghĩa là ảnh SVG như thế này 💯 sẽ được hiện diện trong chính code của bạn .
-
Việc để các note là TODO/FIX THIS là thường xuyên trong mỗi dự án . Extension này sẽ Highlight những đoạn note đó lên , giúp bạn dễ nhìn hơn .
-
Việc sai chính tả cũng như ngữ pháp trong code là rất phổ biến . Extension này sẽ Highlight những chỗ sai đó lên giúp bạn nhận ra được lỗi đó (Tiện thể học tiếng anh luôn ) npm & npm intellisense
Phần 3 : Theming
Có rất nhiều chủ đề khác nhau trong VS code , và khi tôi lần đầu tiên viết bài này, tôi đã thiết lập VS code sử dụng chủ đề Ayu; hai chủ đề hay khác mà tôi cảm thấy tôi có thể gợi ý là Darktooth và One Dark (Sublime Babel) .
Để cũng có thể custom lại chủ đề theo ý mình . Vào User settings vào chỉnh sửa lại nội dung setting như vd dưới đây :
“editor.renderWhitespace”: “boundary”,
“editor.rulers”: [100],
“editor.cursorBlinking”: “solid”`
Hy vọng với bài viết này có thể giúp các bạn sự dụng VS code một cách tốt hơn
Bài viết được dịch từ : https://medium.com/react-native-training/vscode-for-react-native-526ec4a368ce
All rights reserved
