Nội dung
Trong bài viết này, chúng tôi sẽ giới thiệu 12 extension Visual Studio Code dành cho các frontend developer làm việc với HTML, CSS, JavaScript và các framework như VueJS hoặc ReactJS.
Visual Studio Code có 2,6 triệu người dùng hoạt động hàng tháng vào năm 2017 (con số chính thức cuối cùng mà chúng tôi có thể tìm thấy, chắc chắn là nhiều hơn vào lúc này) và được cho là trình chỉnh sửa code tốt nhất hiện nay.
Một trong những tính năng tốt nhất là Market Place cung cấp rất nhiều tiện ích mở rộng để tùy chỉnh chính xác theo nhu cầu của bạn và giúp bạn viết được những code chất lượng cao.
JavaScript (ES6) code snippets
Extension này được tạo ra bởi Charalampos Karypidis và đã được tải xuống 5.6 triệu lần cho đến nay. Nó cung cấp các đoạn mã để viết JavaScript, Typescript, React, Vue, HTML,… và hỗ trợ cú pháp ES6.
NPM
Mọi nhà phát triển đều biết NPM – Trình quản lý Node Package Manager. Tiện ích mở rộng này giúp bạn quản lý Package.json của mình, cung cấp các cảnh báo nếu các dependencie chưa được cài đặt và giúp kiểm soát phiên bản.
Prettier
Prettier từ Esben Petersen là một tiện ích mở rộng khá gọn gàng đã được tải xuống gần 14 triệu lần. Nó giúp bạn định dạng mã của mình và cung cấp các từ khóa màu để mã dễ đọc hơn.
CSS Peek
CSS Peak giúp bạn khi làm việc với các chuỗi và ID của lớp ngôn ngữ đánh dấu bằng cách xác định và liệt kê các kiểu khác nhau đã được áp dụng. Điều này rất hữu ích vì bạn không còn phải chuyển giữa các tệp HTML và CSS nữa.
Vetur
Vetur là VueJS Extension chính thức và đã được tải xuống gần 8 triệu lần. Nó cung cấp khả năng kiểm tra lỗi, tính năng tự động hoàn thành và cung cấp các đoạn Vue. Điều này thực sự tuyệt vời nếu bạn là một nhà phát triển Vue.
ESLint
ESLint – ta có thể nói gì? Nhiều người thích linting, nhiều người thì không. Nhưng giá trị mà linting mang lại cho mã sạch là điều khó có thể bàn cãi và tiện ích mở rộng với 15 triệu lượt tải xuống này là công cụ tốt nhất cho điều đó nếu bạn phát triển bằng JavaScript.
Live Sass Compiler
Tiện ích mở rộng Live Sass Compiler là một công cụ nhỏ nhưng mạnh mẽ có thể biên dịch các tệp SASS / SCSS của bạn thành các tệp CSS trong thời gian thực và cung cấp bản xem trước trực tiếp các kiểu đã biên dịch trong trình duyệt của bạn.
Debugger for Chrome
Chrome đối với nhiều nhà phát triển là trình duyệt số một khi phát triển, thử nghiệm và gỡ lỗi mã ở đó. Với tiện ích mở rộng chính thức cho VS Code này, bạn có thể làm như vậy trực tiếp từ Visual Studio Code – điều đó thật tuyệt.
Live Server
Live Server của Ritwick Dey, người cũng đã tạo Live Sass Compiler tạo ra một máy chủ phát triển cục bộ ngay trong Visual Studio Code để phục vụ các trang web tĩnh và động của bạn. Sử dụng nút Go-live trong trình chỉnh sửa, bạn có thể serve code của mình ngay lập tức và tiện ích mở rộng cũng hỗ trợ tải lại trực tiếp – rất nhanh và gọn gàng.
Beautify
Beautify, một tiện ích mở rộng tuyệt vời khác để định dạng code giống như Prettier. Gần 7 triệu lượt tải xuống nói lên điều đó và bạn có thể định dạng mã được viết bằng JavaScript, JSON, CSS, Sass và HTML.
Bootstrap 5 và Font Awesome Snippets
Bằng việc tạo nhanh các component Bootstrap 5 hoặc các icon Font Awesome chỉ với nhấn tab, snippet này thật sự hữu ích cho các frontend developer. Nó sẽ giúp cải thiện hiệu suất làm việc của bạn một cách nhanh chóng nhất.
Reactjs code snippets
Mỗi khi bạn tạo một file mới, thông thường bạn sẽ phải tự thêm các component skeleton, component có thể là một class, function, hooks, redux… Tiện ích này sẽ giúp bạn tạo tất cả các đoạn mã đó chỉ với một nhấp chuột.
Reactjs code snippet có sẵn các đoạn mã cho React dựa trên babel-sublime-snippets package. Reactjs code snippets có khoảng 50 đoạn mã khác nhau, hỗ trợ 4 ngôn ngữ (file extensions):
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
Kết luận
Có thể bài tông hợp này chưa phải hoàn thiện nhất và các extension không nhất thiết là tốt nhất. Nhưng chúng tôi hy vọng nó cung cấp cho bạn một số công cụ hữu ích để giúp bạn viết những dòng code chất lượng cao và trở thành một web developer tốt hơn.
