Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Visual Studio Code hỗ trợ nhiều tính năng cho phát triển JavaScript và Node.js. Các tính năng giao hàng với sản phẩm đã tải xuống là các tính năng cốt lõi: gỡ lỗi, intellisense, điều hướng mã, v.v.

Show

Ngoài ra, với các tính năng cốt lõi này, bạn có thể cài đặt một số lượng lớn các phần mở rộng chất lượng để thêm các tính năng vào mã VS để phát triển JavaScript.

Mẹo: Để xem cách cài đặt và quản lý các tiện ích mở rộng của bạn, vui lòng tham khảo tài liệu mở rộng. To see how to install and manage your extensions, please refer to the extension documentation.

Tìm phần mở rộng

Bạn có thể tìm thấy các tiện ích mở rộng JavaScript bằng cách nhập JavaScript vào thanh tìm kiếm mở rộng. Ngoài ra, bạn có thể tìm thấy các tiện ích mở rộng JavaScript bằng thẻ: "Tag: JavaScript". Tìm kiếm thêm các tiện ích mở rộng trong mã VS hoặc trên thị trường.

Ngoài ra, bạn có thể tìm kiếm các phần mở rộng Node.js.

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 gạch mở rộng ở trên để đọc mô tả và đánh giá để quyết định phần mở rộng nào là tốt nhất cho bạn. Xem thêm trên thị trường.

Tiện ích mở rộng được đề xuất

Nếu bạn mới bắt đầu, đây là các phần mở rộng mà chúng tôi khuyên bạn nên thử.

Eslin

Thị trường - Eslint

Nhà xuất bản - Microsoft

Dễ dàng tích hợp eSlint vào dự án của bạn. Nếu Eslint không phải là linter yêu thích của bạn, hãy chọn trong số nhiều phần mở rộng linter khác, bao gồm JSHINT, JSCS và JS Standard.

Đọc thêm về việc thiết lập các linters JavaScript trong tài liệu mã VS.

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Sonarlint

Thị trường - Sonarlint

Nhà xuất bản - Sonarsource

Sonarlint giúp bạn tìm và khắc phục lỗi và các vấn đề bảo mật khi bạn mã hóa. Phần mở rộng chạy trong nền và, giống như một trình kiểm tra chính tả, làm nổi bật các vấn đề mã hóa. Sonarlint không chỉ cho bạn biết vấn đề là gì mà còn cung cấp hướng dẫn trong bối cảnh về lý do tại sao một vấn đề có hại và cách khắc phục nó, với các ví dụ liên quan. Tiện ích mở rộng hỗ trợ hơn 200 quy tắc JS/TS và bao gồm một số bản sửa lỗi nhanh để tự động xử lý các sự cố mã hóa của bạn.

Tìm kiếm 'sonarlint' trong thị trường mã vs và cài đặt. Không cần cấu hình. Bạn có thể bắt đầu với một hồ sơ mặc định phù hợp với hầu hết người dùng và tùy chỉnh nó dựa trên nhu cầu cụ thể của bạn.

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Đoạn mã JavaScript (ES6)

Marketplace - đoạn mã mã JavaScript (ES6)

Nhà xuất bản - Charalampos Karypidis

Mã VS đi kèm với nhiều đoạn mã tích hợp. Phần mở rộng mã JavaScript (ES6) thêm đoạn trích cho cú pháp ES6 (ECMAScript 6). Dưới đây là một mẫu nhỏ của các đoạn trích được cung cấp bởi tiện ích mở rộng này. Xem phần mở rộng của phần mở rộng để xem hàng tá đoạn trích mà gói này cung cấp cho bạn.JavaScript (ES6) code snippets extension adds snippets for ES6 (ECMAScript 6) syntax. Here is a small sampling of the snippets provided by this extension. See the extension's README to see the dozens of snippets this pack gives you.

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Bạn có thể đọc thêm về các đoạn trích JavaScript trong tài liệu mã VS. Đối với các gói đoạn trích bổ sung, bao gồm Angular 1, Angular 2, Bootstrap 3, Reactjs và JQuery, hãy xem danh mục Snippets của Marketplace.

NPM Intellisense

Marketplace - NPM Intellisense

Nhà xuất bản - Christian Kohler

Phần mở rộng này cung cấp IntelliSense cho các mô -đun NPM khi sử dụng import hoặc require.

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

11/2/2022

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ướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Hầu hết các tính năng này chỉ hoạt động ngoài hộp, trong khi một số 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 của JavaScript mà VS Code Ships với. Các tiện ích mở rộng từ Thị trường mã VS có thể tăng hoặc thay đổi hầu hết các tính năng tích hợp này. Để biết hướng dẫn chuyên sâu hơn về cách các tính năng này hoạt động và có thể được cấu hình, xem làm việc với JavaScript.

IntelliSense

Intellisense cho thấy 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; cho nhiều thư viện NPM như React,

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},
0 và
"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},
1; và cho các nền tảng khác như
"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},
2, Serverless hoặc IoT.

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

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

Tệp jsconfig.json xác định một dự án javaScript trong mã vs. Mặc dù các tệp

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},
3 không bắt buộc, 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 nên được coi là một phần của một dự án JavaScript duy nhất.
    "[javascript]": {
        "editor.showUnused":  false
    },
    "[javascriptreact]": {
        "editor.showUnused":  false
    },
    
    3 Các tệp 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 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 rất 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 ngầm thay vì
    "[javascript]": {
        "editor.showUnused":  false
    },
    "[javascriptreact]": {
        "editor.showUnused":  false
    },
    
    5 cho các phụ thuộc.
  • Nếu không gian làm việc của bạn chứa nhiều bối cảnh dự án, chẳng hạn như mã JavaScript phía trước và đầu cuối. Đối với các không gian làm việc đa dự án, hãy tạo
    "[javascript]": {
        "editor.showUnused":  false
    },
    "[javascriptreact]": {
        "editor.showUnused":  false
    },
    
    3 tại thư mục gốc của mỗi dự án.
  • Bạn đang sử dụng trình biên dịch TypeScript để biên dịch cấp độ JavaScript Cấp độ xuống.

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

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},
3 tại 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
},
3 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 lệnh JavaScript: đi đến lệnh cấu hình dự án. Lệnh này mở

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},
3 tham chiếu tệp JavaScript. 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
},
3 nào.
To check if a JavaScript file is part of JavaScript project, just open the file in VS Code and run the JavaScript: Go to Project Configuration command. This command opens the
"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},
3 that references the JavaScript file. A notification is shown if the file is not part of any
"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},
3 project.

Đoạn trích

Mã VS bao gồm các đoạn trích JavaScript cơ bản được đề xuất khi bạn gõ;

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

Có nhiều phần mở rộng cung cấp các đoạn trích bổ sung, bao gồm các đoạn trích 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 bạn.

Mẹo: Để tắt các đề xuất đoạn trích, đặt

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
1 thành
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
2 trong tệp cài đặt của bạn. Cài đặt
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
1 cũng cho phép bạn thay đổi khi các đoạn trích xuất hiện trong các đề xuất: ở đầu (
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
4), ở phía dưới (
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
5) hoặc được đặt hàng theo thứ tự theo thứ tự bảng chữ cái (
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
6). Mặc định là
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
6.
: To disable snippets suggestions, set
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
1 to
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
2 in your settings file. The
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
1 setting also lets you change where snippets appear in the suggestions: at the top (
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
4), at the bottom (
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
5), or inlined ordered alphabetically (
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
6). The default is
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
6.

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 có thể tùy chọn thậm chí sử dụng thông tin loại từ các nhận xét của JSDOC để nhập kiểm tra JavaScript của bạn.

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

Có nhiều phần mở rộng cung cấp các đoạn trích bổ sung, bao gồm các đoạn trích 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 bạn.JSDoc comment snippet suggestion:

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

Có nhiều phần mở rộng cung cấp các đoạn trích bổ sung, bao gồm các đoạn trích 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 bạn.

Mẹo: Để tắt các đề xuất đoạn trích, đặt "editor.codeActionsOnSave": { "source.organizeImports": true } 1 thành "editor.codeActionsOnSave": { "source.organizeImports": true } 2 trong tệp cài đặt của bạn. Cài đặt "editor.codeActionsOnSave": { "source.organizeImports": true } 1 cũng cho phép bạn thay đổi khi các đoạn trích xuất hiện trong các đề xuất: ở đầu ("editor.codeActionsOnSave": { "source.organizeImports": true } 4), ở phía dưới ("editor.codeActionsOnSave": { "source.organizeImports": true } 5) hoặc được đặt hàng theo thứ tự theo thứ tự bảng chữ cái ("editor.codeActionsOnSave": { "source.organizeImports": true } 6). Mặc định là "editor.codeActionsOnSave": { "source.organizeImports": true } 6.

Hỗ trợ JSDOC

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

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 có thể tùy chọn thậm chí sử dụng thông tin loại từ các nhận xét của JSDOC để nhập kiểm tra JavaScript của bạn.⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) keyboard shortcut shows this hover information at the current cursor position.

Nhanh chóng tạo nhận xét JSDOC cho các chức năng bằng cách nhập "editor.codeActionsOnSave": { "source.organizeImports": true } 8 trước khi khai báo chức năng và chọn Gợi ý đoạn trích nhận xét JSDOC:

Để tắt các đề xuất bình luận của JSDOC, đặt

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

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Thông tin di chuột⇧⌘Space (Windows, Linux Ctrl+Shift+Space) to manually trigger signature help.

Di chuột qua một biểu tượng JavaScript để nhanh chóng xem thông tin loại của nó và tài liệu có liên quan.

⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) Phím tắt cho thấy thông tin di chuột này ở vị trí con trỏ hiện tại.

Chữ ký trợ giúp

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

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

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

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}
0 hoặc
// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}
1 trong một cuộc gọi chức năng. Nhấn ⇧⌘space (Windows, Linux Ctrl+Shift+Space) để kích hoạt thủ công trợ giúp Chữ ký.

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Nhập khẩu tự động

Nhập khẩu tự động tăng tốc mã hóa bằng cách đề xuất các biến có sẵn trong toàn bộ dự án của bạn và các phụ thuộc của nó. Khi bạn chọn một trong các đề xuất này, VS CODE sẽ tự động thêm nhập cho nó vào đầu tệp. VS Code tries to infer the best import style to use. You can explicitly configure the preferred quote style and path style for imports added to your code with the

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

Chỉ cần bắt đầu gõ để xem các đề xuất cho tất cả các biểu tượng JavaScript có sẵn trong dự án hiện tại của bạn. Đề xuất nhập tự động cho thấy 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, VS Code sẽ thêm nhập cho nó.

Trong ví dụ này, mã VS thêm nhập cho

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}
2 từ tài liệu-UI vào đầu tệp:

Để vô hiệu hóa nhập khẩu tự động, đặt

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}
3 thành
// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}
4.

Mẹo: Mã VS cố gắng suy ra kiểu nhập khẩu 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 nhập được thêm vào mã của bạn với cài đặt

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

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Định dạng

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

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

Có nhiều phần mở rộng cung cấp các đoạn trích bổ sung, bao gồm các đoạn trích 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 bạn.

Mẹo: Để tắt các đề xuất đoạn trích, đặt "editor.codeActionsOnSave": { "source.organizeImports": true } 1 thành "editor.codeActionsOnSave": { "source.organizeImports": true } 2 trong tệp cài đặt của bạn. Cài đặt "editor.codeActionsOnSave": { "source.organizeImports": true } 1 cũng cho phép bạn thay đổi khi các đoạn trích xuất hiện trong các đề xuất: ở đầu ("editor.codeActionsOnSave": { "source.organizeImports": true } 4), ở phía dưới ("editor.codeActionsOnSave": { "source.organizeImports": true } 5) hoặc được đặt hàng theo thứ tự theo thứ tự bảng chữ cái ("editor.codeActionsOnSave": { "source.organizeImports": true } 6). Mặc định là "editor.codeActionsOnSave": { "source.organizeImports": true } 6.

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 có thể tùy chọn thậm chí sử dụng thông tin loại từ các nhận xét của JSDOC để nhập kiểm tra JavaScript của bạn. F12 - Go to the source code of a symbol definition.
  • Định nghĩa PEEK⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - Mang lại một cửa sổ PEEK hiển thị định nghĩa của biểu tượng. ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - Bring up a Peek window that shows the definition of a symbol.
  • Truy cập tham khảo⇧f12 (Windows, Linux Shift+F12) - Hiển thị tất cả các tham chiếu đến một biểu tượng. ⇧F12 (Windows, Linux Shift+F12) - Show all references to a symbol.
  • Chuyển đến định nghĩa kiểu - Chuyển đến loại xác định một biểu tượng. Đối với một ví dụ của một lớp, điều này sẽ tiết lộ chính lớp thay vì nơi xác định thể hiện. - Go to the type that defines a symbol. For an instance of a class, this will reveal the class itself instead of where the instance is defined.

Bạn có thể điều hướng qua tìm kiếm biểu tượng bằng cách sử dụng các lệnh GO to Biểu tượng từ bảng lệnh (⇧⌘P (Windows, Linux Ctrl+Shift+P)).Go to Symbol commands from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

  • Chuyển đến Biểu tượng trong File⇧⌘O (Windows, Linux Ctrl+Shift+O) ⇧⌘O (Windows, Linux Ctrl+Shift+O)
  • Chuyển đến Biểu tượng trong Workspace⌘t (Windows, Linux Ctrl+T) ⌘T (Windows, Linux Ctrl+T)

Đổi tên

Nhấn F2 để đổi tên biểu tượng dưới con trỏ qua dự án JavaScript của bạn:F2 to rename the symbol under the cursor across your JavaScript project:

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Tái cấu trúc

Mã VS bao gồm một số tái cấu trúc tiện dụng cho JavaScript như hàm trích xuất và trích xuất hằng số. Chỉ cần chọn mã nguồn bạn muốn trích xuất và sau đó nhấp vào bóng đèn trong máng xối hoặc nhấn (⌘ (Windows, Linux Ctrl+.)) Để xem các chất tái cấu trúc có sẵn.Extract function and Extract constant. Just select the source code you'd like to extract and then click on the lightbulb in the gutter or press (⌘. (Windows, Linux Ctrl+.)) to see available refactorings.

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

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

  • Chiết xuất cho phương pháp hoặc chức năng.
  • Chiết xuất để không đổi.
  • Chuyển đổi giữa nhập khẩu được đặt tên và nhập khẩu không gian tên.
  • Di chuyển đến tập tin mới.

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

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

Mã JavaScript chưa sử dụng, như vậy, khối khác của câu lệnh

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}
4 luôn đúng hoặc nhập khẩu không được giới thiệu, bị phai màu trong trình soạn thảo:

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

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 nó và kích hoạt lệnh FIX FINCE QUẢN LÝ ((Windows, Linux Ctrl+.)) Hoặc nhấp vào LightBulb.⌘. (Windows, Linux Ctrl+.)) or clicking on the lightbulb.

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

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}
5 thành
// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}
4. Bạn cũng chỉ có thể vô hiệu hóa mờ dần mã không sử dụng trong JavaScript bằng cách cài đặt:

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

Tổ chức nhập khẩu

Hành động Nguồn nhập khẩu sắp xếp loại nhập khẩu trong tệp JavaScript và xóa bất kỳ nhập khẩu chưa sử dụng nào:Organize Imports Source Action sorts the imports in a JavaScript file and removes any unused imports:

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

Bạn có thể chạy tổ chức nhập khẩu từ menu ngữ cảnh hành động nguồn hoặc với phím tắt ⇧⌥O (windows, linux shift+alt+o).Organize Imports from the Source Action context menu or with the ⇧⌥O (Windows, Linux Shift+Alt+O) keyboard shortcut.

Tổ chức nhập khẩu cũng có thể được thực hiện tự động khi bạn lưu tệp JavaScript bằng cách cài đặt:

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

Hành động mã trên lưu

Cài đặt

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}
7 cho phép bạn định cấu hình một tập hợp các hành động mã được chạy khi một tệp được lưu. Ví dụ: bạn có thể bật tổ chức nhập khẩu khi cài đặt bằng cách cài đặt:

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

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

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}
7 thành một mảng các hành động mã để thực thi theo thứ tự.

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

  • {
      "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        // This is the line you want to add
        "allowSyntheticDefaultImports": true
      },
      "exclude": ["node_modules", "**/node_modules/*"]
    }
    
    9 - Cho phép tổ chức nhập khẩu khi lưu.
  • JavaScript0 - Bản sửa lỗi tự động trên Save Tính toán tất cả các bản sửa lỗi có thể trong một vòng (đối với tất cả các nhà cung cấp bao gồm ESLINT).
  • JavaScript1 - Bản sửa lỗi tự động chỉ cho ESLINT.
  • JavaScript2 - Thêm tất cả các lần nhập bị thiếu khi lưu.

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

Đề xuất mã

Mã VS tự động đề xuất một số đơn giản hóa mã phổ biến như chuyển đổi chuỗi JavaScript3 gọi theo lời hứa sẽ sử dụng JavaScript4 và JavaScript5

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

Bạn có thể chạy tổ chức nhập khẩu từ menu ngữ cảnh hành động nguồn hoặc với phím tắt ⇧⌥O (windows, linux shift+alt+o).

Tổ chức nhập khẩu cũng có thể được thực hiện tự động khi bạn lưu tệp JavaScript bằng cách cài đặt:

Hành động mã trên lưu

Cài đặt

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}
7 cho phép bạn định cấu hình một tập hợp các hành động mã được chạy khi một tệp được lưu. Ví dụ: bạn có thể bật tổ chức nhập khẩu khi cài đặt bằng cách cài đặt: show the names of parameters in function calls:

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

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

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}
7 thành một mảng các hành động mã để thực thi theo thứ tự.

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

  • {
      "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        // This is the line you want to add
        "allowSyntheticDefaultImports": true
      },
      "exclude": ["node_modules", "**/node_modules/*"]
    }
    
    9 - Cho phép tổ chức nhập khẩu khi lưu.
  • JavaScript0 - Bản sửa lỗi tự động trên Save Tính toán tất cả các bản sửa lỗi có thể trong một vòng (đối với tất cả các nhà cung cấp bao gồm ESLINT).
  • JavaScript1 - Bản sửa lỗi tự động chỉ cho ESLINT.

JavaScript2 - Thêm tất cả các lần nhập bị thiếu khi lưu. show the types of variables that don't have explicit type annotations.

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

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Đề xuất mã show the type of class properties that don't have an explicit type annotation.

Mã VS tự động đề xuất một số đơn giản hóa mã phổ biến như chuyển đổi chuỗi JavaScript3 gọi theo lời hứa sẽ sử dụng JavaScript4 và JavaScript5

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Đặt JavaScript6 thành

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}
4 để vô hiệu hóa các đề xuất. show the types of implicitly typed parameters.

Gợi ý inlay

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

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 mã làm gì. show the return types of functions that don't have an explicit type annotation.

Tên tham số khơi gợi ý hiển thị tên của các tham số trong các cuộc gọi chức năng:

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

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

Để bật các gợi ý tên tham số, đặt JavaScript8. Có ba giá trị có thể:

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

JavaScript9 - & nbsp; vô hiệu hóa các gợi ý inlay.

Node.js0 - & nbsp; chỉ hiển thị gợi ý inlay cho các chữ (chuỗi, số, boolean).

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Node.js1 - & nbsp; hiển thị các gợi ý khẳng định cho tất cả các đối số.

Gợi ý loại biến cho thấy các loại biến không có chú thích loại rõ ràng.

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

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

  • Node.js9 -& nbsp; mặc định. Hỏi nếu các đường dẫn nên được cập nhật cho mỗi lần di chuyển tệp.
  • import0 -& nbsp; luôn tự động cập nhật các đường dẫn.
  • import1 -& nbsp; không tự động cập nhật đường dẫn và không nhắc.

Linters

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

Mẹo: Danh sách này được truy vấn động từ Thị trường mã VS. Đọc mô tả và đánh giá để quyết định xem phần mở rộng có phù hợp với bạn không. This list is dynamically queried from the VS Code Marketplace. Read the description and reviews to decide if the extension is right for you.

Kiểu kiểm tra

Bạn có thể tận dụng một số chức năng kiểm tra và báo cáo lỗi của TypeScript trong các tệp JavaScript thông thường. Đây là một cách tuyệt vời để bắt những sai lầm 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ị cho JavaScript, bao gồm thêm Nhập bị thiếu và thêm thuộc tính bị thiếu.Add missing import and Add missing property.

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

TypeScript đã cố gắng suy ra các loại trong các tệp import2 giống như cách nó thực hiện trong các tệp import3. Khi các loại không thể được suy ra, chúng có thể được chỉ định rõ ràng với các nhận xét của JSDOC. Bạn có thể đọc thêm về cách TypeScript sử dụng JSDOC để kiểm tra loại JavaScript khi làm việc với JavaScript.

Kiểu kiểm tra JavaScript là tùy chọn và chọn tham gia. Các công cụ xác thực JavaScript hiện tại như Eslint có thể được sử dụng 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 các đố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 khách hàng

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 như trình gỡ lỗi tích hợp của chúng tôi cho Edge và Chrome hoặc trình gỡ lỗi cho Firefox.

Bên máy chủ gỡ lỗi

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

Hướng dẫn extension visual studio code javascript - mã mở rộng studio trực quan javascript

Phần mở rộng phổ biến

VS Code Ship với sự 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 trích, linter và các công cụ JavaScript khác thông qua các 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 gạch mở rộng ở trên để đọc mô tả và đánh giá để quyết định phần mở rộng nào là tốt nhất cho bạn. Xem thêm trên thị trường. The extensions shown above are dynamically queried. Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

Bước tiếp theo

Đọc để 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ố phổ biến.
  • jsconfig.json - Mô tả chi tiết về tệp dự án
    "[javascript]": {
        "editor.showUnused":  false
    },
    "[javascriptreact]": {
        "editor.showUnused":  false
    },
    
    3.
  • IntelliSense - Tìm hiểu thêm về IntelliSense và cách sử dụng nó một cách 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.
  • Node.js - một hướng dẫn để tạo ứng dụng Express Node.js.
  • TypeScript - Mã VS có sự hỗ trợ tuyệt vời cho TypeScript, mang lại cấu trúc và gõ mạnh vào mã JavaScript của bạn.

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

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

Mã VS 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 loại được tải xuống tự động (đánh máy) từ kho lưu trữ tệp khai báo loại NPMJS. Ngoài ra, bạn có thể cài đặt tiện ích mở rộng bản địa phản ứng phổ biến từ thị trường.JSX and React Native. You will get IntelliSense for React/JSX and React Native from automatically downloaded type declaration (typings) files from the npmjs type declaration file repository. Additionally, you can install the popular React Native extension from the 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 ____75 thành Node.js7. Điều này nói với 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 phía sau hậu trường để tạo mã thời gian chạy thích 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ã gốc React, bạn có thể cài đặt tiện ích mở rộng tự nhiên phản ứng.React Native, you need to set the import5 compiler option to Node.js7. This tells the compiler to create synthetic default members and you get IntelliSense. React Native uses Babel behind the scenes to create the proper run-time code with default members. If you also want to do debugging of React Native code, you can install the React Native Extension.

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

Có, có các phần mở rộng mã VS cho cả phát triển phi tiêu và bay. Bạn có thể tìm hiểu thêm tại tài liệu Flutter.dev.

IntelliSense không làm việc cho các thư viện bên ngoài

import7 hoạt động cho các phụ thuộc được tải xuống bởi NPM (được chỉ định trong import8), Bower (được chỉ định trong import9) 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ụ require0).

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

Khi bạn muốn sử dụng các tệp nhập kiểu ES6 nhưng một số tệp khai báo loại (đánh máy) vẫn chưa sử dụng xuất ES6 Style, sau đó đặt tùy chọn trình biên dịch TypeScript import5 thành true.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Tôi có thể gỡ lỗi JavaScript Minified/Uglified không?

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

Làm cách nào để vô hiệu hóa xác thực cú pháp khi sử dụng các cấu trúc không 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 ống được đề xuất (require2). Tuy nhiên, chúng hiện không được hỗ trợ bởi dịch vụ ngôn ngữ JavaScript của VS Code và được gắn cờ là lỗi. Đối với người dùng vẫn muốn sử dụng các tính năng trong tương lai này, chúng tôi cung cấp cài đặt require3.

Với require4, bạn đã vô hiệu hóa tất cả 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 linter 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 như kiểm tra loại và lỗi có thể can thiệp vào hỗ trợ JavaScript tích hợp của mã vs. Để tìm hiểu cách vô hiệu hóa hỗ trợ JavaScript tích hợp của mã vs, hãy xem Hỗ trợ JavaScript.

11/2/2022

Phần mở rộng nào được sử dụng cho JavaScript trong mã VS?

Đoạn mã JavaScript (ES6)# VS CODE đi kèm với nhiều đoạn mã tích hợp. Phần mở rộng mã JavaScript (ES6) thêm đoạn trích cho cú pháp ES6 (ECMAScript 6). Dưới đây là một mẫu nhỏ của các đoạn trích được cung cấp bởi tiện ích mở rộng này.# VS Code comes with many built-in code snippets. The JavaScript (ES6) code snippets extension adds snippets for ES6 (ECMAScript 6) syntax. Here is a small sampling of the snippets provided by this extension.

Bạn có thể mã JavaScript trên Visual Studio Code không?

VS Code Ship với sự 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 trích, linter và các công cụ JavaScript khác thông qua các tiện ích mở rộng. but you can additionally install debuggers, snippets, linters, and other JavaScript tools through extensions.

Làm cách nào để thêm mã vào JavaScript trong Visual Studio?

Với dự án của bạn mở trong Visual Studio, nhấp chuột phải vào thư mục hoặc nút dự án của bạn trong Giải pháp Explorer (khung bên phải) và chọn Thêm> Mục mới.Trong hộp thoại Tệp mới, trong danh mục chung, chọn loại tệp mà bạn muốn thêm, chẳng hạn như tệp JavaScript, sau đó chọn Mở.right-click on a folder or your project node in Solution Explorer (right pane), and choose Add > New Item. In the New File dialog box, under the General category, choose the file type that you want to add, such as JavaScript File, and then choose Open.

Làm cách nào để chạy mã ES6 trong Visual Studio?

Bước 1 - Cài đặt nút.JS 8. ....
Bước 2 - Định cấu hình một dự án ES6 mới.Hãy khởi động mọi thứ bằng cách tạo một dự án NPM rất đơn giản và khởi chạy nó trong mã vs: $ mkdir Debug-ES6 && CD Debug-ES6.....
Bước 3 - Định cấu hình Babel để chuyển ES6 sang ES5.....
Bước 4 - Thêm cấu hình khởi chạy.....
Bước 5 - Gỡ lỗi ứng dụng của bạn ..