Nhiều bạn hay hỏi mình code bằng tool gì, cài đặt ra sao. Do vậy, hôm nay mình hướng dẫn các bạn cách setup Visual Studio Code, cài mấy cái extension xoạc nhen
Visual Studio Code là cái gì cơ?
Nếu từng code C#, chắc hẳn bạn cũng biết Microsoft có 1 cái IDE khá là nặng và mang tên Visual Studio. IDE này ngon lành, đủ chức năng, mỗi tội rất nặng, cài hơi lâu, mỗi lần bật là con lòng già nhà mình lại rên rỉ
Khác với Visual Studio, Visual Studio Code là 1 trình soạn thảo văn bản khá mới nhưng miễn phí, chạy được trên nhiều hệ điều hành. Tuy chỉ là text editor nhưng ta vẫn có thể compile, run, debug code trên VS Code, không thua kém gì cái IDE xéo
Vừa nhẹ, vừa miễn phí, lại mạnh mẽ, nên dân web developer như mình rất sảng khoái khi sử dụng VS Code. Để bắt đầu, các bạn có thể vào đây để tải nha. mã số. Visual Studio. com
Cài đặt chủ đề, phông chữ và biểu tượng cho màn hình
Sau khi đã cài đặt xong VS Code, bạn bấm vào mục Tiện ích mở rộng bên góc trái, bắt đầu nhập và tìm tiện ích mở rộng rồi cài đặt thôi ha
Đầu tiên, các bạn mình sẽ cài đặt theme, font chữ, icon linh tinh trước
Bạn nên cài thêm 1 số theme để nhìn cho dịu mắt. Cá nhân mình thì thích dùng theme Dracula, màu xanh xanh hường hường tím tím, nhìn lâu hay buổi code cũng tối không sáng mắt
Bên cạnh đó, bạn cũng nên tải thêm 1 số set-icon như vscode-icons, các icon này sẽ giúp bạn nhìn vào danh sách thư mục và dễ dàng nhận biết đâu là folder, file nào là file gì v…v
Tiếp theo, bạn nên cài đặt font chữ thuận tiện cho việc viết code. Cá nhân mình sử dụng Fira Code [github. com/tonsky/FiraCode]
Cài xong các bạn vào setting change font to FiraCode sau đó bật fontLigature lên luôn nha. Bật cái này lên sẽ giúp gom nhóm mấy cái như ==,. = to 1 ký tự, giúp bộ não xử lý nhanh hơn, đọc mã cũng nhanh hơn luôn
Some extension should used for all dev
Sau khi cài đủ thứ thì VSCode nhìn cũng khá đẹp rồi, giờ ta cài thêm 1 số Plugin cho việc Code nào
- GitLens. VSCode has support pull/push from Git, but GitLens bá đạo hơn nhiều. Nó giúp bạn biết từng dòng code do ai viết, viết vào lúc nào, nằm trong commit nào. You can also …. Reverse back too past to see the file has been change like any, very tiện lợi
- Bộ tô màu cặp giá đỡ. Tô màu các dấu [][]{}, nhìn 1 phát là biết cái nào đi cặp với cái nào, không còn lộn, thừa thiếu dấu nữa
- Đánh dấu trang. Giúp bạn “đánh dấu” lại những dòng code hay đụng tới, cần đọc nhiều, sửa nhiều. Không còn phải tìm kiếm mã mỗi lần cần tìm nữa
- Trình kiểm tra chính tả mã. Rất nên cài đặt. Trước kia, lâu lâu mình hay viết comment sai chính tả, đặt tên hàm, tên biến cũng sai chính tả luôn. Tiện ích mở rộng này sẽ làm nổi bật những đoạn sai chính tả để mình sửa nha. Anh nhớ cài kẻo viết code sai chính tả bọn nó cười đó
- Cài đặt đồng bộ hóa. Giúp bạn đồng bộ cài đặt [cài đặt, tiện ích mở rộng] giữa nhiều máy với nhau. Nhờ cài cái này, mình chỉ cần setup VS Code 1 lần. Những lần sau, khi đổi máy, mình chỉ cần chạy 1 phát là toàn bộ cài đặt cũ đã được đồng bộ qua máy mới rồi
Những extension hay ho cho dân làm web
Tiếp theo, đây là những extension mà dân làm web quần mình hay dùng. Đa phần những tiện ích mở rộng này giúp tiết kiệm thời gian tiết kiệm, để mình viết mã nhanh hơn, mượt mà hơn
- Máy chủ trực tiếp. Xây dựng 1 máy chủ chạy HTML/CSS/JS, tự động làm mới mỗi trình duyệt khi bạn sửa mã. Bạn nào mới học front-end thì nên cài cái này, F5 tiết kiệm thời gian lắm luôn
- Tự động nhập. Hỗ trợ mình Nhập thư viện JavaScript, thành phần từ các tệp khác
- chi phí nhập khẩu. Tất nhiên, nhập nhiều thư viện thì sẽ đỡ tốn tiền công viết mã hơn, nhưng cũng làm cho ứng dụng nặng hơn, tải lâu hơn. Cài đặt chi phí nhập khẩu, bạn sẽ biết những thư viện nào quá nặng, nên thay thế hoặc loại bỏ, hoặc nhập 1 phần nhỏ thôi
- Tự động đổi tên thẻ + Tự động đóng thẻ. Khi code HTML/JSX, mỗi khi tạo thêm tag mới, extension sẽ đóng tag để khỏi quên. Khi đổi tên thẻ, phần mở rộng này sẽ đổi tên thẻ đóng cho phù hợp luôn
- npm Intellisense + Đường dẫn Intellisense. Gợi ý tên gói npm, tên tệp trong thư mục khi mình cần nhập, giúp giảm lỗi khi nhập
- Bộ đôi ESLint + Prettier. Như mình đã giới thiệu về Linter, ESLint sẽ giúp bạn code đúng chuẩn, đúng định dạng, tìm những lỗi linh tinh khi code. Prettier sẽ hỗ trợ bạn định dạng mã, chỉnh sửa theo đúng chuẩn từ ESLint
- Cài 2 cái này xong, chỉ cần code đại rồi Ctrl S để lưu 1 phát là code vừa đẹp vừa chuẩn ngay
Ngoài ra, tùy vào ngôn ngữ/framework đang sử dụng mà các bạn có thể cài đặt thêm Đoạn mã hoặc Tiện ích mở rộng VSCode cho ngôn ngữ đó. Bản thân mình code từ React sang Angular, từ Golang sang Elixir nên cài đủ thứ luôn
Ngoài ra, còn 2 tiện ích mở rộng hay ho viết bằng AI, giúp bạn viết mã nhanh hơn nữa [gần như viết mã phụ bạn luôn]. Mình giới thiệu trong vlog Youtube bên dưới nha. Phải xem clip demo mới thấy được sự bá đạo của bọn nó hihi
pause
Trong bài viết này, mình đã hướng dẫn các bạn cách cài đặt VSCode, cũng như các tiện ích mở rộng bá đạo mà các bạn nên sử dụng rồi. Làm theo hướng dẫn, các bạn sẽ có 1 bản VS Code khá mạnh, đủ dùng để code web nhé
Nếu các bạn có kinh nghiệm sử dụng, có extension nào hay muốn chia sẻ cho anh em thì cứ comment bên dưới nhen