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.
Tìm phần mở rộngBạn có thể tìm thấy các tiện ích mở rộng JavaScript bằng cách nhập Ngoài ra, bạn có thể tìm kiếm các phần mở rộng
Tiện ích mở rộng được đề xuấtNế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ử. EslinThị 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. SonarlintThị 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. Đ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. 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 IntellisenseMarketplace - 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 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ầ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. IntelliSenseIntellisense 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ư 0 và 1; và cho các nền tảng khác như 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 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ư:
Để xác định dự án JavaScript cơ bản, hãy thêm 3 tại gốc của không gian làm việc của bạn:
Xem Làm việc với JavaScript để biết cấu hình 3 nâng cao hơn.
Đoạn tríchMã 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.
Hỗ trợ JSDOCMã 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 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 9.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 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 0 hoặc 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ý.Nhập khẩu tự động
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 2 từ tài liệu-UI vào đầu tệp:Để vô hiệu hóa nhập khẩu tự động, đặt 3 thành 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 5 và 6.Đị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
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)).
Đổi tênNhấ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: Tái cấu trúcMã 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. Tái cấu trúc có sẵn bao gồm:
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ậpMã JavaScript chưa sử dụng, như vậy, khối khác của câu lệnh 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: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 5 thành 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:
Tổ chức nhập khẩuHà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:
Hành động mã trên lưuCài đặt 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:
Bạn cũng có thể đặt 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:
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 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 Bạn cũng có thể đặt 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:
Xem Node.js/JavaScript để biết thêm thông tin. Đề 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 Đặt Gợi ý inlay 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: Đ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
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
LintersLinters 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.
Kiểu kiểm traBạ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. TypeScript đã cố gắng suy ra các loại trong các tệp 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ỗiMã 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àngBạ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ỗiDebug 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. Phần mở rộng phổ biếnVS 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.
Bước tiếp theoĐọc để tìm hiểu về:
Câu hỏi thường gặpMã 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 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
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
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 ( Với 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 .. |