Visual Studio Code là gì?
Visual Studio Code ( gọi tắt là VS Code) là một IDE (Intergrated Development Environment) miễn phí chạy trên nhiều hệ điều hành khác nhau. Cung nhiều tiện ích khá toàn diện cho Coder để dễ quản lí, viết code nhanh và tìm bug dễ dàng hơn.
Tại sao nên dùng Visual Studio Code?
- VS Code giúp Coder viết code dễ dàng và nhanh chóng nhờ có rất nhiều chức năng mở rộng (Extension).
- Nhưng quan trọng là nhẹ và miễn phí.
- Cài đặt dễ dàng.
- không cần cấu hình máy mạnh vẫn code rất mượt.
- Tự động update, không phải cài lại bản mới nhiều lần.
Cài đặt ở đâu?
Bạn có thể vào website: https://code.visualstudio.com để download và cài đặt Visual Studio Code (VS Code).
Do cài VS Code khá dễ nên myboxst sẽ không hướng dẫn . Các bạn tự cài nhé.
Bây giờ chúng ta sẽ đi thẳng vào phần cài đặt VSCode để code nhanh và dễ nhìn
Cài Theme VSCode
Bạn vào Extension (phần 1 như hình trên) sau đó gõ vào ô tìm kiếm: Theme để tìm và chọn Theme.
khi đó khung bên phải sẽ hiển thị mô tả về Theme như: màu chữ code, màu thẻ (Tag), …..
Bạn nên chọn themes hợp nhãn với mình nhất. để code nhanh, dễ tìm bug và ít đau mắt nhé!
Để cài Extension các bạn click vào nút Install như phần 2 hoặc 3 trong hình trên.
Cài Icon
Extension: Vscode-icons giúp bạn dễ quản lí folder và file.
Những Extension hỗ trợ khác để hỗ trợ code nhanh
1. Bracket pair colorizer
Extension này giúp tô màu những dấu ngoặc: ( ) , [ ], { }, ….. giúp các bạn khi code tránh những lỗi thừa hoặc thiếu dấu ngoặc.
2. Code Spell Checker
Code Spell Checker giúp chúng ta kiếm tra và sửa lỗi chính tả.
Đặc biệt là những ai dốt tiếng anh như mình ^^.
Như hình trên thì biến FirstVallue viết thiếu chữ “l”. khi Enter thì Extension sẽ Fix lại và tự thêm chữ “l” vào đoạn code để đúng chính tả.
3. Auto Rename Tag
Auto Rename Tag giúp chúng ta sửa tên thẻ nhanh chóng.
chỉ cần sửa tên trong thẻ <> thì tên trong thẻ </> sẽ tự fix theo.
4. Extension hỗ trợ code nhanh Front-ent
A. Live Server
Live Server là một Extension xịn dành cho Coder Front-End.
Giúp tạo server local Reload và hiển thị ngay kết quả sau khi code.
B. CSS Peek
CSS Peek cho phép chúng ta xem ngay phần CSS trong Class/ID của file html.
Ngoài ra Extension này còn giúp chúng ta nhảy tới phần khai báo trong file CSS/SCSS/LESS ngay lập tức.
Dùng “Hotkey” trong VS Code để code nhanh hơn
Ngoài những Extension hỗ trợ code thì còn một cách giúp bạn code nhanh hơn, đó là dùng “Hotkey“.
Đây là link hotkey của VScode trên 3 hệ điều hành:
Các bạn có thể tải file PDF về và in ra giấy dán lên tường để tập làm quen những hotkey này.
Một số Hotkey thường dùng cho việc code nhanh
| Ctrl + P | Dùng để mở File nhanh |
| Ctrl + Shift + O | Xem biến trong file |
| Ctrl + tab | Di chuyển qua lại giữa các tab |
| Ctrl + W | Đóng tab đang mở |
| Ctrl + home | Di chuyển đến vị trí đầu của file |
| Ctrl + end | Di chuyển đến vị trí cuối của file |
| Ctrl + T | Tìm hàm,biến trong toàn bộ code |
| F12 | Xem nội dung hàm ( bấm: Alt + ← để quay lại vị trí cũ) |
| Shift + F12 | Xem hàm dùng chỗ nào. |
| Ctrl + G : gõ N | đi chuyển đến dòng số N vừa gõ |
| F8 | Di chuyển tới dòng báo lỗi (F8 tiếp để tới dòng bị lỗi kế tiếp) |
| Shift + F8 | Quay lại dòng báo lỗi trước khi F8 |
| Ctrl + shift + K | Xóa dòng code đang trỏ |
| Ctrl + C hoặc Ctrl+X | Copy hoặc cắt dòng code đang trỏ (không cần bôi đen) |
| Ctrl + V | dùng để dán dòng code đang trỏ sau khi copy hoặc cắt |
| Alt + ↑ / ↓ | Dùng để di chuyển dòng code đang trỏ lên / xuống |
| Alt + Shift + ↑ / ↓ | Dùng để copy dòng code đang trỏ ở dòng dưới hoặc trên |
| Shift + Alt + click vị trí | gõ code 1 lần hiện nhiều chỗ click ( tránh gõ lặp lại nhiều lần) |
| Bôi đen và bấm: Ctrl + / | Định dạng “Comment” những đoạn code đã bôi đen |
| F5 hoặc Ctrl + ` | Để chạy code / di chuyển đến terminal |
| Gõ html:5 | để khởi tạo 1 file HTML5 rỗng với các đủ thẻ cơ bản html,head,body |
| Div.'tên class' | tạo 1 thẻ div có class = “tên class” |
| Div#'tên ID' | Tạo một thẻ div có ID = “tên ID” |
| ul>li*3 | tạo 3 thẻ <li> nằm trong thẻ <ul> |
| Ctrl+Shift+H | Tìm và thay thế …. => Ctrl+Shift+Enter để lưu kết quả! |
Lời kết
Trong bài viết là những Extension mà myboxst cảm thấy nên install sau khi Set up Visual Studio Code.
Ngoài những Extension trên còn rất nhiều Extension khác các bạn có thể tìm và search trên google như:
- GitLens: giúp bạn biết code do ai viết, viết lúc nào,… nó thay đổi những gì so với quá khứ.
- Bookmark: cho phép bạn lưu lại những dòng code hay dùng và tái sử dụng.
- Setting Sync: Giúp bạn đồng bộ nhiều máy với nhau. Khi cài Extension này bạn chỉ cần setup VS Code 1 lần. Những lần sau, khi đổi máy, mình chỉ mở và chạy là toàn bộ cài đặt cũ sẽ được đồng bộ qua máy mới!
- Prettier (code formatter) : Giúp bạn code chuẩn hơn, tìm ra những lỗi hoặc viết code sai để bạn chỉnh lại.
Nếu bài viết có ích hãy like và share.
Nếu có thắc mắc các bạn hãy để lại comment bên dưới. myboxst sẽ trả lời sớm nhất có thể.
hẹn gặp bạn trong những bài viết tiếp theo.
Không có nhận xét nào:
Đăng nhận xét