Xin chào tất cả các bạn, mình là Quân. Sau vài bài về sublime text thì hôm nay mình sẽ viết về một editor mà hiện tại mình đang sử dụng đó là Visual Studio Code. Về đánh giá sơ bộ của mình thì thằng VSCode này khá nhẹ, nhiều tiện ích mà lại không hề nặng nề như các IDE lớn, nói chung là dùng “sướng” 😀
Những nội dung có trong bài này:
- Cài đặt Visual Studio Code [VSCode]
- Cài và sử dụng theme Atom One Dark khá đẹp cho VSCode.
- Cài và sử dụng bộ VSCode icons.
1. Cài đặt Visual Studio Code.
Đầu tiên các bạn vào trang chủ của VS Code: //code.visualstudio.com/ sau đó tải về file có đuôi .deb
Bây giờ mở Terminal đến thư mục mà các bạn vừa tải file ở trên về và chạy lệnh cài đặt, ví dụ mình tải về thư mục /Downloads
cd Downloads
sudo dpkg -i .deb
sudo apt-get install -f
Sau khi chạy xong thì máy bạn đã có VSCode rồi, như thế này:
Ngoài ra nếu bạn muốn gỡ nó đi không dùng nữa thì cũng rất đơn giản, chỉ cần chạy lệnh dưới đây:
sudo apt-get purge code
2. Cài và sử dụng theme Atom One Dark khá đẹp cho VSCode.
Phần này mình sẽ giới thiệu cho các bạn cài giao diện trong Visual Studio Code, cụ thể hơn là cài 1 cái giao diện có tên là Atom One Dark.
Ở thanh menu các bạn chọn View>Extensions hoặc gõ tổ hợp phím Ctrl + Shift + X
Sau đó search với từ khóa là Atom One, sẽ cho ra 2 kết quả là Atom One Dark Theme và Atom One Light Theme, là 2 giao diện sáng và tối, tùy sở thích của mỗi người, với mình thì mình chọn Dark. Sau đó ấn Install:
Chờ nó Install xong thì ấn vào nút Reload vừa xuất hiện ngay sau đó.
Bây giờ để kích hoạt giao diện mới các bạn chọn File>Preferences>Color Theme và chọn Atom One Dark.
Và cảm nhận sự khác biệt trong từng dòng code sau đó nhé :D.
Ngoài ra còn rất nhiều theme nữa bạn nào muốn tìm tiếp thì cứ google search theme visual studio code là thấy ngay, sau đó thì việc cài đặt đơn giản như vừa nãy thôi nha.
3. Cài và sử dụng bộ VSCode icons.
Mặc định VSCode sau khi cài đặt thì có rất ít icon cho các thư mục và các file. Bây giờ chúng ta sẽ cài thêm icon cho thư mục code dễ nhìn và trông chuyên nghiệp hơn nhé.
Tiếp tục mở View>Extensions và search vscode icons, sau đó các bạn ấn Install và Reload lại VSCode.
Bây giờ, để kích hoạt giao diện mới các bạn chọn File>Preferences>File Icon Theme rồi chọn VSCode Icons
Cuối cùng là thành quả :v, mình mở ví dụ 1 project Laravel lên:
Còn rất nhiều tips hay nữa như cài GitLens để làm việc với github, TSLint, ESLint để check convension code Typescript và Javascript… đều ở docs của VSCode, các bạn có thể tự mày mò tham khảo nhé, chúc các bạn học tập tốt.
Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo.
Best Regards – Trung Quân – Green Cat
Tài liệu tham khảo:
//code.visualstudio.com/
//code.visualstudio.com/docs/getstarted/themes
“Thanks for awesome knowledges.”