Tiếp theo của bài viết Tối ưu Visual Studio Code Phần 1 – 30 Extension VSCode tăng hiệu quả công việc thì bài viết này sẽ nói về tất tần tật các cài đặt và phím tắt hữu dụng mà mình hay sử dụng nhất để tối ưu Visual Studio Code và tăng hiệu suất công việc lên cao nhất nhé.
I. Cài đặt để tối ưu Visual Studio Code
1. Hướng dẫn cài đặt với file setting.json
Cho anh em nào chưa biết, thì ngoài cài đặt trực tiếp bằng GUI của VSCode, thì ae có thể sửa thằng trong file settings.json
Có 2 cách để mở file setting.json:
- Vào phần cài đặt VSCode -> chọn Open Setting (JSON) bên gốc phải màn hình.
Mở command
Ctrl + Shf + P, gõOpen Setting (JSON).
2. Fira Font và Font Ligatures
Font chữ mà mình sử dụng là Fira font và font chữ có hõ trợ ligatures giúp chúng ta đọc code nhanh hơn.
"editor.fontFamily": "Fira Code", "editor.fontLigatures": true
💥 Bạn có thể xem thêm font Cascadia Code Font cũng có hỗ trợ ligatures và cả tiếng Việt, khá đẹp đấy ! 🔗 Link tải Font Cascadia
2. Zoom bằng chuột (Mouse Wheel Zoom)
Cài đặt này giúp ae phóng to, thu nhỏ font chữ bằng chuột.
"editor.mouseWheelZoom": true
3. Formatter
Lưu lại khi save (Format on Save)
"editor.formatOnSave": true
Chọn trình format mặc đỊnh (default formatter)
Cấu trúc > "[ngôn ngữ]": {
"editor.defaultFormatter": "trình format"
}
Ví dụ:
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
}Một vài cài đặt Prettier
"prettier.singleQuote": true, // Sử dụng dấu nháy đơn "prettier.jsxSingleQuote": true, // Sử dụng dấu nháy đơn cho thuộc tính trong jsx "autoprefixer.formatOnSave": true, // Format on Save "prettier.trailingComma": "all", // Thêm dấu phẩy vào phần tử cuối của Object "prettier.useTabs": true, // Dùng tab thay vì space
4. Emmet cho ngôn ngữ khác
Emmet bộ snippet giúp ae Front-end code html nhanh hơn. VD .box = <div class="box"></div> Mặc định, ta chỉ có thể dùng trong file html. Với cài đặt này, ae có thể dùng ở các file khác.
"emmet.includeLanguages": {
"javascript": "javascriptreact", // dành cho file jsx
"markdown": "html"
},5. Custom giao diện VSCode
Anh em có thể thay đổi mọi màu sắc trong VSCode một cách tuỳ thích, chỉ cần ae hiều thuộc tính cần thay đổi là gì.
// Thay đổi màu sắc
"workbench.colorCustomizations": {
"sideBar.background": "#191932",
"editor.background": "#191932",
// ...
},
// Một vài cài đặt khác
"workbench.activityBar.visible": true, // Bật tắt thanh sidebar bên trái
"workbench.colorTheme": "Dracula", // Cài đặt theme
"window.menuBarVisibility": "toggle", // Tắt thanh menu trên cùng (Giữ Alt và Click để hiện thanh menu)🔗 Link tìm hiểu thêm API VSCode
6. Custom theme
Anh em có thể tuỳ ý thay đổi các màu của bất kỳ theme nào, chỉ cần ae biết tý về CSS.
// Cấu trúc
"editor.tokenColorCustomizations": {
"[Tên theme]": {
"textMateRules": [
{
"scope": [Mảng các scope],
"settings": {
Các thuộc tính style
}
},
]
}
}
// Ví dụ:
"editor.tokenColorCustomizations": {
"[Dracula]": {
"textMateRules": [
{
"scope": ["string.quoted", "string.quoted.single"],
"settings": {
"foreground": "#d38a60",
"fontStyle": "italic"
}
},
]
}
}Cách lấy tên các scope
B1: Mở command Ctrl + Shf + P, gõ “Inspect Editor Tokens and Scopes“
B2: Click chuột vào vị trí mà ae muốn đổi màu, và copy tên thuộc tính.
7. Better comment
Thêm màu sắc để phân biệt các comment với nhau.
"better-comments.tags": [
{
"tag": "@render", // prefix trước mỗi comment
"color": "#06AEED",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": true
},
// ...
]8. html wrapper
"htmltagwrap.tag": "div", // tag mặc định sẽ wrap "htmltagwrap.autoDeselectClosingTag": true, // tự động phát hiện kết thúc tag
9. Ẩn bớt folder, file (Exclude Folder, Files)
Có một số folder và file rất ít khi chúng ta cần mở lên xem như node_modules, hay các file lock… Chúng ta có thể ẩn nó đi bên thanh sidebar để thư mục đỡ rối hơn.
"files.exclude": {
"**/.git": true,
"**/.next": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/node_modules/": true,
// ...
},10. Một vài cài đặt khác
// Chọn terminal mặc định khi mở "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", // Auto save (Hạn chế liệt phím Ctrl + S) "files.autoSave": "afterDelay", "files.autoSaveDelay": 2000 // Tự lưu sau 2s
II. Visual Studio Code Snippet
🐣 Snippet là những đoạn code ngắn thay thế cho những đoạn code có một mẫu chung, được lặp đi lặp lại. Sử dụng quen với các snippet thì ae sẽ giảm được rất nhiều thời gian khi code.
Ngoài những snippet có sẵn do các Extension hỗ trợ, ae hoàn toàn có thể tạo ra những snippet cho riêng mình một cách dễ dàng.
B1: Mở cài đặt góc phải, chọn
User Snippethoặc dùng tổ hợp phímCtrl+U Ctrl+S.B2: Chọn loại snippet (có 2 loại là Local chỉ dùng cho dự án hiện tại và Global là cho mọi dự án).
B3: Thêm 1 snippet theo cấu trúc như vd sau:
"Make Arrow Function": { // Tên Snippet
"prefix": "fn", // Cụm thay thế mà ae sẽ gõ
"body": [
// những gì cần thay thế
"const ${1:name} = function(${2:params}){",
" $3",
" return $4;",
"}"
],
"description": "Make Arrow Function"
},$1 là thứ tự vị trí con trỏ sẽ di chuyển đến khi ae nhấn tab. ${1:default} Cũng thế nhưng có default value
Ae có thể snippet generator website để tạo snippet nhanh chóng nhé.
🔗 Link Snippet VSCode API 🔗 Link Snippet Generator
III. Các Shortcut hữu dụng trong VSCode
1. Default shortcut
| Key | Mô tả | Command |
| Ctrl+K Ctrl+S | Mở bảng Shortcut | openGlobalKeybindings |
| Ctrl+P | Mở navigation tìm file nhanh | quickOpenNavigateNextInFilePicker |
| Ctrl + T | Tìm nhanh một symbols (hàm, biến,..) | showAllSymbols |
| Ctrl+R | Mở navigation tìm folder nhanh | quickOpenNavigateNextInRecentFilesPicker |
| Ctrl+` | Mở Terminal (cmd) trong VSCođe | terminal.toggleTerminal |
| Ctrl+Shf+C | Mở Terminal (cmd) bên ngoài tại thư mục hiện hành | terminal.openNativeConsole |
| Ctrl+Space | Nhắc lệnh | triggerSuggest |
| Ctrl+Shf+P | Mở bảng command | quickOpenNavigatePreviousInFilePicker |
| PageUp | Đưa con trỏ về đầu file | cursorPageUp |
| PageDown | Đưa con trỏ về cuối file | cursorPageDown |
| Home | Đưa con trỏ về đầu dòng | cursorHome |
| End | Đưa con trỏ về cuối dòng | cursorEnd |
| Ctrl+G | Di chuyển đến dòng bất kỳ | gotoLine |
| Ctrl+Shf+K | Xoá một dòng | deleteLines |
| Ctrl+C | Copy (Copy dòng) không cần bôi đen | clipboardCopyAction |
| Ctrl+X | Cắt (Cắt dòng) | clipboardCutAction |
| Ctrl+L | Bôi đen dòng hiện tại | expandLineSelection |
| Shf+[⬆ ⬇ ⬅ ➡] | Chọn liên tiếp dòng hoặc ký tự | cursor[Row or Column]Select[Navigation] |
| Alt+Shf+[⬇ ⬆] | Copy&Paste một dòng lên trên hoặc bên dưới | copyLines[Navigation]Action |
| Alt+[⬇ ⬆] | Di chuyển 1 dòng lên hoặc xuống | moveLines[Navigation]Action |
| Ctrl+K Ctrl+L | Thu gọn hoặc mở rộng một đoạn code | editor.toggleFold |
| Ctrl+D | Tìm kiếm các từ trùng với ký tự tại con trỏ và thêm 1 con trỏ tại đó | addSelectionToNextFindMatch |
| Ctrl+Shf+L | Chọn tất cả các ký tự trùng và thêm con trỏ tại đó | selectHighlights |
| F2 | Đổi tên 1 phương thức, 1 biến | rename |
| Ctrl+F or F3 | Tìm kiếm và tìm kết quả kế tiếp | nextMatchFindAction |
| Ctrl+H | Thay thế | startFindReplaceAction |
| Ctrl+B | Đóng mở Sidebar bên trái | toggleSidebarVisibility |
| Ctrl+/ | Tạo hoặc xoá 1 comment hoặc comment dòng hiện tại | commentLine |
| Shf+Tab | Lùi 1 tab | outdent |
| Ctrl+Tab | Di chuyển các tab trong VSCode | quickOpenPreviousRecentlyUsedEditorInGroup |
| Ctrl+U Ctrl+S | Mở hoặc tạo Snippet | openSnippets |
| Ctrl+, | Mở settings | openSettings |
| Alt + Shf + O | Loại bỏ Import không dùng đến | organizeImports |
| Ctrl + Shf + O | Đến một symbols nào đó | gotoSymbol |
2. Custom shortcut
Để custom lại các shortcut, ae có thể mở bảng shortcut, click thẳng vào shortcut cần custom và sửa lại. Hoặc có thể dùng file keybinding.json để sửa, mở file đó ở gốc phải màn hình shortcut.
Ở dưới đây có một số shortcut là default, nhưng mình muốn để chung với các shortcut mình đã sửa để dễ nhớ
| Key | Mô tả | Command |
| Ctrl+K Ctrl+Backspace | Thu gọn tất cả code | editor.foldAll |
| Ctrl+K Ctrl+J | Mở rộng tất cả code | editor.unFoldAll |
| Ctrl+W | Đóng tab hiện tại | closeActiveEditor |
| Ctrl+Shf+W | Đóng tất cả các tab trừ tab hiện tại | closeOtherEditors |
| Win+Shf+Z | Bật tắt Zen Mode | toggleZenMode |
| Ctrl+[⬆ ⬇ ⬅ ➡] | Chia màn hình ra nhiều màn hình con | splitEditor[Navigation] |
| Ctrl+Shf+[⬆ ⬇ ⬅ ➡] | Di chuyển qua lại các màn hình vừa chia | navigate[Navigation] |
| Alt+N | Tạo file mới nhanh | advancedNewFile |
| Alt+F2 | Đổi tên file hiện tại nhanh | fileutils.renameFile |
| Alt+Delete | Xoá file hiện tại nhanh | fileutils.removeFile |
IV. Tạm kết
Trên đây là tất tần tật các cài đặt trên VSCode của mình, mong rằng các cài đặt trên sẽ giúp không ít thì nhiều cho mọi người trong tối ưu hoá hiệu suất công việc.
Mọi người có thể tải resource các extension và setting của mình tại Github của mình nhé. Cảm ơn mọi người đã đọc bài viết của mình 😘
