Các VS Code extension dành cho React Developer

Với sự phát triển không ngừng của các công cụ và công nghệ mới hiện nay, các developer có thể xây dựng được trang web, ứng dụng và các giải pháp kỹ thuật số khác nhanh hơn bao giờ hết.

Những công nghệ này cũng giúp các developer dễ dàng chia sẻ với nhau hơn trong các dự án.

Việc tìm kiếm các extension phù hợp đã trở thành một phần không thể thiếu trong thế giới của những code editor.

Mỗi editor đều có các extension hỗ trợ khác nhau nhưng nếu có cho mình bộ extension riêng sẽ giúp nâng cao khả năng viết code của bạn hơn. VS code là một ví dụ đi kèm với danh sách các extension hữu ích của riêng nó.

Nếu là React developer sử dụng VS Code làm code editor chính, thì bộ extension này sẽ giúp bạn tận dụng tối đa khả năng viết code của mình.

Hãy cùng xem qua một số extension VS Code hữu ích nhất dành cho các React developer dưới đây nhé!

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

ES7 React / Redux / GraphQL / React-Native snippets là một trong những extension phổ biến nhất, không chỉ được sử dụng bởi các React developer mà còn bởi các React-Native developer. Nó đi kèm với rất nhiều tiền tố viết tắt (các keyword được định nghĩa sẵn trong extension) mà bạn có thể dễ dàng sử dụng để tăng khả năng lập trình của mình.

Phần extension này cung cấp rất nhiều đoạn code mà bạn có thể chưa biết. Khi đã cài đặt xong, hãy tạo ngay một file mới và nhập rfce , sau đó nhấn enter ,thao tác này sẽ tạo ra một thành phần chức năng React, import React và export component.

Nó còn cho phép bạn tạo các es7 snippet khác nhau trong vòng vài giây bằng cách nhập 'prefix shorthand' và nhấn enter.

Ngoài ra, extension này còn cung cấp các snippet khi bạn đang sử dụng Redux hoặc GraphQL.

2. VSCode React Refactor

VSCode React Refactor tuy đơn giản, nhưng lại rất hữu ích. Chúng cho phép bạn trích xuất các phần JSX code thành một thành phần, file mới,... Hoạt động với các class, function, arrow function và hỗ trợ cho TypeScript và TSX.

3. Prettier

Sau nhiều năm sử dụng Prettier, team React cho rằng đây là một phần extension hữu ích cho bất kỳ dự án nào. Prettier là một công cụ tự động định dạng code cho bạn.

Nó giúp ích rất nhiều cho việc giữ codebase nhất quán, vì bất kể các developer nào cũng có sở thích cá nhân khác nhau, cho nên code sẽ được định dạng theo cùng một cách cho tất cả mọi người.

Bên cạnh các đặc quyền về tính nhất quán, nó còn tiết kiệm được thời gian, vì bạn không cần phải định dạng code theo cách thủ công hoặc thậm chí không cần phải suy nghĩ về cách nó nên được edit như thế nào. Đó là lý do tại sao team React thực sự khuyên bạn nên sử dụng Prettier hơn là code editor.

4. Eslint

ESLint là một extension phổ biến được sử dụng để tìm lỗi và bug trong code. Chúng giúp một developer viết code tốt hơn và chỉ ra được nơi có thể xảy ra lỗi hoặc lỗi có thể xảy ra.

Hơn nữa, nó có thể tự động sửa các lỗi và cảnh báo. Nếu bạn muốn tìm hiểu thêm về ESLint, hãy truy cập vào đường link này nhé.

5. Stylelint

Stylelint, tương tự như ESLint, cũng là một linter, nhưng sẽ style hơn. Chúng có thể phát hiện và làm nổi bật các style không chính xác cũng như giữ cho các style nhất quán và theo thứ tự.

Hơn nữa, nó còn hoạt động với CSS thuần túy cũng như các bộ xử lý trước như SCSS và LESS.

6. GitLens

GitLens tăng cường các khả năng Git được tích hợp trong VS Code. Chúng giúp bạn trực quan hóa quyền tác giả code trong nháy mắt thông qua Git chú thích và code lens, điều hướng và khám phá các kho lưu trữ Git một cách liền mạch, có được thông tin chi tiết có giá trị thông qua các lệnh so sánh và còn nhiều hơn thế nữa.

7. Git History

Phần extension này cho phép bạn xem được nhật ký git, lịch sử file, so sánh các nhánh và commit.

8. Settings sync

Bạn đã bao giờ cài đặt lại hệ điều hành của mình hoặc thay đổi thiết bị mà bạn đang code chưa? Hay tiến hành cài đặt VS code, và sau đó nhận ra rằng bạn cần cài đặt lại tất cả các extension của mình?  Thì đây là cách duy nhất mà bạn cần cài đặt lại - settings sync.

Chúng sẽ tự động lưu các extension và cài đặt VS Code cho bạn và định cấu hình chúng trên cùng một thiết bị.

9. Bracket Pair Colorization Toggler

Extension này rất đơn giản nhưng cực hữu ích. Chúng sẽ làm nổi bật các cặp pairs of bracket cho bạn.

10. Auto Close Tag

Là một phần extension đơn giản và cũng là phần mở rộng hữu ích nhất cho React. Auto close tag tạo một close tag cho một phần tử, nghĩa là developer không cần phải viết close tag. Điều này nghe có vẻ đơn giản nhưng trên thực tế, auto close tag rất hữu ích.

11. Auto Rename Tag

Automatically renames sẽ giúp ghép nối với các HTML/XML tag.

12. Auto Import

Extension này sẽ tự động tìm, phân tích cú pháp và cung cấp các code action và hoàn thành code cho tất cả các lần import có sẵn. Chúng sẽ hoạt động được với TypeScript và TSX.

13. Import Cost

Trong React, việc cài đặt và nhập các package là rất phổ biến và cần thiết. Việc nhập nhiều package cũng có thể gây ra các vấn đề về hiệu suất vì một số package có thể rất nặng. Phần Import Cost extension sẽ hiển thị tất cả kích thước của các package trong trình chỉnh sửa.

14. Jumpy

Làm thế nào để bạn đi từ một dòng code đến một từ khóa cụ thể mà chỉ cách đó vài dòng hay khoảng trắng? Bạn sẽ sử dụng các mũi tên trên bàn phím hay bằng một cú nhấp chuột? Với Jumpy, bạn có thể làm việc hiệu quả hơn nhiều, vì chúng cho phép bạn di chuyển đến một từ cụ thể một cách cực kỳ nhanh chóng.

15. i18n Ally

i18n Ally là extension tuyệt vời khi chúng hỗ trợ cho bạn nhiều ngôn ngữ.

16. Formatting toggle

Có những trường hợp team React muốn tạm thời vô hiệu hóa một code editor như Prettier. Điều này có thể được thực hiện với Formatting toggle extension mà không cần phải sửa đổi cài đặt edit nào.

17. Npm intellisense

Chúng sẽ cung cấp tính năng tự động hoàn thành cho các mô-đun npm trong các câu lệnh import.

18. Web Accessibility

Extension này thật tuyệt khi chúng cải thiện được khả năng truy cập vào các ứng dụng web của bạn. Chúng làm nổi bật các yếu tố mà bạn thay đổi và cung cấp các mẹo về cách chúng nên được cập nhật.

19. Live Share

Bạn mong muốn kết nối với nhiều người khác trên code của mình? Extension này sẽ cho phép bạn chỉnh sửa và gỡ lỗi code với những người khác trong thời gian thực.

20. Better comments

Extension rất hữu ích khi tạo ra nhiều nhận xét thân thiện hơn trong code của chính bạn. Nó có thể phân loại các nhận xét thành cảnh báo, truy vấn, việc cần làm, đánh dấu và hiển thị chúng bằng các màu khác nhau.

21. Markdownlint

Extension này cực kỳ hữu ích cho việc kiểm tra linting và style cho các Markdown file.

22. Docker

Nếu ứng dụng của bạn được triển khai bằng Docker, bạn nên cân nhắc việc sử dụng extension này để có thể dễ dàng xây dựng, quản lý và triển khai các ứng dụng được chứa trong vùng từ VS Code.

23. Remote — SSH

Có phải bạn đang cần việc truy cập máy chủ từ xa để chỉnh sửa file không? Remote SSH sẽ cho phép sử dụng bất kỳ máy từ xa nào có SSH sever làm môi trường phát triển của bản thân. Bạn có thể dễ dàng di chuyển giữa môi trường làm việc từ xa và cục bộ.

24. Remote - WSL

Nếu bạn muốn phát triển ứng dụng của mình trên Linux, nhưng hệ điều hành chính của bạn lại là Windows, thì bạn có thể cân nhắc việc sử dụng Windows Subsystem Linux (WSL).

Nếu sử dụng nó, bạn có thể thấy “Remote - WSL” extension này rất hữu ích, vì nó cho phép bạn sử dụng VS Code trên Windows để xây dựng các ứng dụng Linux. Bạn sẽ nhận được tất cả năng suất của Windows trong khi đang phát triển với các Linux-based tool, runtime, và các extension khác.

25. Live Server

Extension này sẽ giúp bạn nhanh chóng khởi động live server với việc tải lại trình duyệt trực tiếp khi thay đổi file.

26. Debugger for Chrome và Debugger for Firefox

Trình gỡ lỗi này cung cấp rất nhiều chức năng hữu ích, chẳng hạn như tạm dừng thực thi code tại các điểm ngắt, kiểm tra biến và còn nhiều hơn thế nữa. Các phần trong extension này còn cung cấp chức năng gỡ bug bên trong VS code editor.

27. Change-case

Extension này cho phép bạn thay đổi cách viết hoa cho hiện tại. Nó khá hữu ích nếu bạn có một văn bản dài hoặc muốn chuyển đổi nhiều biến sang cùng một cách viết hoa.

28. Regex Previewer

Hầu hết các developer hiếm khi viết biểu thức Regex. Tuy nhiên, nếu trong trường hợp bạn phải làm như vậy, thì Regex Previewer extension có thể sẽ rất hữu ích. Nó giúp hiển thị các kết quả phù hợp của biểu thức chính quy hiện tại trong một tài liệu song song.

29. DotENV

Đánh dấu cú pháp cho các .env file.

30. Inline Parameters for VSCode

Giúp thêm ngữ cảnh bổ sung vào các lệnh gọi hàm.

Kết luận

Đó là tất cả những phần code extension hữu ích dành cho các React developer. Hy vọng bài viết này sẽ giúp bạn tìm thấy được extension tốt nhất và cải thiện được năng suất làm việc cũng như phát triển hơn trong việc xây dựng ứng dụng React của riêng mình.