Visual studio code (VSC) đang là một trong những text editor được ưa chuộng nhất bởi nó kế thừa được các điểm mạnh của các editors khác như Sublime Text, Vim,... và có những tính năng rất tuyệt vời của riêng mình. Tuy vẫn còn một số điểm yếu về tốc độ (khi so với Sublime Text hoặc Vim), nhưng những tiện ích mà VScode mang lại vẫn khiến nó là lựa chọn gần như tốt nhất cho các lập trình viên hiện nay. Mình đã từng sử dụng qua khá nhiều những text editors và ide như Sublime, Vim, Atom hay Webstorm, chúng đều là những công cụ rất mạnh mẽ, nhưng lại tồn tại những khuyết điểm mà mình khá khó chấp nhận: Sublime nhanh nhưng khả năng hỗ trợ các ngôn ngữ hiện đại chưa tốt và có vẻ ít phát triển thêm, Vim thì hơi khó dùng, Atom thì mình cảm giác hơi chậm, Webstorm khiến mình hài lòng nhất nhưng lại phải crack :v. Vscode chính là text editors có thể khác phục những điều đó và ngày hôm nay, mình sẽ cùng với các bạn cài đặt và cấu hình vscode để có thể làm việc với nó một cách thoải mái nhất. Let's start!

Cài đặt

Theo mình biết thì hiện tại, VSC đã hỗ trợ đầy đủ các hệ điều hành phổ biến như Linux, Windows, Mac, ở đây, mình đang dùng hệ điều hành Linux nên sẽ minh họa quá trình cài đặt trên hệ điều hành này, quá trình cài đặt trên hệ điều hành khác cũng tuơng tự

1. Đầu tiên các bạn vào trang chủ của vscode: https://code.visualstudio.com/
2. Click vào nút download bản .deb (đối với các hệ điều hành như Fedora, các bạn download .rpm)
3. Download xong, các bạn cd vào thư mục chứa file .deb vừa tải và chạy lệnh sudo dpkg -i <tên_file_deb>.deb
4. Đợi quá trình cài đặt hoàn tất Vậy là xong! Chúng ta có thể sử dụng vscode được rồi

Các cấu hình cơ bản

Mặc định, khi cài xong, vscode đã rất đầy đủ chức năng rồi và bạn có thể code luôn. Tuy nhiên, đối với một đứa (khá) lười và thích ide đẹp như mình (và hi vọng các bạn cũng thế) thì có khá nhiều việc phải làm. Mình sẽ list ra các đầu việc sau đây để chúng ta có thể hình dung được những bước cần làm:

• Thiết lập font
• Thiết lập về caret (là con trỏ lúc gõ văn bản)
• Các thiết lập chung khác

Thiết lập font

Mặc định thì font của vscode theo mình khá xấu (hoặc do mình dùng quen font khác rồi). 2 fonts mình thấy đẹp và dùng ổn nhất là Source Code Pro và Pragmata Pro (mình thích Source Code Pro hơn một chút vì đồng bộ luôn với Terminal của mình và do nó được support bởi Adobe nên dùng rất chuẩn và ít bị lỗi) Để thiết lập fonts, các bạn làm như sau:

• Download fonts bạn ưa thích về (nếu bạn cũng thích dùng Source Code Pro như mình thì có thể vào https://www.fontsquirrel.com/fonts/source-code-pro để download bộ fonts này về)
• Sau khi download, các bạn giải nén các file fonts vào trong thư mục ~/.fonts (nếu chưa có thư mục này thì tạo)
• Mở VScode và bấm tổ hợp Ctrl+Shift+P, gõ setting và tìm đến phần Open User Settings (từ giờ mình sẽ gọi tắt bước này là vào Setting nhé)
• trong cặp dấu {}, chúng ta viết: "editor.fontFamily": "'Source Code Pro Semibold'" để set kiểu font Source Code Pro Semibold cho ediors
• Save lại và vscode sẽ tự reload cấu hình mới Các thiết lập khác với fonts
• Thiết lập cỡ chữ: "editor.fontSize": 16
• Thiết lập độ đậm: "editor.fontWeight": "bold"

Ok, fonts như vậy với mình là ổn, các bạn kỹ tính hơn có thể đọc ở Default Settings của VScode để có thể tìm được những cài đặt nâng cao hơn

Thiết lập dòng

Mặc định thì vscode highlight dòng khá xấu và nhìn k rõ lắm, trông đại loại như này: không ổn lắm, mình muốn phần highlight phải trùm ra số dòng luôn và số dòng phải là kiểu relative giống trong vim (để số dòng relative rất tiện ), đồng thời khoảng cách giữa các dòng cũng cần thưa hơn cho dễ nhìn vậy mình sẽ làm như sau:

• "editor.lineNumbers": "relative"
• "editor.renderLineHighlight": "all"
• "editor.lineHeight": 28 Kết quả như sau, tốt hơn khá nhiều

Thiết lập khác

• Caret: con trỏ văn bản nhấp nháy trông khá buồn, có thể cho nó nháy đẹp hơn chút:
  • "editor.cursorBlinking": "phase"
• Wrap text để đọc văn bản dài dễ hơn, khá quan trọng:
  • "editor.wordWrap": "on"
• Set lại tab size cho mấy bạn ruby hay python:
  • "editor.tabSize": 2
• Đặt ruler để kiểm soát dòng code không quá dài:
  • "editor.rulers": [80]
• Tự động format code khi code và paste:
  • "editor.formatOnType": true
  • "editor.formatOnPaste": true
• Zoom khi dùng chuột:
  • "editor.mouseWheelZoom": true
• Tắt thanh activity bar (do màn hình mình khá bé nên tắt thanh này tiết kiệm diện tích code :v, các bạn mới dùng k nên dùng cái này, khi nào các bạn nhớ phím tắt đến các chức năng trên activity bar hãy nên bật tính năng này lên nhé)
  • "workbench.activityBar.visible": false
• Tắt thanh menu bar (vẫn có thể mở thanh này bằng cách bấm phím alt):
  • "window.menuBarVisibility": "toggle"
• Tự động mở 1 file mới khi mở vscode (tính năng này tuơng tự Sublime và khá hữu ích khi bạn muốn tạo nhanh một cái gì đó)
  • "workbench.startupEditor": "newUntitledFile"
• Tự động trim các whitespace khi lưu:
  • "files.trimTrailingWhitespace": true
• Thêm 1 dòng trống vào cuối file khi save:
  • "files.insertFinalNewline": true
• Cắt bỏ các dòng trống ở cuối file (trừ 1 dòng trống, cài đặt trên và cài đặt này sẽ đảm bảo cho bạn CHỈ có 1 dòng trống ở cuối file)
  • "files.trimFinalNewlines": true
• Bật tính năng complete với tab khi bạn gõ những từ đầu tiên của code (vd khi bạn gõ "co" trong js thì nó sẽ ra "console")
  • "editor.tabCompletion": true

Okie, tạm thời các thiết lập cơ bản đến đây mình cũng tạm hài lòng rồi, tất nhiên còn rất nhiều những cài đặt khác, tuy nhiên nó liên quan đến các extensions sẽ cài sau. Mình thì nghĩ các bạn nên dùng không có extensions trước, tận dụng tối đa những gì mà vscode có rồi hãy cài extensions, vì cài càng nhiều extensions thì càng nặng và vscode càng chậm. Bài sau, mình sẽ nói về các extensions mình đang sử dụng và các cài đặt cho chúng , hẹn gặp lại các bạn. Happy coding!