Người thợ muốn làm tốt công việc của mình thì trước hết phải mài dụng cụ. Để viết mã một cách trang nhã và hiệu quả, bạn phải sử dụng thành thạo công cụ phát triển front-end. Nhưng có vô số công cụ phát triển front-end, chẳng hạn như HBuilder, Sublime Text, WebStorm, Visual Studio Code … vv
Trong số đó, VSCode bị ảnh hưởng duy nhất bởi các kỹ sư front-end với các chức năng chỉnh sửa mã nhẹ và mạnh mẽ và trình cắm phong phú trong hệ sinh thái.
Trước hết bạn cần tải xuống trực tiếp trên trang web chính thức, Visual Studio Code – Code Editing được xác định tại địa chỉ code.visualstudio.com.
Ngôn ngữ mặc định của vscode là tiếng Anh, để chọn ngôn ngữ khác bạn thực hiện như sau: Nhấn phím tắt “Ctrl + Shift + P”. Một hộp tìm kiếm sẽ xuất hiện ở đầu “vscode”. Gõ “cấu hình ngôn ngữ” và nhấn Enter. Tệp cấu hình ngôn ngữ sẽ mở trong “vscode”. Sửa đổi “en-us” thành “ngôn ngữ bạn muốn đổi”. Nhấn “Ctrl + S” để lưu cài đặt. Đóng “vscode” và mở lại để xem giao diện ngôn ngữ của bạn.
Cách cài đặt Vscode:
Vào Tệp -Tùy chọn-Cài đặt, mở cài đặt người dùng. VScode hỗ trợ lựa chọn cấu hình và cũng hỗ trợ chỉnh sửa tệp setting.json để sửa đổi cấu hình mặc định. Dưới đây là một số mục cấu hình phổ biến:
- fontsize được sử dụng để đặt kích thước phông chữ, bạn có thể đặt editor.fontsize: 14.
- Thuộc tính file.autoSave cho biết liệu tệp có được tự động lưu hay không và bạn nên đặt nó thành onFocusChange — tự động lưu khi tiêu điểm tệp thay đổi.
- tabCompletion được sử dụng khi giá trị được đề xuất xuất hiện, nhấn phím Tab để tự động điền vào giá trị được đề xuất tốt nhất, cài đặt được đề xuất đang bật.
- Thuộc tính source.organizeImports trong editor.codeActionsOnSave, thuộc tính này có thể tự động điều chỉnh thứ tự tương đối của các câu lệnh nhập khi lưu, để các câu lệnh nhập của bạn có thể được sắp xếp theo thứ tự bảng chữ cái. Bạn nên đặt nó thành true, nghĩa là , “editor.codeActionsOnSave”: {“source.organizeImports”: true}.
- lineNumbers đặt số dòng mã, nghĩa là editor.lineNumbers: true.
Phiên bản mới của cài đặt vscode mặc định là cài đặt giao diện người dùng thay vì cài đặt json trước đó. Nếu bạn muốn sao chép mã ở trên, bạn thực hiện như sau: Vào Tệp> Tùy chọn> Cài đặt> Tìm kiếm workbench.settings.editor, chọn json để thay đổi thành cài đặt json.
Để tắt cập nhật tự động bạn vào Tệp> Tùy chọn> Cài đặt (macOS: Mã> Tùy chọn> Cài đặt, tìm kiếm chế độ cập nhật và thay đổi cài đặt thành không có.
Để bật cài đặt gợi ý mã, ta làm như sau:
- Bước 1: Nhấp vào biểu tượng cài đặt ở góc dưới bên trái, tìm và nhấp vào “cài đặt”.
- Bước 2: Tìm kiếm “ngăn chặn” trong hộp tìm kiếm —> và bỏ chọn mục này.
Để sử dụng vscode hiệu quả thì không thể thiếu một số tổ hợp phím tắt thường dùng, dưới đây là một số tổ hợp phím tắt thường xuyên sử dụng trong công việc hàng ngày:
- ctrl + enter: xuống 1 dòng
- ctrl + shift + enter: mở lại dòng trước đó và xóa một dòng
- ctrl + x: cắt 1 dòng
- ctrl + shift + k: trực tiếp xóa một dòng và di chuyển một dòng
- alt + ↑: di chuyển lên một dòng
- alt + ↓: Di chuyển xuống một dòng và sao chép một dòng
- shift + alt + ↓: Sao chép xuống một dòng
- shift + alt + ↑: sao chép lại một dòng
- ctrl + z: quay lại
