Hiện nay có rất nhiều trình biên tập soạn thảo code mà bạn có thể lựa chọn sử dụng. Mỗi loại sẽ có những đặc điểm riêng tùy thuộc vào nhu cầu và sở thích của mỗi người. Trong đó Visual Studio Code được rất nhiều người ưa chuộng, vậy cách sử dụng Visual studio code thế nào thì mời các bạn cùng Box.edu tìm hiểu ở bài viết dưới đây nhé!
Xem thêm: C strings là gì? Cách sử dụng và cập nhật chuỗi strings trong C
Xem thêm: Tổng quan những kiến thức cần biết về hàm Sprintf C
Xem thêm: Tổng quan về cấu trúc trong ngôn ngữ lập trình Struct C
Tổng quan về Visual Studio Code
Tổng quan về Visual Studio Code
VSCode được biết đến là một công cụ lâp trình (Code Editor) do Microsoft phát triển, VSCode được dùng để cài đặt và sử dụng trên cả hệ điều hành: Windows, MacOS và Linux. Đặc biệt là nó hoàn toàn miễn phí.
Ngoài ra VSCode chính là sự kết hợp giữa tính đơn giản của một trình biên tập code (code Editor) và các công cụ hỗ trợ (Extensions) mạnh mẽ dành riêng cho việc lập trình viên như: Debugger, Git, Terminal.
Với Visual Studio Code, việc viết mọi loại code trở nên đơn giản và nhanh chóng hơn rất nhiều. Đặc biệt những bạn đang làm công việc về kiểm thử phần mềm hay quản lý dữ liệu cũng đều có thể sử dụng trình soạn thảo này.
Cách cài đặt Visual Studio Code
Để có thể tải ứng dụng VSCode về máy, bạn tìm đến trang Download và chọn hệ điều hành tương ứng để tải xuống.
Cách cài đặt Visual Studio Code
Cụ thể để có thể tải và biết cách sử dụng Visual Studio Code phiên bản mới nhất, các bạn truy cập vào trang chủ theo link là: code.visualstudio.com. Sau đó lựa chọn phiên bản phù hợp với hệ điều hành đang chạy trên máy tính của bạn và bắt đầu tải về. Tiếp theo bạn chỉ cần thực hiện theo các thao tác là:
- Bước 1: Nhấp đúp chuột vào file cài đặt để bắt đầu thực hiện cài đặt VSC
- Bước 2: Tiếp theo nhấn I Agree để đồng ý với các điều khoản thỏa thuận
- Bước 3: Tiếp túc bấm nút Next ở các bước tiếp theo
- Bước 4: Cuối cùng là tích chọn các tùy chọn:
+ Đầu tiên Add “Open with code” action to Windows Explorer file context menu
+ Add “Open with code” action to Windows Explorer directory context menu
+ Và Register Code as an editor for supported file types
Cài đặt Visual Studio Code
- Bước 5: Kiểm tra lại phần Add to PATH rồi nhấn Install
- Bước 6: Quá trình cài đặt sẽ được diễn ra, sau đó bạn nhấn nút Finish để kết thúc cài đặt
Cách sử dụng Visual Studio Code
Source Control
Visual Studio Code hiện tại mới chỉ hỗ trợ cho một chương trình Source Code đó là GIT. Nếu bạn muốn dùng cả SVN thì phải cài đặt thêm Extensions. Để khởi tạo một kho chứa mã nguồn mới trong Git, đầu tiên bạn nhấp vào biểu tượng GIT trên thanh công cụ của Visual Studio Code.
Tính năng Source Control
Biểu tượng chữ U màu xanh cạnh các tệp cho biết rằng những tệp này đã được cập nhật kể từ lần commit cuối cùng.
Để có thể tạo một commit mới, bạn phải viết commit message vào hộp trên, rồi nhấn tổ hợp phím cmd – enter, hoặc chọn biểu tượng chữ V. Sau đó có thể chọn chế độ Automatic State sau khi đã commit.
Tạo commit mới
Extensions
Ngoài ra để mở rộng các tính năng của VSCode. Cho nhiều loại ngôn ngữ và phù hợp với nhiều dự án khác nhau. Bạn sẽ cần đến Extensions. Tuy nhiên việc chạy các Extensions sẽ có nhiều ảnh hưởng đến hiệu năng của trình soạn thảo này. Do đó bạn chỉ nên cài đặt những Extensions thật sự cần thiết để tránh làm cho tốc độ của phần mềm giảm đi.
Hơn nữa bạn cũng có thể vô hiệu hóa Extensions đã cài đặt và tắt vô hiệu hóa khi muốn dùng lại. Đối với những bạn nào đang thực hiện nhiều dự án cùng một lúc với một loại ngôn ngữ lập trình khác nhau, bạn cũng có khả năng vô hiệu hóa các Extensions cho từng môi trường làm việc (workspace). Để từ đó tìm kiếm những Extensions theo ý muốn của bản thân, sau đó bạn chỉ cần nhập tên vào hộp tìm kiếm là hoàn thành.
Extensions
Với những tính năng vượt trội của mình, Visual Studio Code gần như có thể đáp ứng được hầu hết các nhu cầu cơ bản trong thiết kế ứng dụng cho trang Web và Cloud của các lập trình viên.
Cách sử dụng Visual Studio Code trong html
Thanh sidebar
Ở phía bên trái màn hình, các bạn sẽ thấy 4 biểu tượng nằm dọc ở mép cửa sổ. Dựa vào những biểu tượng này bạn có thể đoán được chức năng của chúng. Cụ thể là:
- Đầu tiên có 2 tờ giấy xếp chồng lên nhau: Đây là mục cửa sổ Explorer dùng để chứa các cây thư mục có trong dự án
- Biểu tượng kính lúp: Đây là một công cụ tìm kiếm. Nếu sử dụng nó, một khung cửa sổ sẽ hiển thị ra để giúp bạn tìm kiếm các đối tượng có trong thư mục dự án
- Một trong những công cụ không thể thiếu trong môi trường lập trình nhóm và GIT đó là cái tên nổi bật. Nếu một dự án bất kỳ chưa được GIT quản lý, VSC sẽ hiển thị những nút này để giúp bạn khởi tạo nó
- Con bọ là chức năng Debugger. Đây là chức năng sẽ cho phép người dùng kiểm tra giá trị của biến, cho chạy từng dòng code để kiểm tra những sự thay đổi khác nhau trong quá trình thực hiện
Thanh trạng thái
Một trong những điểm đáng chú ý trong cách sử dụng Visual Studio Code Html đó là thanh trạng thái. Nhìn xuống phía dưới của góc trái, ta sẽ thấy biểu tượng với các con số phía trước. Đây là mục sẽ cho ta biết số error (lỗi) và warning (cảnh báo) đang có trong code. Nếu thấy 2 con số này đều lớn hơn 0 thì bạn nên tìm cách để sửa chữa nó một cách nhanh chóng.
Còn đối với vị trí ở góc dưới bên phải. Mục đầu tiên sẽ hiển thị số dòng và số cột của con trỏ đang nằm. Mục tiếp theo đó là định dạng encoding, mặc định thường là UTF-8. Nếu bạn muốn thay đổi, thì chỉ cần nhấn vào và lựa chọn một encoding phù hợp.
Cuối cùng là đối với các ký tự kết thúc dòng, trong LINUX sẽ là Line Feed còn với Windows ký tự này bao gồm các loại là: Carriage return và Line Feed (CRLF).
Khung nhập lệnh
Có thể nói Command Palette là tính năng nổi bật nhất của Subline Text. Các trình soạn thảo ra đời sau này đều có sự tích hợp tính năng này. Khi muốn chọn file nằm trong dự án thì bạn chỉ cần nhấn tổ hợp phím CTRL+P , khi đó khung nhập lệnh sẽ hiện ra giữa màn hình, nhấn tên file cần tìm sẽ hiển thị ra các kết quả gần chính xác nhất. Hoặc bạn cũng có thể thực hiện bằng cách sử dụng tổ hợp phím Ctrl + Shift + P sau đó nhấn dòng lệnh mà mình cần vào là đã có thể hoàn thành.
Các Plugin quan trọng để sử dụng Visual Studio code
CSS Peek
CSS Peek là một trong những Plugin sẽ giúp lập trình viên di chuyển nhanh. Đến nơi định nghĩa các class và ID của css. Khi bạn nhấp chuột chọn một selector trong file html nào đó. Peek sẽ di chuyển con trỏ đến đúng file và vị trí mà class và id được định nghĩa.
CSS Peek
Color info
Đây là một Plugin nhỏ, nó sẽ cung cấp các thông tin về màu sắc đã được sử dụng trong css. Khi di chuyển con chuột vào một file css bất kỳ. Các bạn có thể xem màu sắc thực sự của nó và những thông tin mã màu cũng như các định dạng về màu sắc.
Color Info
Open In Browser
Visual Studio code không cung cấp cho người dùng tính năng mở file trực tiếp bằng trình duyệt. Với plugin này sẽ cung cấp cho bạn các tùy chọn mở file qua trình duyệt trong menu. Chỉ cần bạn click chuột phải vào file cần mở.
Open In Browser
Tổng kết
Mong rằng với các cách sử dụng Visual Studio Code được Box.edu trình bày ở trên sẽ giúp cho các bạn có thêm thật nhiều kiến thức quan trọng và cần thiết để sử dụng được Visual studio code chính xác nhất. Ngoài ra, nó còn giúp các bạn tự tin. Và tiếp cận được với các ngôn ngữ lập trình khác nhau. Hoặc trình soạn thảo khác một cách dễ dàng hơn.