Làm cách nào để thiết lập JavaScript?

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 jsconfig.json 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 jsconfig.json 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ục ngầm 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 jsconfig.json 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 jsconfig.json 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 jsconfig.json 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ở jsconfig.json 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 jsconfig.json 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. 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 để

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 hàm bằng cách gõ

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

4 trước phần khai báo hàm và chọn đề xuất đoạn mã 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 một 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 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

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

0

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

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

1 và

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

2

đị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

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

3 đị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

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

4 thành

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

0 để 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

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

6 bình thường và tệp

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

7

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

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

8 thành

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

0 để 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