Thay đổi 7 cài đặt VS Code này để việc lập trình không còn là gánh nặng!

VS Code đã là trình soạn thảo code được ưa thích trong gần một thập kỷ nay. Ngay từ khi cài đặt, trình soạn thảo code này đã đi kèm với một số cài đặt mặc định tốt, nhưng theo thời gian, bạn cần thực hiện một vài điều chỉnh để làm cho nó phù hợp hơn với quy trình làm việc của mình.

Từ việc tắt bản đồ thu nhỏ và bật tự động lưu đến việc di chuyển thanh bên chính sang bên phải, những cài đặt nhỏ này của VS Code đã giúp việc sử dụng công cụ này trở nên dễ dàng hơn rất nhiều.

Hiển thị và làm sạch khoảng trắng

Làm cho các vấn đề định dạng vô hình trở nên không thể bỏ qua

Bất kỳ file nào đã được nhiều người sửa đổi đều trông ổn trên bề mặt ban đầu, nhưng nếu bạn bật hiển thị khoảng trắng, bạn sẽ thấy các tab lẫn với dấu cách, khoảng trắng thừa bám vào cuối dòng và thụt lề dường như không thể thống nhất với chính nó.

Việc thụt lề hỗn hợp không làm hỏng code của bạn, nhưng nó làm rối loạn các bản so sánh và gây khó chịu cho mọi đồng nghiệp khi họ mở file sau bạn. Cách khắc phục là đặt editor.renderWhitespace thành all trong cài đặt, và những ký tự vô hình đó đột nhiên hiện lên dưới dạng các dấu chấm và mũi tên mờ. Ban đầu có vẻ hơi khó chịu, nhưng sau đó các vấn đề định dạng mà bạn đã không nhận ra trong nhiều năm được phát hiện.

Phần thứ hai là bật files.trimTrailingWhitespace. Khi bật tùy chọn này, VS Code sẽ loại bỏ bất kỳ khoảng trắng thừa nào ở cuối dòng mỗi khi bạn lưu.

{
    "editor.renderWhitespace": "all",
    "files.trimTrailingWhitespace": true
}

Tự động lưu để không bị mất code nữa

Hãy để VS Code xử lý việc lưu để bạn có thể tập trung vào việc viết!

Tính năng tự động lưu sẽ cứu nguy cho bạn, dù là khi viết bài hayi làm việc với code. Hãy tưởng tượng bạn dành 20 phút để gỡ lỗi một vấn đề, chỉ để nhận ra rằng file mình đã thay đổi chưa bao giờ được lưu. Mặc dù VS Code hỗ trợ tự động lưu, nhưng tính năng này bị tắt theo mặc định.

Thiết lập bạn cần là files.autoSave, hãy thiết lập nó thành afterDelay với độ trễ một giây. Mỗi khi bạn ngừng gõ trong một giây, file sẽ tự động được lưu. Không còn phải nhớ thao tác Ctrl+S nữa, không còn những bất ngờ về file chưa được lưu khi bạn chuyển nhánh hoặc khởi động lại trình soạn thảo.

Nếu việc lưu liên tục khiến bạn lo lắng, đặc biệt khi làm việc với các công cụ xây dựng theo dõi thay đổi file, bạn có thể đặt nó thành onFocusChange thay vì afterDelay. Bằng cách này, VS Code chỉ lưu khi bạn chuyển sang tab khác hoặc nhấp chuột ra khỏi trình soạn thảo. Đó là một giải pháp trung hòa vẫn giữ an toàn cho công việc của bạn mà không kích hoạt quá trình build lại mỗi khi bạn tạm dừng để suy nghĩ.

{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000 // delay in milliseconds
}

Vô hiệu hóa hoặc thu nhỏ mạnh mẽ minimap

Lấy lại không gian màn hình mà code của bạn xứng đáng có

Minimap là bản xem trước cuộn mỏng ở phía bên phải trình soạn thảo của bạn. Một số người rất thích nó để điều hướng các file lớn. Tuy nhiên, đối với nhiều người, nó là một sự phân tâm trực quan chiếm không gian mà không có nhiều công dụng.

Hãy tắt hoàn toàn minimap bằng cách đặt editor.minimap.enabled thành false. Và bạn có thể làm mọi thứ nó có thể làm bằng Ctrl+G (đi đến dòng) hoặc Ctrl+Shift+O (đi đến ký hiệu). Nếu chưa sẵn sàng xóa hoàn toàn, bạn có thể thu nhỏ nó bằng cách đặt editor.minimap.maxColumn thành một giá trị thấp, chẳng hạn như 50, để nó chiếm ít không gian hơn.

Trong khi bạn đang dọn dẹp, hãy cân nhắc tắt thanh điều hướng (breadcrumbs.enabled: false) và gợi ý nội tuyến (editor.inlayHints.enabled: off). Đây là những tính năng mà VS Code bật mặc định để hỗ trợ, nhưng chúng lại làm cho giao diện vốn đã hiển thị rất nhiều thông tin trở nên rườm rà hơn.

{
    "editor.minimap.enabled": false,
    "breadcrumbs.enabled": false,
    "editor.inlayHints.enabled": "off"
}

Di chuyển thanh bên chính sang bên phải

Ngăn code bị dịch chuyển mỗi khi bạn bật/tắt file explorer

Theo mặc định, VS Code đặt thanh bên, file explorer, bảng điều khiển nguồn và các extension ở bên trái. Vấn đề là mỗi khi bạn mở hoặc đóng nó, code của bạn sẽ dịch chuyển theo chiều ngang. Mắt bạn sẽ bị mất vị trí và bạn phải định hướng lại.

Di chuyển thanh bên sang bên phải, và code của bạn sẽ được ghim vào cạnh trái của màn hình. Mở thanh bên, đóng lại, rồi bật/tắt 10 lần. Code của bạn sẽ không bao giờ di chuyển. Bạn có thể thực hiện điều này từ Command Palette bằng cách tìm kiếm Toggle Primary Side Bar Position hoặc bằng cách nhấp chuột phải vào Activity Bar và chọn Move Primary Side Bar Right.

{
    "workbench.sideBar.location": "right"
}

Tô màu cặp ngoặc và hướng dẫn

Theo dõi code lồng nhau mà không cần đếm ngoặc bằng ngón tay

Nếu bạn đã từng nhìn chằm chằm vào một khối code JavaScript hoặc HTML lồng nhau để tìm ra ngoặc đóng nào khớp với ngoặc mở nào, thì tính năng tô màu cặp ngoặc sẽ giúp bạn. VS Code hiện đã tích hợp sẵn tính năng này. Chỉ cần đảm bảo rằng editor.bracketPairColorization.enabled được đặt thành true trong cài đặt của bạn.

Khi bật tính năng này, mỗi cặp ngoặc khớp nhau sẽ có màu riêng. Cặp ngoài cùng có thể màu vàng, cấp tiếp theo màu xanh lam, tiếp theo màu đỏ tươi, v.v... Kết hợp với editor.guides.bracketPairs được đặt thành active, bạn sẽ có một đường thẳng đứng nối mỗi ngoặc với cặp tương ứng, được highlight khi con trỏ của bạn nằm trong khối đó.

Điều này đặc biệt hữu ích trong các ngôn ngữ như TypeScript, nơi bạn có thể có 3 hoặc 4 cấp độ lồng nhau bên trong một hàm duy nhất. Nhờ màu sắc và hướng dẫn, bạn sẽ ngừng đếm ngoặc và bắt đầu đọc cấu trúc.

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active"
}

Bật ghép ký tự với phông chữ phù hợp

Chuyển các toán tử nhiều ký tự thành những ký hiệu rõ ràng, dễ đọc

Cài đặt này cần một phông chữ hỗ trợ ghép ký tự, chẳng hạn như JetBrains Mono, Cascadia Code hoặc Fira Code. Sau khi cài đặt, hãy đặt nó làm phông chữ trình soạn thảo của bạn và bật editor.fontLigatures trong cài đặt.

Ghép ký tự giúp kết hợp một số chuỗi ký tự nhất định thành các ký tự đơn lẻ, dễ đọc hơn. Toán tử mũi tên => trở thành một mũi tên đúng nghĩa. Toán tử bất đẳng thức !== chuyển thành một ký hiệu đơn lẻ thể hiện rõ "không bằng". Toán tử dấu gạch dọc |> hiển thị dưới dạng một ký tự chỉ hướng rõ ràng.

Có thể bạn sẽ cảm thấy như nó đang che giấu những gì thực sự có trong file của bạn. Nhưng sau một tuần sử dụng JetBrains Mono, các toán tử trước đây mất một phần nhỏ của giây để phân tích giờ đây được ghi nhận ngay lập tức, và nếu bạn dành cả ngày để xem xét code, điều này có thể giúp ích.

{
    "editor.fontFamily": "JetBrains Mono",
    "editor.fontLigatures": true
}

Sử dụng hộp thoại file đơn giản để điều hướng nhanh hơn

Bỏ qua trình chọn file chậm của hệ điều hành và sử dụng bàn phím

Mỗi khi bạn mở một thư mục hoặc lưu một file trong VS Code, theo mặc định nó sẽ khởi chạy hộp thoại file gốc của hệ điều hành. Trên Windows, điều đó có nghĩa là hộp thoại Explorer tiêu chuẩn, nặng về chuột, đôi khi load chậm và làm gián đoạn luồng bàn phím của bạn.

Bật files.simpleDialog.enable, và VS Code sẽ sử dụng trình chọn file tích hợp sẵn của riêng nó. Đó là một hộp thoại lọc nhanh nằm ngay bên trong trình chỉnh sửa, phản hồi đầu vào bàn phím ngay lập tức và không cần load toàn bộ tiện ích hệ điều hành chỉ để cho phép bạn chọn một thư mục. Nếu bạn dành phần lớn thời gian trên bàn phím và thường xuyên sử dụng tổ hợp phím Ctrl+O hoặc Ctrl+K Ctrl+O, cài đặt này sẽ loại bỏ một điểm gây khó chịu nhỏ nhưng lặp đi lặp lại.

Điều này sẽ không ảnh hưởng nhiều nếu bạn chỉ mở một dự án một lần vào buổi sáng và để nó chạy cả ngày. Nhưng nếu bạn chuyển đổi giữa các dự án, mở những file riêng lẻ hoặc sử dụng VS Code làm công cụ viết chính, hộp thoại tích hợp sẽ nhanh hơn đáng kể và giúp bạn duy trì trạng thái làm việc hiệu quả thay vì bị gián đoạn.

{
    "files.simpleDialog.enabled": true
}

Những tinh chỉnh nhỏ để làm cho VS Code bớt khó chịu hơn

Những tinh chỉnh này sẽ giúp bạn cải thiện và làm cho quy trình lập trình của mình dễ chịu hơn. Cho dù đó là bố cục thay đổi liên tục, lỗi định dạng khó nhìn thấy, hay những thao tác nhấn phím thừa mà bạn không cần phải thực hiện. Trình soạn thảo đi kèm với những lựa chọn hợp lý, nhưng hợp lý với tất cả mọi người không đồng nghĩa với việc lý tưởng với bạn. Vì vậy, hãy thực hiện các thay đổi, giữ lại những gì hiệu quả và hoàn tác những gì không hiệu quả.