Gỡ lỗi JavaScript trong Visual Studio Code

Visual Studio Code bao gồm JavaScript IntelliSense tích hợp, gỡ lỗi, định dạng, điều hướng mã, tái cấu trúc và nhiều tính năng ngôn ngữ nâng cao khác

Hầu hết các tính năng này chỉ hoạt động ngay lập tức, trong khi một số tính năng có thể yêu cầu cấu hình cơ bản để có được trải nghiệm tốt nhất. Trang này tóm tắt các tính năng JavaScript mà Mã VS cung cấp cùng với. Các tiện ích mở rộng từ VS Code Marketplace có thể bổ sung hoặc thay đổi hầu hết các tính năng tích hợp này. Để có hướng dẫn sâu hơn về cách các tính năng này hoạt động và có thể được định cấu hình, hãy xem Làm việc với JavaScript

IntelliSense

IntelliSense hiển thị cho bạn hoàn thành mã thông minh, thông tin di chuột và thông tin chữ ký để bạn có thể viết mã nhanh hơn và chính xác hơn

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML 5

Mã VS cung cấp IntelliSense trong các dự án JavaScript của bạn;

Xem Làm việc với JavaScript để biết thông tin về JavaScript IntelliSense của VS Code, cách định cấu hình và giúp khắc phục sự cố IntelliSense phổ biến

Các dự án JavaScript (jsconfig. json)

một jsconfig. json định nghĩa một dự án JavaScript trong Mã VS. Mặc dù các tệp

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

4 không bắt buộc, nhưng bạn sẽ muốn tạo một tệp trong các trường hợp như

• Nếu không phải tất cả các tệp JavaScript trong không gian làm việc của bạn sẽ được coi là một phần của một dự án JavaScript duy nhất. Tệp

  "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  4 cho phép bạn loại trừ một số tệp hiển thị trong IntelliSense
• Để đảm bảo rằng một tập hợp con các tệp JavaScript trong không gian làm việc của bạn được coi là một dự án duy nhất. Điều này hữu ích nếu bạn đang làm việc với mã kế thừa sử dụng các phụ thuộc toàn cầu ẩn thay vì

  "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  1 cho các phụ thuộc
• Nếu không gian làm việc của bạn chứa nhiều ngữ cảnh dự án, chẳng hạn như mã JavaScript phía trước và phía sau. Đối với không gian làm việc đa dự án, hãy tạo một

  "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  4 tại thư mục gốc của từng dự án
• Bạn đang sử dụng trình biên dịch TypeScript để biên dịch mã nguồn JavaScript ở cấp độ thấp hơn

Để xác định một dự án JavaScript cơ bản, hãy thêm một

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

4 vào thư mục gốc của không gian làm việc của bạn

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

Xem Làm việc với JavaScript để biết cấu hình

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

4 nâng cao hơn

Mẹo. Để kiểm tra xem tệp JavaScript có phải là một phần của dự án JavaScript hay không, chỉ cần mở tệp trong Mã VS và chạy JavaScript. Chuyển đến lệnh Cấu hình dự án. Lệnh này mở

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

4 tham chiếu tệp JavaScript. Một thông báo được hiển thị nếu tệp không phải là một phần của bất kỳ dự án

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

4 nào

Đoạn trích

Mã VS bao gồm các đoạn mã JavaScript cơ bản được đề xuất khi bạn nhập;

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML 5

Có nhiều tiện ích mở rộng cung cấp các đoạn trích bổ sung, bao gồm các đoạn mã cho các khung phổ biến như Redux hoặc Angular. Bạn thậm chí có thể xác định đoạn trích của riêng mình

Mẹo. Để tắt đề xuất đoạn trích, hãy đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

7 thành

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

8 trong tệp cài đặt của bạn. Cài đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

7 cũng cho phép bạn thay đổi vị trí các đoạn trích xuất hiện trong đề xuất. ở trên cùng (

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

0), ở dưới cùng (

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

1), hoặc được sắp xếp theo thứ tự bảng chữ cái (

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

2). Mặc định là

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

2

hỗ trợ JSDoc

Mã VS hiểu nhiều chú thích JSDoc tiêu chuẩn và sử dụng các chú thích này để cung cấp IntelliSense phong phú. Bạn thậm chí có thể tùy chọn sử dụng thông tin loại từ nhận xét JSDoc để kiểm tra loại JavaScript của mình

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML 5

Nhanh chóng tạo chú thích JSDoc cho các chức năng bằng cách nhập

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

4 trước phần khai báo hàm và chọn đề xuất đoạn trích chú thích JSDoc

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML 5

Để tắt đề xuất nhận xét JSDoc, hãy đặt

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

5

Thông tin di chuột

Di chuột qua biểu tượng JavaScript để xem nhanh thông tin về loại biểu tượng và tài liệu liên quan

The ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) keyboard shortcut shows this hover information at the current cursor position.

Chữ ký Trợ giúp

Khi bạn viết lời gọi hàm JavaScript, Mã VS hiển thị thông tin về chữ ký hàm và làm nổi bật tham số mà bạn hiện đang hoàn thành

Trợ giúp về chữ ký được hiển thị tự động khi bạn nhập

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

6 hoặc

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

7 trong lệnh gọi hàm. Nhấn ⇧⌘Dấu cách (Windows, Linux Ctrl+Shift+Phím cách ) . to manually trigger signature help.

ô tô nhập khẩu

Nhập tự động tăng tốc mã hóa bằng cách đề xuất các biến có sẵn trong dự án của bạn và các thành phần phụ thuộc của nó. Khi bạn chọn một trong các đề xuất này, Mã VS sẽ tự động thêm phần nhập cho đề xuất đó vào đầu tệp

Chỉ cần bắt đầu nhập để xem đề xuất cho tất cả các ký hiệu JavaScript có sẵn trong dự án hiện tại của bạn. Đề xuất nhập tự động hiển thị nơi chúng sẽ được nhập từ

Nếu bạn chọn một trong những đề xuất nhập tự động này, Mã VS sẽ thêm một lần nhập cho đề xuất đó

Trong ví dụ này, Mã VS thêm một lần nhập cho

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

8 từ material-ui vào đầu tệp

Để tắt tính năng nhập tự động, hãy đặt

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

9 thành

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

50

Mẹo. Mã VS cố gắng suy ra kiểu nhập tốt nhất để sử dụng. Bạn có thể định cấu hình rõ ràng kiểu trích dẫn ưa thích và kiểu đường dẫn cho các mục nhập được thêm vào mã của mình bằng cài đặt

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

51 và

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

52

định dạng

Trình định dạng JavaScript tích hợp của VS Code cung cấp định dạng mã cơ bản với các giá trị mặc định hợp lý

Cài đặt

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

53 định cấu hình bộ định dạng tích hợp. Hoặc, nếu trình định dạng tích hợp đang cản trở, hãy đặt

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

54 thành

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

50 để tắt nó

Để biết thêm các kiểu định dạng mã chuyên dụng, hãy thử cài đặt một trong các tiện ích mở rộng định dạng JavaScript từ Marketplace

JSX và thẻ đóng tự động

Tất cả các tính năng JavaScript của VS Code cũng hoạt động với JSX

Bạn có thể sử dụng cú pháp JSX trong cả tệp

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

56 thông thường và tệp

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

57

Mã VS cũng bao gồm các tính năng dành riêng cho JSX như tự động đóng các thẻ JSX

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML 5

Đặt

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

58 thành

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

50 để tắt tính năng đóng thẻ JSX

điều hướng mã

Điều hướng mã cho phép bạn nhanh chóng điều hướng các dự án JavaScript

• Đi tới Định nghĩa F12 - Đi tới mã nguồn của định nghĩa ký hiệu.
• Định nghĩa Peek ⌥F12 (Windows Alt+F12 . Ctrl+Shift+F10) - Bring up a Peek window that shows the definition of a symbol.
• Chuyển đến Tài liệu tham khảo ⇧F12 (Windows, Linux Shift+F12) - Show all references to a symbol.
• Chuyển đến Định nghĩa loại - Chuyển đến loại xác định ký hiệu. Đối với một thể hiện của một lớp, điều này sẽ tiết lộ chính lớp đó thay vì nơi thể hiện được xác định

Bạn có thể điều hướng thông qua tìm kiếm ký hiệu bằng cách sử dụng các lệnh Chuyển đến ký hiệu từ Bảng lệnh ( ⇧⌘P (Windows, Linux Ctrl+Shift+P)).

• Đi tới Biểu tượng trong tệp ⇧⌘O (Windows, Linux Ctrl+Shift+O<)
• Chuyển đến Biểu tượng trong Không gian làm việc ⌘T (Windows, Linux Ctrl+T)

Đổi tên

Nhấn F2 để đổi tên biểu tượng bên dưới con trỏ trong dự án JavaScript của bạn.

tái cấu trúc

Mã VS bao gồm một số phép tái cấu trúc thuận tiện cho JavaScript, chẳng hạn như hàm Trích xuất và hằng số Trích xuất. Chỉ cần chọn mã nguồn mà bạn muốn trích xuất rồi nhấp vào bóng đèn trong máng xối hoặc nhấn ( ⌘. (Windows, Linux Ctrl+. ) ) để xem các phép tái cấu trúc có sẵn.

Tái cấu trúc có sẵn bao gồm

• Trích xuất phương thức hoặc chức năng
• Trích xuất thành hằng số
• Chuyển đổi giữa nhập khẩu có tên và nhập khẩu không gian tên
• Di chuyển đến tập tin mới

Xem Tái cấu trúc để biết thêm thông tin về tái cấu trúc và cách bạn có thể định cấu hình phím tắt cho từng lần tái cấu trúc

Các biến không sử dụng và mã không thể truy cập

Mã JavaScript không được sử dụng, chẳng hạn như khối khác của câu lệnh

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

50 luôn đúng hoặc nhập không được ước tính, bị mờ đi trong trình chỉnh sửa

Bạn có thể nhanh chóng xóa mã không sử dụng này bằng cách đặt con trỏ lên mã đó và kích hoạt lệnh Sửa nhanh ( ⌘. (Windows, Linux Ctrl+. )) or clicking on the lightbulb.

Để vô hiệu hóa mờ dần mã không sử dụng, hãy đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

51 thành

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

50. Bạn cũng có thể tắt làm mờ mã không sử dụng chỉ trong JavaScript bằng cách đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

Tổ chức nhập khẩu

Hành động tổ chức nhập nguồn nhập sắp xếp các mục nhập trong tệp JavaScript và xóa mọi mục nhập không sử dụng

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML 5

Bạn có thể chạy Sắp xếp Nhập từ menu ngữ cảnh Hành động nguồn hoặc bằng ⇧⌥O (Windows, Linux Shift+Alt+O) keyboard shortcut.

Sắp xếp nhập cũng có thể được thực hiện tự động khi bạn lưu tệp JavaScript bằng cách đặt

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

Hành động mã khi lưu

Cài đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

53 cho phép bạn định cấu hình một nhóm Hành động mã được chạy khi tệp được lưu. Ví dụ: bạn có thể bật tổ chức nhập khi lưu bằng cách đặt

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

5

Bạn cũng có thể đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

53 thành một mảng Hành động mã để thực thi theo thứ tự

Dưới đây là một số hành động nguồn

• "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  55 - Cho phép tổ chức nhập khi lưu

• "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  56 - Tự động sửa lỗi khi Lưu tính toán tất cả các bản sửa lỗi có thể có trong một vòng (dành cho tất cả các nhà cung cấp bao gồm cả ESLint)

• "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  57 - Tự động sửa lỗi chỉ dành cho ESLint

• "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  58 - Thêm tất cả các lần nhập bị thiếu khi lưu

Xem nút. js/JavaScript để biết thêm thông tin

gợi ý mã

Mã VS tự động đề xuất một số đơn giản hóa mã phổ biến, chẳng hạn như chuyển đổi một chuỗi các cuộc gọi

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

59 theo lời hứa sử dụng

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

00 và

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

01

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML 5

Đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

02 thành

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

50 để tắt đề xuất

gợi ý khảm

Gợi ý inlay thêm thông tin nội tuyến bổ sung vào mã nguồn để giúp bạn hiểu chức năng của mã

Gợi ý inlay tên tham số hiển thị tên của tham số trong lệnh gọi hàm

Điều này có thể giúp bạn hiểu nhanh ý nghĩa của từng đối số, điều này đặc biệt hữu ích cho các hàm lấy cờ Boolean hoặc có các tham số dễ lẫn lộn

Để bật gợi ý tên tham số, hãy đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

04. Có ba giá trị có thể

• "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  05 — Tắt gợi ý khảm thông số

• "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  06 — Chỉ hiển thị gợi ý inlay cho các chữ (chuỗi, số, Boolean)

• "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  07 — Hiển thị gợi ý inlay cho tất cả các đối số

Gợi ý chèn loại biến hiển thị các loại biến không có chú thích loại rõ ràng

Cài đặt.

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

08

Gợi ý inlay loại thuộc tính hiển thị loại thuộc tính lớp không có chú thích loại rõ ràng

Cài đặt.

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

09

Gợi ý loại tham số hiển thị các loại tham số được nhập ngầm

Cài đặt.

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

10

Gợi ý inlay kiểu trả về hiển thị kiểu trả về của các hàm không có chú thích kiểu rõ ràng

Cài đặt.

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

11

Mã tham chiếuỐng kính

Tham chiếu JavaScript CodeLens hiển thị số lượng tham chiếu nội tuyến cho các lớp, phương thức, thuộc tính và đối tượng đã xuất

Để bật CodeLens tham chiếu, hãy đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

12 thành

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

13

Nhấp vào số tài liệu tham khảo để duyệt nhanh danh sách tài liệu tham khảo

Cập nhật nhập khi di chuyển tệp

Khi bạn di chuyển hoặc đổi tên một tệp được nhập bởi các tệp khác trong dự án JavaScript của bạn, Mã VS có thể tự động cập nhật tất cả các đường dẫn nhập tham chiếu tệp đã di chuyển

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML 5

Cài đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

14 kiểm soát hành vi này. Giá trị cài đặt hợp lệ là

• "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  15 - Mặc định. Hỏi xem có nên cập nhật đường dẫn cho mỗi lần di chuyển tệp không

• "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  16 - Luôn tự động cập nhật đường dẫn

• "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  17 - Không tự động cập nhật đường dẫn và không nhắc

xơ vải

Linters cung cấp cảnh báo cho mã tìm kiếm đáng ngờ. Mặc dù Mã VS không bao gồm trình nói dối JavaScript tích hợp, nhưng nhiều tiện ích mở rộng trình nói dối JavaScript có sẵn trên thị trường

Mẹo. Danh sách này được truy vấn động từ VS Code Marketplace. Đọc mô tả và đánh giá để quyết định xem tiện ích mở rộng có phù hợp với bạn không

kiểm tra loại

Bạn cũng có thể tận dụng một số chức năng báo cáo lỗi và kiểm tra loại nâng cao của TypeScript trong các tệp JavaScript thông thường. Đây là một cách tuyệt vời để nắm bắt các lỗi lập trình phổ biến. Các kiểm tra loại này cũng cho phép một số Bản sửa lỗi nhanh thú vị dành cho JavaScript, bao gồm Thêm tính năng nhập bị thiếu và Thêm thuộc tính bị thiếu

TypeScript đã cố gắng suy luận các loại trong tệp

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

18 giống như cách nó thực hiện trong tệp

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

19. Khi không thể suy ra các loại, chúng có thể được chỉ định rõ ràng bằng các nhận xét JSDoc. Bạn có thể đọc thêm về cách TypeScript sử dụng JSDoc để kiểm tra kiểu JavaScript trong Làm việc với JavaScript

Kiểm tra loại JavaScript là tùy chọn và chọn tham gia. Có thể sử dụng các công cụ xác thực JavaScript hiện có như ESLint cùng với chức năng kiểm tra loại tích hợp

gỡ lỗi

Mã VS đi kèm với hỗ trợ gỡ lỗi tuyệt vời cho JavaScript. Đặt điểm dừng, kiểm tra đối tượng, điều hướng ngăn xếp cuộc gọi và thực thi mã trong Bảng điều khiển gỡ lỗi. Xem chủ đề Gỡ lỗi để tìm hiểu thêm

Gỡ lỗi phía máy khách

Bạn có thể gỡ lỗi mã phía máy khách của mình bằng trình gỡ lỗi trình duyệt, chẳng hạn như trình gỡ lỗi tích hợp sẵn của chúng tôi dành cho Edge và Chrome hoặc Trình gỡ lỗi dành cho Firefox

Gỡ lỗi phía máy chủ

nút gỡ lỗi. js trong Mã VS bằng trình gỡ lỗi tích hợp. Thiết lập dễ dàng và có một Nút. hướng dẫn gỡ lỗi js để giúp bạn

Tiện ích mở rộng phổ biến

Mã VS cung cấp hỗ trợ tuyệt vời cho JavaScript nhưng bạn có thể cài đặt thêm trình gỡ lỗi, đoạn mã, linters và các công cụ JavaScript khác thông qua tiện ích mở rộng

Mẹo. Các tiện ích mở rộng được hiển thị ở trên được truy vấn động. Nhấp vào ô tiện ích mở rộng ở trên để đọc mô tả và đánh giá để quyết định tiện ích mở rộng nào phù hợp nhất với bạn. Xem thêm trên Marketplace

Bước tiếp theo

Đọc tiếp để tìm hiểu về

• Làm việc với JavaScript - Thông tin chi tiết hơn về hỗ trợ JavaScript của VS Code và cách khắc phục sự cố thường gặp
• jsconfig. json - Mô tả chi tiết về tệp dự án

  "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  4
• IntelliSense - Tìm hiểu thêm về IntelliSense và cách sử dụng nó hiệu quả cho ngôn ngữ của bạn
• Gỡ lỗi - Tìm hiểu cách thiết lập gỡ lỗi cho ứng dụng của bạn
• Nút. js - Hướng dẫn tạo Express Node. ứng dụng js
• TypeScript - VS Code hỗ trợ tuyệt vời cho TypeScript, mang lại cấu trúc và khả năng gõ mạnh cho mã JavaScript của bạn

Câu hỏi thường gặp

VS Code có hỗ trợ JSX và React Native không?

VS Code hỗ trợ JSX và React Native. Bạn sẽ nhận được IntelliSense cho React/JSX và React Native từ các tệp khai báo kiểu (kiểu đánh máy) được tải xuống tự động từ kho lưu trữ tệp khai báo kiểu npmjs. Ngoài ra, bạn có thể cài đặt tiện ích mở rộng React Native phổ biến từ Marketplace

Để bật các câu lệnh nhập ES6 cho React Native, bạn cần đặt tùy chọn trình biên dịch

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

21 thành

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

13. Điều này báo cho trình biên dịch tạo các thành viên mặc định tổng hợp và bạn nhận được IntelliSense. React Native sử dụng Babel đằng sau hậu trường để tạo mã thời gian chạy phù hợp với các thành viên mặc định. Nếu bạn cũng muốn gỡ lỗi mã React Native, bạn có thể cài đặt Tiện ích mở rộng React Native

Mã VS có hỗ trợ ngôn ngữ lập trình Dart và khung Flutter không?

Có, có các tiện ích mở rộng Mã VS cho cả phát triển Dart và Flutter. Bạn có thể tìm hiểu thêm tại Flutter. tài liệu dành cho nhà phát triển

IntelliSense không hoạt động đối với các thư viện bên ngoài

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

23 hoạt động cho các phụ thuộc được tải xuống bởi npm (được chỉ định trong

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

24), Bower (được chỉ định trong

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

25) và cho nhiều thư viện phổ biến nhất được liệt kê trong cấu trúc thư mục của bạn (ví dụ:

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

26)

Nhập kiểu ES6 không hoạt động

Khi bạn muốn sử dụng nhập kiểu ES6 nhưng một số tệp khai báo kiểu (kiểu gõ) chưa sử dụng xuất kiểu ES6, sau đó đặt tùy chọn trình biên dịch TypeScript

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

21 thành true

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

5

Tôi có thể gỡ lỗi JavaScript đã rút gọn/xấu xí không?

Vâng, bạn có thể. Bạn có thể thấy điều này hoạt động bằng cách sử dụng bản đồ nguồn JavaScript trong Nút. chủ đề gỡ lỗi js

Làm cách nào để tắt Xác thực cú pháp khi sử dụng cấu trúc không phải ES6?

Một số người dùng muốn sử dụng các cấu trúc cú pháp như toán tử đường dẫn (

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

28) được đề xuất. Tuy nhiên, những thứ này hiện không được dịch vụ ngôn ngữ JavaScript của VS Code hỗ trợ và được gắn cờ là lỗi. Đối với những người dùng vẫn muốn sử dụng các tính năng này trong tương lai, chúng tôi cung cấp cài đặt

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

29

Với

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

30, bạn tắt tất cả tính năng kiểm tra cú pháp tích hợp. Nếu bạn làm điều này, chúng tôi khuyên bạn nên sử dụng một trình nói dối như ESLint để xác thực mã nguồn của bạn

Tôi có thể sử dụng các công cụ JavaScript khác như Flow không?

Có, nhưng một số tính năng ngôn ngữ của Flow chẳng hạn như kiểm tra lỗi và loại có thể ảnh hưởng đến hỗ trợ JavaScript tích hợp của VS Code. Để tìm hiểu cách tắt hỗ trợ JavaScript tích hợp của VS Code, hãy xem Tắt hỗ trợ JavaScript

Làm cách nào để gỡ lỗi JavaScript trong Visual Studio Code?

Làm cách nào để cài đặt trình gỡ lỗi JavaScript trong Mã VS?

Làm cách nào để bật gỡ lỗi js trong Visual Studio?

Tôi có thể chạy mã JavaScript trong Visual Studio Code không?