Tối ưu Visual Studio Code Phần 2 – 10 cài đặt và Shortcut VSCode hiệu quả

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é.

tối ưu visual studio code

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:

  1. Vào phần cài đặt VSCode -> chọn Open Setting (JSON) bên gốc phải màn hình.
  2. 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.

Fira Font và Font Ligatures
Fira Font và Font Ligatures
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

🔗 Link tải Font

💥 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

Inspect Editor Tokens and Scopes
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.

Custom Color VSCode
Custom Color VSCode

7. Better comment

Thêm màu sắc để phân biệt các comment với nhau.

 Better comment
Better comment
"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 Snippet hoặc dùng tổ hợp phím Ctrl+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

KeyMô tảCommand
Ctrl+K Ctrl+SMở bảng ShortcutopenGlobalKeybindings
Ctrl+PMở navigation tìm file nhanhquickOpenNavigateNextInFilePicker
Ctrl + TTìm nhanh một symbols (hàm, biến,..)showAllSymbols
Ctrl+RMở navigation tìm folder nhanhquickOpenNavigateNextInRecentFilesPicker
Ctrl+`Mở Terminal (cmd) trong VSCođeterminal.toggleTerminal
Ctrl+Shf+CMở Terminal (cmd) bên ngoài
tại thư mục hiện hành
terminal.openNativeConsole
Ctrl+SpaceNhắc lệnhtriggerSuggest
Ctrl+Shf+PMở bảng commandquickOpenNavigatePreviousInFilePicker
PageUpĐưa con trỏ về đầu filecursorPageUp
PageDownĐưa con trỏ về cuối filecursorPageDown
HomeĐưa con trỏ về đầu dòngcursorHome
EndĐưa con trỏ về cuối dòngcursorEnd
Ctrl+GDi chuyển đến dòng bất kỳgotoLine
Ctrl+Shf+KXoá một dòngdeleteLines
Ctrl+CCopy (Copy dòng) không cần bôi đenclipboardCopyAction
Ctrl+XCắt (Cắt dòng)clipboardCutAction
Ctrl+LBôi đen dòng hiện tạiexpandLineSelection
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ướicopyLines[Navigation]Action
Alt+[⬇ ⬆]Di chuyển 1 dòng lên hoặc xuốngmoveLines[Navigation]Action
Ctrl+K Ctrl+LThu gọn hoặc mở rộng một đoạn codeeditor.toggleFold
Ctrl+DTì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+LChọ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ếnrename
Ctrl+F or F3Tìm kiếm và tìm kết quả kế tiếpnextMatchFindAction
Ctrl+HThay thếstartFindReplaceAction
Ctrl+BĐóng mở Sidebar bên tráitoggleSidebarVisibility
Ctrl+/Tạo hoặc xoá 1 comment hoặc comment dòng hiện tạicommentLine
Shf+TabLùi 1 taboutdent
Ctrl+TabDi chuyển các tab trong VSCodequickOpenPreviousRecentlyUsedEditorInGroup
Ctrl+U Ctrl+SMở hoặc tạo SnippetopenSnippets
Ctrl+,Mở settingsopenSettings
Alt + Shf + OLoại bỏ Import không dùng đếnorganizeImports
Ctrl + Shf + OĐến một symbols nào đógotoSymbol
Bảng Hot key mặc định trong VSCode

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ớ

KeyMô tảCommand
Ctrl+K Ctrl+BackspaceThu gọn tất cả codeeditor.foldAll
Ctrl+K Ctrl+JMở rộng tất cả codeeditor.unFoldAll
Ctrl+WĐóng tab hiện tạicloseActiveEditor
Ctrl+Shf+WĐóng tất cả các tab trừ tab hiện tạicloseOtherEditors
Win+Shf+ZBật tắt Zen ModetoggleZenMode
Ctrl+[⬆ ⬇ ⬅ ➡]Chia màn hình ra nhiều màn hình consplitEditor[Navigation]
Ctrl+Shf+[⬆ ⬇ ⬅ ➡]Di chuyển qua lại các màn hình vừa chianavigate[Navigation]
Alt+NTạo file mới nhanhadvancedNewFile
Alt+F2Đổi tên file hiện tại nhanhfileutils.renameFile
Alt+DeleteXoá file hiện tại nhanhfileutils.removeFile
Bảng một vài hot key khác

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 😘

Give a Comment