React Native – Cách Debug chương trình trong Visual Code

0
95
Bài này thuộc phần 2 của 6 phần trong series React Native Training cho người mới

Mình từng nghĩ rằng mình là một developer điên rồ. Thật đấy! Không biết người khác đã từng làm điều này hay không?  Đó là dành rất nhiều thời gian để thử nghiệm và chuyển đổi giữa các IDE, thử các framework mới. Mặc dù nó không giải quyết được các vấn đề của mình.

Sau khi đã thử hằng hà vô số loại IDE, thì mình cũng chốt được một số IDE khá hài lòng: Webstorm, Atom và Sublime.

Khi mình bắt đầu học React Native, công việc đầu tiên của mình đó là tìm kiếm IDE tốt nhất cho React Native. Sau khi cũng đã thử Atom, Sublime…cuối cùng mình phát hiện ra Visual Code. Mình đã thử VS code khi nó mới phát hành. Tuy nhiên, sau khi thử phiên bản từ 1.0.0, mình mới thực sự thích nó. Một lý do chính là sự hỗ trợ gỡ lỗi khá mượt mà bằng cách sử dụng plugin react-native-tools.

Bài viết này, mình sẽ trình bày việc thiết lập VS code để hỗ trợ và debug tốt nhất cho React Native. Mình sẽ liệt kê tất cả các plugin mình đang sử dụng để debug và một số cài đặt mà mình phải thay đổi để hỗ trợ mã ES6 trong VS code.

Lưu ý: Mình thực hiện bài viết trên Visual code trên MAC OS nên các phím tắt sẽ là dành cho máy Mac. Các bạn sử dụng Window hay Ubuntu thì tham khảo danh sách phím tắt ở cuối bài viết nhé

Tải và cài đặt

Bạn có thể tải phiên bản mới nhất của VS code tại đây. Nó chỉ nhẹ như Atom hoặc Sublime.
Cài đặt các gói npm như sau:

npm install -g typescript eslint babel-eslint

Cài đặt các Plugin

Việc cài đặt các plugin trong VS code khá dễ dàng. Bạn chỉ cần mở ứng dụng, nhấn CMD+SHIFT+P (trong OSX) và gõ ext install. Đợi vài giây, sau đó VS code sẽ hiển thị các plugin (phần mở rộng) có sẵn.

Danh sách các plugin cần thiết:

  • React Native Tools
  • ESLint
  • Visual studio code settings sync (điều này hữu ích khi chia sẻ cài đặt giữa nhiều hệ thống)
  • Material theme of OneDark theme (điều này phụ thuộc sở thích của bạn, bạn có thể chọn theme khác)
  • Babel ES6/ES7 (để làm nổi bật cú pháp)

Cấu hình Visual Code

Điều đầu tiên mình muốn đối với việc code React Native là đảm bảo rằng tất cả các tập tin js của mình được xử lý như javascript với hỗ trợ react.

Thứ hai là linting trong VS code support ES6 không được tốt cho lắm. Bạn sẽ thường gặp các lỗi kiểu thế này:

debug trong react native

Để khắc phục những vấn đề này thì mình sẽ thêm đoạn cấu hình như bên dưới (Nhấn CMD +, VS sẽ mở cửa sổ cài đặt cho bạn)

{
    "files.associations": {
        "*.js": "javascriptreact"
    },
    "javascript.validate.enable" : false
}

Điều này sẽ tắt các warning mặc định và cho phép làm nổi bật JSX bên trong các tập tin JS.

Tạo một tập tin .eslintrc trong root thư mục và thêm đoạn code sau:

{
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "es6": true
  },
  "plugins": [
    "react"
  ]
}

Các phím tắt bàn phím

Trước khi tiếp tục, hãy thử sử dụng các phím tắt này. Chúng sẽ có ích cho bạn.

  • Chuyển đổi output console: CMD+SHIFT+U
  • Mở panel gỡ lỗi: CMD+SHIFT+D
  • Chuyển đổi debug console: CMD+SHIFT+Y
  • Chuyển đổi panel của tập tin: CMD+B
  • Mở command pallete: CMD+SHIFT+P
  • Tìm tập tin bất kỳ: CMD+P
  • Tìm ký tự bất kỳ: CMD+SHIFT+O
  • Đổi tên biến: F2

Tiến hành Debug trong React native

Khi bạn đã cài đặt plugin react-native-tools, bạn có thể bắt đầu debug ứng dụng react-native. Để làm được điều này, trước tiên  bạn phải thêm các cài đặt cấu hình cho trình debug

Nhấn CMD + SHIFT + D và kích vào icon play như minh họa trong hình dưới đây:

debug trong react native

Visual Code sẽ yêu cầu bạn chọn môi trường để gỡ lỗi. Chọn react-native từ trình đơn thả xuống. Sau đó, một tập tin launch.json mới sẽ được tạo.

Để bắt đầu gỡ lỗi, mở cửa sổ lệnh (command window) bằng cách nhấn CMD+SHIFT+P và gõ Debug Run

Bây giờ bạn có thể thấy rằng trình debugger sẽ đính kèm vào react native packager và chạy react-native run-android

Lưu ý: Nếu bạn đang chạy Debug trên Chrome cho react-native thì cần tắt nó đi. Nếu không thì việc debug từ Visual Code sẽ không hoạt động.

Tạm kết

Ok, như vậy là đã cài đặt và cấu hình xong để có thể debug được rồi.

Để debug, bạn chỉ cần đặt breakpoint vào bất cứ dòng code nào mà bạn cần và bắt đầu debug. Bạn sẽ cảm thấy việc debug này giống như đang làm trên trình duyệt Chrome, chỉ khác là được thực hiện ngay từ trình IDE. Quá tuyệt phải không?

Nếu thấy bài viết có ích thì share và comment bên dưới nhé

Phụ lục

Để thuận tiện cho các bạn không sử dụng máy Mac, mình có đính kèm file tổng hợp tất cả các phím tắt của Visual Code trên Window hay Ubuntu nhé

Xem tiếp các bài trong Series
Phần trước: React Native – Hướng dẫn chi tiết cài đặt môi trườngPhần kế tiếp: React Native – Sử dụng các cảm biến (sensor)

BÌNH LUẬN

Please enter your comment!
Please enter your name here