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

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.

"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“

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

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ớ

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 😘