Setup VS Code tối ưu: extension, phím tắt và cấu hình nên có
VS Code là trình soạn thảo phổ biến nhất hiện nay. Những extension, phím tắt và thiết lập giúp bạn code nhanh và thoải mái hơn mỗi ngày.
Nội dung bài viết
Visual Studio Code (VS Code) là trình soạn thảo code được dùng nhiều nhất thế giới theo khảo sát của Stack Overflow nhiều năm liền. Nó miễn phí, nhẹ và có kho tiện ích mở rộng khổng lồ. Nhưng để thật sự hiệu quả, bạn nên dành 30 phút thiết lập theo hướng dẫn dưới đây.
Extension nên cài
| Extension | Công dụng |
|---|---|
| Prettier | Tự động định dạng code đẹp, thống nhất |
| ESLint | Phát hiện lỗi và code chưa chuẩn trong JavaScript/TypeScript |
| Live Server | Mở trang HTML và tự tải lại khi lưu file |
| GitLens | Xem ai sửa dòng code nào, khi nào |
| Error Lens | Hiển thị lỗi ngay trên dòng code |
| Python (Microsoft) | Hỗ trợ chạy và debug Python |
| Code Spell Checker | Bắt lỗi chính tả tiếng Anh trong tên biến |
| Material Icon Theme | Icon file đẹp, dễ phân biệt |
Lời khuyên: đừng cài quá nhiều extension, vì VS Code sẽ chậm đi. Chỉ cài những gì bạn thực sự dùng.
Phím tắt "phải thuộc"
| Windows / Linux | macOS | Chức năng |
|---|---|---|
Ctrl + P | Cmd + P | Mở nhanh file theo tên |
Ctrl + Shift + P | Cmd + Shift + P | Bảng lệnh (Command Palette) |
Ctrl + D | Cmd + D | Chọn từ giống tiếp theo (đa con trỏ) |
Alt + ↑/↓ | Option + ↑/↓ | Di chuyển dòng lên/xuống |
Shift + Alt + ↓ | Shift + Option + ↓ | Nhân bản dòng |
Ctrl + / | Cmd + / | Comment/bỏ comment |
F2 | F2 | Đổi tên biến ở mọi nơi |
Ctrl + ` | Ctrl + ` | Mở/đóng Terminal |
Cấu hình settings.json
Nhấn Ctrl + Shift + P, gõ "Open User Settings (JSON)" và thêm các thiết lập sau:
{
"editor.fontSize": 15,
"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
"editor.fontLigatures": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"editor.bracketPairColorization.enabled": true,
"files.autoSave": "onFocusChange",
"explorer.confirmDelete": false,
"workbench.iconTheme": "material-icon-theme"
}Thiết lập quan trọng nhất là formatOnSave: mỗi lần lưu file, code tự động được căn chỉnh gọn gàng, bạn không bao giờ phải lo chuyện thụt lề nữa.
Emmet: viết HTML nhanh gấp 10 lần
VS Code tích hợp sẵn Emmet. Gõ đoạn viết tắt rồi nhấn Tab:
ul.menu>li.item*3>aKết quả:
<ul class="menu">
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
</ul>Gõ ! rồi Tab trong file HTML trống để tạo ngay khung trang chuẩn HTML5.
Đồng bộ cài đặt giữa các máy
Bật Settings Sync (biểu tượng tài khoản ở góc dưới trái → Turn on Settings Sync), đăng nhập bằng GitHub hoặc Microsoft. Toàn bộ extension, phím tắt và cấu hình sẽ tự động có mặt khi bạn dùng máy khác.
