Visual Studio Code là một trình soạn thảo mã nguồn miễn phí dành cho Windows, Linux và macOS. Visual Studio Code được phát triển bởi Microsoft. Nó được xem là một sự kết hợp hoàn hảo giữa IDE và Code Editor.
Mặc định sau khi được cài đặt Visual Studio Code đã hỗ trợ sẵn nhiều ngôn ngữ lập trình như C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, … Trong trường hợp bạn muốn sử dụng một ngôn ngữ lập trình khác không nằm trong danh sách trên, bạn có thể tải xuống tiện ích mở rộng. Có rất nhiều các tiện ích mở rộng được viết dành cho Visual Studio Code.
Tóm lại dưới đây là các lý do bạn nên sử dụng Visual Studio Code:
- Hỗ trợ đa nền tảng: Windows, Linux, Mac
- Hỗ trợ đa ngôn ngữ: C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, JSON,..
- Dung lượng nhỏ
- Tính năng mạnh mẽ
- Intellisense chuyên nghiệp
- Giao diện thân thiện
IntelliSense là một từ viết tắt của Intelligent Sense [Tri giác thông minh]. Một chương trình soạn thảo mã nguồn có tính năng IntelliSense nghĩa là nó có khả gợi ý mã cho người dùng, phát hiện các đoạn mã không đầy đủ, thậm chí bổ xung các cú pháp còn thiếu. Về điều này Visual Studio Code thực sự xuất sắc.
Cài đặt Visual Studio Code thực sự rất đơn giản, chỉ cần một vài cú click chuột giống như hình minh hoạ dưới đây:
OK, Visual Studio Code đã được cài đặt thành công, và đây là hình ảnh của nó trong lần chạy đầu tiên:
Visual Studio Code hỗ trợ rất nhiều các ngôn ngữ lập trình khác nhau. Tuy nhiên để có thể sử dụng bạn cần cài đặt thêm một vài Plugin. Dưới đây là một vài đề xuất cho bạn:
Khi các bạn học lập trình, các bạn sẽ phải viết ra các câu lệnh cho máy tính hiểu và thực thi một cách tự động. Để lập trình cho các câu lệnh đó chúng ta phải sử dụng IDE [Integrated Development Environment] - phần mềm hợp nhất các công cụ cơ bản cần thiết để viết và kiểm tra phần mềm. Trong bài viết này chúng mình sẽ hướng dẫn các bạn cài một IDE khá phổ biến là Visual Studio Code.
Cách cài đặt Visual Studio Code
Bước 1: Tải và cài đặt phần mềm Visual Studio Code
Các bạn lên Google và tìm kiếm từ khóa "Visual Studio Code" là sẽ thấy trang code.visualstudio.com của nhà cung ứng. Sau đó các bạn chọn phiên bản phù hợp với hệ điều hành máy tính của mình. Visual Studio Code có thể cài được trên Windows, macOS, Linux x64.
Khi hoàn tất quá trình tải về thì các bạn chỉ cần bấm chuột phải vào tên file của phần mềm => chọn Run as adminitrator => bấm Next ở tất cả các bước cho đến khi xong hết các bước thì bấm Finish.
Sau khi cài đặt Visual Studio Code thì các bạn có thể tìm thấy phần mềm này trong máy tính bằng cách sử dụng thanh tìm kiếm. Dưới đây là hình ảnh chúng mình đang tìm Visual Studio Code trên hệ điều hành Windows.
Sau đó các bạn mở phần mềm lên thì có thể thấy được giao diện làm việc đầu tiên của Visual Studio Code như sau:
Xem thêm: HTML là gì? Làm quen với HTML và các Extension hỗ trợ VSCode
Bước 2: Làm quen với Visual Studio Code
Trong giao diện đầu tiên của Visual Studio Code, những người mới học lập trình chỉ cần chú ý đến 2 công cụ là:
- Công cụ tạo file [biểu tượng hình 2 file chồng lên nhau]: Dùng để tạo các file viết code cho bạn.
- Công cụ tìm kiếm [biểu tượng hình kính lúp]: Dùng để tìm kiếm những từ khóa trong văn bản mà bạn đã viết ở Visual Studio Code
Trước khi tạo file mới trong Visual Studio Code thì bạn phải có thư mục làm việc để lưu file đó. Các bạn có thể tạo thư mục mới hoặc sử dụng thư mục có sẵn. Có 3 cách để mở một thư mục mới trong phần mềm này là:
- Cách 1: Bấm vào công cụ tạo file => chọn nút Open folder => tìm đến thư mục => nhấp chuột trái để chọn thư mục rồi bấm Select Folder
- Cách 2: Vào thẻ File => chọn Open folder => tìm đến thư mục => nhấp chuột trái để chọn thư mục rồi bấm Select Folder
- Cách 3: Kéo thả thư mục làm việc của bạn vào Visual Studio Code.
Sau khi mở thư mục làm việc lên rồi thì các bạn nhấp chuột phải vào vùng trống => chọn New File để tạo một file làm việc trong Visual Studio Code.
Các bạn đang sử dụng Visual Studio Code để viết loại ngôn ngữ lập trình nào thì phải đặt tên tương ứng với nó. Ở đây chúng mình chuẩn bị sử dụng ngôn ngữ lập trình Javascript nên sẽ đặt tên file là .js nhé.
Xem thêm: Hướng dẫn cách dùng thẻ div và cách tạo danh sách trong HTML
Cài đặt phần mềm bổ trợ cho Visual Studio Code
Chúng mình sẽ dùng Visual Studio Code để lập trình Javascript nên sẽ phải cài thêm một phần mềm bổ trợ là Nodejs. Để cài đặt phần mềm này, các bạn lên Google tìm kiếm từ khóa "nodejs" là sẽ thấy ngay nhé. Sau đó các bạn chọn phiên bản phù hợp để tải về.
Trong hình ảnh trên bạn có thể thấy 2 bản là LTS và Current. Bản Current là bản mới nhất, nhiều chức năng nhất; còn bản LTS là bản ổn định nhất. Tùy vào nhu cầu sử dụng mà bạn chọn bản phù hợp để tải về nhé. Ở đây chúng mình sẽ chọn bản LTS vì tính ổn định của nó và phần lớn các lập trình viên cũng đang sử dụng phiên bản này.
Phần mềm này cũng có cách cài đặt tương tự như Visual Studio Code và mọi phần mềm khác của máy tính. Các bạn cài như bình thường là được nhé.
Sau đó, các bạn có thể kiểm tra xem đã cài đặt thành công hay chưa bằng cách: Bấm tổ hợp phím tắt Window + R => nhập từ "cmd" vào cửa sổ Run => bấm Enter.
Tiếp theo các bạn gõ lệnh "node - v" rồi bấm Enter, Nếu trên cửa sổ hiện lên tên phiên bản thì tức là đã cài đặt thành công:
Sau đó các bạn tắt Visual Studio Code rồi bật lại để Nodejs có thể hiệu ứng được trên phần mềm này. Chúng ta cần làm thêm một bước nữa để tải môi trường Nodejs vào Visual Studio Code như sau:
Vào thẻ Terminal trong Visual Studio Code => chọn New Terminal => nhập lệnh "node - v" => bấm Enter.
Khi đã tích hợp Nodejs vào Visual Studio Code thì bạn sẽ không cần chuyển ra chuyển vào giữa 2 phần mềm này nữa rất tiện dụng.
Xem thêm: Hướng dẫn cách dùng thẻ IMG hiển thị hình ảnh trong HTML
Cách cài tiện ích phím tắt cho Visual Studio Code
Cũng như mọi phần mềm khác, khi sử dụng Visual Studio Code các bạn cũng nên dùng phím tắt để làm việc nhanh và hiệu quả hơn. Trước hết các bạn cần cài đặt phím tắt bằng cách nhấp vào công cụ Extension [biểu tượng hình ô vuông] ở góc trái giao diện làm việc. Sau đó các bạn gõ từ khóa "Javascript Snippets" vào thanh tìm kiếm => tìm đúng tiện ích mở rộng có tên như vậy => bấm Install để cài đặt.
Sau khi cài đặt xong, việc soạn thảo các dòng code của bạn sẽ trở nên nhanh gọn hơn nhiều. Ví dụ: Thông thường bạn sẽ phải gõ ra cả cụm "console.log" nhưng khi đã cài tiện ích này thì các bạn chỉ cần gõ "cl" rồi bấm phím Tab là được.
Xem thêm: Hướng dẫn cách chuyển file Word sang HTML đơn giản nhất
Kết luận
Như vậy chúng mình đã hướng dẫn xong cho các bạn về cách cài đặt và sử dụng cơ bản của Visual Studio Code. Phần mềm này có rất nhiều ứng dụng khác nhau trong đó có việc sử dụng để lập trình Javascript.
Nếu các bạn muốn được học lập trình Javascript từ cơ bản đến nâng cao thì hãy đăng ký ngay khóa học dưới đây:
Lập trình Javascript căn bản từ A-Z thực chiến cho người mới
Khóa học cung cấp cho các bạn những bài giảng lý thuyết chi tiết, bài tập thực hành thực tế có hướng dẫn thực hiện và nhiều tài liệu học tập thú vị. Trong quá trình học, giảng viên sẽ hỗ trợ tận tình cho các bạn bằng cách giải đáp mọi thắc mắc trong vòng 24h. Các bạn có thể học mọi lúc, mọi nơi trên cả máy tính và ứng dụng di động của Gitiho. Khóa học có giá trị sử dụng trọn đời, không giới hạn số lượt học các bạn nhé. Chúc các bạn thành công!
Cùng tham gia cộng đồng hỏi đáp về chủ đề Lập trình