Làm cách nào để sửa lỗi JavaScript trong Mã VS?

Trình chỉnh sửa mã cơ bản như Visual Studio Code (VS Code) giúp bạn phát triển xa hơn. Nhưng nếu bạn muốn viết mã nhanh hơn và mắc ít lỗi hơn, thì bạn cần tận dụng thư viện tiện ích mở rộng khổng lồ có sẵn trên thị trường của nó

Có hàng ngàn tiện ích mở rộng Mã VS khác nhau có sẵn cho ngôn ngữ bạn chọn e. g. JavaScript, TypeScript hoặc Python. Vì vậy, thật khó để tìm được tiện ích mở rộng phù hợp nếu không thử tất cả

Tôi đã thử nghiệm hơn hàng trăm tiện ích mở rộng cho JavaScript cho bài đăng trên blog này và sắp xếp những phát hiện của tôi vào danh sách chứa 10 tiện ích mở rộng Mã VS tốt nhất cho JavaScript để tiết kiệm thời gian của bạn

Dưới đây là 10 tiện ích mở rộng Mã VS tốt nhất cho JavaScript

Mục lục

1

Tiện ích mở rộng Mã VS tốt nhất cho JavaScript là gì?

Dưới đây là những lựa chọn hàng đầu của tôi về tiện ích mở rộng so với mã tốt nhất cho JavaScript mà bạn nên dùng thử trong trình chỉnh sửa mã của mình

1. Đoạn mã JavaScript (ES6)

Tiện ích mở rộng Mã VS này bổ sung toàn bộ các đoạn mã JavaScript có thể dễ dàng truy cập bằng phím tắt

Đoạn mã JavaScript VS Phần mở rộng mã hiển thị việc tạo Lời hứa mới

Thông thường, bạn sẽ thấy rằng mình đang sử dụng lại các khối mã khác nhau trong các dự án JavaScript khác nhau bằng cách sao chép nó từ dự án này sang dự án khác. Điều này có thể khá tốn thời gian, do đó, tiện ích mở rộng này có thể cải thiện năng suất của bạn bằng cách có sẵn một danh sách lớn các đoạn mã JavaScript khác nhau bằng các phím tắt đơn giản

Ví dụ: bảng bên dưới hiển thị phương thức JavaScript nào khả dụng bao gồm cả tên phím tắt trong tiện ích mở rộng này

ShortcutContentfre→forEach loop trong cú pháp ES6 array.forEach(currentItem => {})fof→for … of loop for(const item of object) {}fin→for … in loop for(const item in object) {}anfn→tạo một hàm ẩn danh (params) => {}nfn→tạo một hàm có tên const add = (params) => {}dob→hủy cú pháp đối tượng 

CMD + . -> triger quick fix

0dar→hủy cú pháp mảng _______0_______1sti→đặt phương thức trợ giúp khoảng thời gian _______0_______2sto→set

Tổng cộng, bạn sẽ tìm thấy hơn 44 đoạn mã sẽ cải thiện năng suất của bạn trong JavaScript

2. ESLint

ESLint là một kẻ nói dối phân tích tĩnh mã của bạn để tìm ra các vấn đề dựa trên một bộ quy tắc được định cấu hình trước. Thông thường, bạn chạy ESLint thông qua thiết bị đầu cuối để kiểm tra mã của mình, nhưng giờ đây bạn sẽ nhận được phản hồi ngay lập tức bằng cách chạy ESLint dưới dạng tiện ích mở rộng Mã VS

Tiện ích mở rộng VS Code ESLint hiển thị bản trình diễn trên thông báo lỗi

Bạn có thể định cấu hình tiện ích mở rộng để tự động khắc phục sự cố khi bạn nhấn lưu trong trình chỉnh sửa Mã VS. Đây là các cài đặt mà tôi đang sử dụng cho tiện ích mở rộng này, vì vậy tiện ích này sẽ tự động khắc phục các phát hiện của ESLint

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.run": "onSave",
  "eslint.validate": [
    "javascript"
  ],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],

3. DotEnv

Tiện ích mở rộng DotEnv VS Code thêm đánh dấu cú pháp vào. biến env. Trong các dự án của tôi, tôi sử dụng rất nhiều. biến env. Vì vậy, việc đánh dấu cú pháp trên các tệp này giúp tôi ít mắc lỗi hơn và cho phép tôi đọc các biến môi trường nhanh hơn rất nhiều so với một tệp chỉ có văn bản màu xám

phần mở rộng dotenv vscode hiển thị đánh dấu cú pháp trên một. env. tập tin ví dụ

4. Tăng cường JavaScript

Javascript booster là một tiện ích mở rộng bổ sung nhiều bản sửa lỗi nhanh khác nhau khi bạn đang chỉnh sửa mã trong JavaScript. Trình trợ giúp "sửa lỗi nhanh" mặc định trong Mã VS không thực sự hữu ích và chứa một số bản sửa lỗi hạn chế

Kích hoạt tiện ích mở rộng này sẽ thêm 33 bản sửa lỗi nhanh cho các sự cố phổ biến nhất như sửa lỗi khai báo e. g. chuyển đổi var/const thành let hoặc chuyển đổi hàm mũi tên tốc ký thành câu lệnh

Tiện ích mở rộng JavaScript Booster vscode hiển thị hành động "khắc phục nhanh" để chuyển đổi chức năng

Có thể kích hoạt cách khắc phục nhanh khi di chuột qua chức năng và nhấn

CMD + . -> triger quick fix

5. xinh hơn

Prettier là trình định dạng mã và thực thi một kiểu nhất quán mà bạn đã định cấu hình sẵn trong dự án của mình. Có một phong cách nhất quán có thể mang lại lợi ích lớn cho năng suất của nhóm vì PR có thể tập trung vào chính mã thay vì thảo luận xung quanh phong cách mã

Để sử dụng Prettier để định dạng mã của bạn, bạn có thể chạy các lệnh sau

________số 8_______

Bạn cũng có thể quyết định sử dụng Prettier làm trình định dạng mặc định cho một ngôn ngữ cụ thể. Điều đó có nghĩa là khi bạn chạy lệnh format trong VS Code, nó sẽ tự động sử dụng Prettier. Để kích hoạt nó, hãy thêm phần sau vào cài đặt Mã VS của bạn

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

6. Tailwind CSS IntelliSense

Một tiện ích mở rộng tuyệt vời khác bổ sung tính năng tự động hoàn tất, nhưng lần này là dành cho Tailwind CSS. Nếu bạn đang phát triển front-end, có khả năng cao là bạn đang sử dụng CSS. Tailwind là một khung phổ biến giữa các nhà phát triển CSS và việc bật tiện ích mở rộng này sẽ cải thiện trải nghiệm của bạn bằng cách thêm các tính năng tuyệt vời như tự động hoàn thành, tô sáng cú pháp và linting

Ví dụ về phần mở rộng Tailwind CSS IntelliSense VS Code

Như bạn có thể thấy trong bản minh họa, tiện ích này sẽ tự động cố gắng tự động hoàn thành các lớp tiện ích Tailwind cho bạn

7. Sắp xếp dòng

Tiện ích mở rộng Mã VS. các dòng sắp xếp thực hiện những gì tên gợi ý đó là sắp xếp các dòng trong tệp của bạn. Ví dụ: khi tạo danh sách trong JavaScript, nó có thể tiết kiệm thời gian thực nếu bạn có thể tự động sắp xếp các mục theo thứ tự abc chẳng hạn. Bạn có thể sắp xếp mã của mình theo các cách sau

CommandSort lines functionalitysortLinesAscending, case-sensitive (default)sortLinesCaseInsensitiveAscending, case-sensitivesortLinesCaseInsensitiveUniqueUnique ascending, case-sensitivesortLinesReverseDescending, case-sensitivesortLinesLineLengthLine length ascendingsortLinesLineLengthReverseLine length descendingsortLinesVariableLengthVariable-length ascendingsortLinesVariableLengthReverseVariable-length descendingsortLinesNaturalSorts alphabetically except groups with multi-digit numberssortLinesUniqueRegular character code keeping only unique itemssortLinesShuffleShuffles outputremoveDuplicateLinesRemoves duplicate

Để gọi chức năng Sort lines gõ lệnh sau

CMD + Shift + P -> Sort Lines

Điều này sẽ tự động liệt kê các tùy chọn để sắp xếp các dòng của bạn. Hàm sắp xếp được tôi sử dụng nhiều nhất khi viết mã bằng JavaScript là 

CMD + . -> triger quick fix

6 Sắp xếp theo thứ tự bảng chữ cái nhưng nhóm các số có nhiều chữ số

8. GitLens

Nếu bạn đang phát triển các dự án JavaScript, thì khả năng cao là bạn đang sử dụng git. Phần mở rộng. GitLens cải thiện chức năng git trong Mã VS. Một vài tính năng đáng chú ý đáng được đề cập là

• git đổ lỗi – hiển thị ai đã sửa đổi từng dòng trong một tệp
• thay đổi git – làm nổi bật mọi thay đổi cục bộ (chưa xuất bản) hoặc các dòng được thay đổi bởi lần xác nhận gần đây nhất
• điều hướng sửa đổi git – hiển thị lịch sử git của một tệp và cho phép bạn dễ dàng điều hướng nó

Ví dụ mở rộng Gitlens VS Code của git pour

9. Đồ thị Git

Không thể sử dụng tiện ích mở rộng Git Graph VS Code nếu bạn là người dùng git nhiều. Tiện ích mở rộng cho phép bạn xem lịch sử cam kết git của mình dưới dạng biểu đồ. Bạn sẽ nhận được tổng quan tức thì về tất cả các lần xác nhận, nhánh, thẻ và người dùng đã thực hiện các thay đổi trước đó

Ví dụ tiện ích mở rộng Git Graph VS Code của chế độ xem biểu đồ

Ngoài ra, nó cấp cho người dùng khả năng thực hiện các hành động git như cam kết, hợp nhất, hoàn nguyên, thanh toán, rebase, đổi tên và đặt lại các nhánh. Khả năng thực hiện điều này từ một tổng quan duy nhất trong Mã VS giúp cải thiện năng suất rất nhiều và không khiến bạn bị lạc khỏi dòng chảy của mình

10. Trợ lý GitHub

Không thể bỏ qua phần mở rộng GitHub Copilot VS Code trong danh sách này. Đây thực chất là một lập trình viên ghép nối AI đưa ra gợi ý về những gì nó nghĩ bạn sẽ viết trong mã của mình. Nó thậm chí có thể viết các phương thức và lớp hoàn chỉnh cho bạn

Nhưng làm thế nào AI có thể làm được điều đó? . Vì vậy, nó đã được đào tạo để nhận ra các mẫu và với kiến ​​thức đó, nó có thể xác định những gì nhà phát triển sẽ tạo ra trong mã

Theo kinh nghiệm của tôi, tôi nhận thấy rằng khi các dự án JavaScript phát triển lớn hơn theo thời gian, thì GitHub copilot càng trở nên tốt hơn trong việc dự đoán loại mã tôi muốn viết. Xem ví dụ sau để hiểu về lập trình cặp AI mạnh mẽ như thế nào

Ví dụ mở rộng GitHub Copilot VS Code về dự đoán chức năng

Phần kết luận

Tóm lại, với tư cách là một nhà phát triển JavaScript, việc tìm các tiện ích mở rộng Mã VS phù hợp để cải thiện quy trình làm việc và năng suất của bạn có thể là một nhiệm vụ khó khăn

Vì vậy, tôi đã tạo danh sách này chứa 10 tiện ích mở rộng VS Code tốt nhất cho JavaScript bao gồm các đoạn mã JavaScript (ES6), EsLint, DotEnv, JavaScript booster, Prettier, Tailwind CSS IntelliSense, Sort lines, Git Lens, Git Graph và GitHub Copilot

Năng suất và sự tập trung hàng ngày của bạn sẽ được cải thiện và bên cạnh đó, mã của bạn ít bị lỗi hơn nhờ các biện pháp bảo vệ và điểm nổi bật có trong các tiện ích mở rộng Mã VS này

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

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

JavaScript có hoạt động trong Mã VS không?