Nội dung
Như các bạn đã biết, Visual studio code (VScode) là một trong nhưng trình soạn code hàng đầu hiện nay.
Kể từ khi ra mắt, VScode đã thực sự trở thành một tên tuổi lớn, được rất nhiều người sử dụng.
VScode sở dĩ nổi tiếng như vậy là vì:
- Hệ thống có sự ổn định cao.
- Dễ dàng tích hợp các tiện ích được Microsoft xây dựng.
- Thư viện Extension rộng lớn, đa dạng.
Ở bài viết này mình xin điểm qua một vài Extension tiêu biểu rất đáng được sử dụng.
1/ JavaScript (ES6) Code Snippets
Trong quá trình code, việc phải nhập đi nhập lại những đoạn code thông dụng là điều thường thấy.
Tuy nhiên, việc phải nhập lại 1 đoạn code nhiều lần sẽ khiến cho công việc của kỹ sư trở nên dài dòng và phức tạp hơn.
Do đó, JavaScript (ES6) Code Snippets đã ra đời nhằm giải quyết vấn đề trên. JavaScript (ES6) Code Snippets cho phép người dùng sử dụng các đoạn mã tắt. Những đoạn code này nhằm thay thế các đoạn code thông dụng phải sử dụng nhiều lần khi lập trình.
Nó không chỉ giúp lập trình viên tiết kiệm thời gian mà còn làm công việc lập trình trở nên đơn giản hơn.
Ví dụ:
a/ Mục đích của đoạn code nhằm ẩn 1 hình ảnh.
// Khi không sử dụng JavaScript (ES6) Code Snippets
const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));
// Khi sử dụng
hide(document.querySelectorAll('img')); // Hides all b/ Xác định vị trí lăn chuột trong trang.
// Khi không sử dụng JavaScript (ES6) Code Snippets
const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
// Khi sử dụng
getScrollPosition(); // {x: 0, y: 200}c/ Mục đích của đoạn code là lăn chuột về đầu trang.
// Khi không sử dụng JavaScript (ES6) Code Snippets
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
// Khi sử dụng
scrollToTop();2/ VScode-icons
Với tiện ích mở rộng này, người dùng có thể tạo các tập tin được đính kèm với các icons.
Tiện ích này giúp người lập trình có thể dễ dàng tìm kiếm và sắp xếp các thư mục. Ngoài ra các thư mục trên cũng trở nên trực quan và ít nhàm chán hơn.
Dưới đây là một ví dụ sau khi sử dụng VScode-icons:
3/ GitLens
Trong quá trình lập trình, việc sử dụng các phần mềm như Gitlab, Github… là rất cần thiết.
Do đó, để tránh bị git blame trong qua trình sử dụng git.
Lập trình viên có thể sử dụng Gitlens để cung cấp chức năng so sánh File theo đơn vị commit.
Chức năng này giúp người quản lý git dễ dàng hơn trong việc nhận biết những thay đổi trong commit và ngăn chặn những sự cố có thể xảy ra.
4/ Bracket Pair Colorizer và Indent Rainbow
Trong quá trình lập trình, việc phải viết những đoạn code dài là thường thấy.
Và khi lập trình viên phải đọc một đoạn code quá dài, sẽ khiến việc xác định các cặp dấu ngoặc trở nên khó khăn hơn.
Vì thế, cặp đôi Bracket Pair Colorizer và Indent Rainbow đã được ra đời nhằm khắc phục trở ngại trên.
BPC và Indent Rainbow sẽ giúp tô màu cho từng cặp đóng mở ngoặc khác nhau.
Điều này giúp việc xác định, tìm kiếm của lập trình viên trở nên nhanh chóng và dễ dàng hơn.
5/ ESLint (highly recommend)
Để hiểu được chức năng của tiện ích mở rộng này thì bạn cần phải hiểu lint (linter) trong lập trình là gì.
Trong quá trình viết code, để xây dựng một project bài bản và đủ tốt thì ngay từ đầu bạn cần xây dựng những coding convention để mọi người tuân theo. Coding convention thường không giúp code chạy nhanh hơn, nhưng nó giúp duy trì code dễ đọc hơn.
Lint (linter)là những công cụ giúp chúng ta phân tích code, từ đó đưa ra các vấn đề mà code đang gặp phải như không tuân thủ coding style, sai coding convention.
Ngoài ra, lint còn có thể giúp chúng ta tìm ra một số bug tiềm ẩn trong code như gán biến chưa khai báo, có thể gây lỗi runtime hoặc lấy giá trị từ một biến toàn cục khiến cho việc debug trở nên khó khăn,…
Công cụ ESLint là một công cụ như vậy.
ESLint cho phép chúng ta tuỳ chỉnh cầu hình theo coding convention của mình, kiểm tra coding style và tìm ra các bug cũng như các vấn đề tiềm ẩn khác. ESlint được xem là tiện ích
Kết luận
Như vậy, chúng ta đã điểm qua một số Extension hay và hữu ích, việc thêm và sử dụng những tiên ích mở rộng này thông thường sẽ mang lại rất nhiều lợi ích. Tuy nhiên, trong một số dự án thực tiễn, việc sử dụng các extension lại tạo ra những khó khắn cho quá trình lập trình.
Vì vậy, việc lựa chọn và sử dụng các extension trên cần được lựa chọn một cách kỹ lưỡng. Xem xét sao cho phù hợp với đặc điểm cụ thể của tường dự án.
Cảm ơn các bạn đã đọc blog này của mình. enjoy coding!
@ Lê Minh – Cựu học viên Ironhack Việt Nam
