Hướng dẫn can we write html code in visual studio? - chúng ta có thể viết mã html trong studio trực quan không?

Trong bài viết này, chúng tôi sẽ xem qua các bước cần thiết để tải xuống một trình soạn thảo văn bản phổ biến có tên Visual Studio Code, còn được gọi là mã vs vs. Đến cuối bài viết, bạn sẽ có thể tạo một thư mục trong mã Visual Studio có chứa tài liệu HTML mà bạn có thể mở trong trình duyệt web của mình.

I. Giới thiệu

Biên tập viên văn bản là gì?

Trình chỉnh sửa văn bản, còn được gọi là trình chỉnh sửa mã, là các ứng dụng được sử dụng bởi các nhà phát triển để viết mã. Họ có thể làm nổi bật và định dạng mã của bạn để nó dễ đọc và hiểu hơn. Nếu bạn đã sử dụng Codecademy, bạn đã quen thuộc với một trình soạn thảo văn bản. Nó là khu vực bạn viết mã của bạn vào.

Sử dụng trình soạn thảo văn bản là một phần của việc tạo ra môi trường phát triển của bạn, bộ công cụ bạn sử dụng để làm việc cho các dự án mã hóa. Nó sẽ cho phép bạn lấy những gì bạn đã học được trên Codecademy và đưa nó vào thực tế khi bạn làm việc trên các dự án trên máy tính của mình. Điều này không chỉ giới thiệu cho bạn các công cụ thường được các nhà phát triển chuyên nghiệp sử dụng mà còn có nghĩa là bạn đã phát triển như một nhà phát triển và sẵn sàng bắt đầu làm việc với công việc tuyệt vời của riêng bạn!

Cụ thể để viết mã, biên tập viên văn bản cung cấp một số lợi thế:

• Làm nổi bật cú pháp cụ thể về ngôn ngữ
• Mã số mã tự động
• Phối hợp màu sắc phù hợp với sở thích của bạn và làm cho mã dễ đọc hơn
• Plug-in hoặc các chương trình bổ trợ, để bắt lỗi trong mã
• Chế độ xem cây hoặc biểu diễn trực quan, của các thư mục và tệp dự án, vì vậy bạn có thể thuận tiện điều hướng dự án của mình
• Các phím tắt chính hoặc kết hợp, để phát triển nhanh hơn

Bạn cũng có thể đã đọc hoặc nghe về IDE, hoặc các biên tập viên phát triển tích hợp. IDE cho phép bạn không chỉ chỉnh sửa mà còn biên dịch và gỡ lỗi mã của bạn thông qua một ứng dụng hoặc giao diện. Mặc dù trình soạn thảo văn bản mà chúng tôi đề xuất là không được coi là IDE, nhưng nó có nhiều tính năng giống như IDE giúp cuộc sống như một nhà phát triển dễ dàng hơn mà không cần nhiều tài nguyên mà IDE thường yêu cầu. Tốt nhất của cả hai thế giới!

Chọn một trình soạn thảo văn bản

Có một số biên tập viên văn bản để lựa chọn. Ví dụ, Visual Studio Code là một trong những biên tập viên văn bản phổ biến nhất được sử dụng bởi các nhà phát triển. .

Bất kỳ biên tập viên văn bản nào được đề cập là tuyệt vời để phát triển nhưng để làm cho mọi thứ dễ dàng hơn, chúng tôi khuyên bạn nên bắt đầu với Visual Studio Code. Một số lợi ích của biên tập viên này là:

• Dùng miễn phí
• Nguồn mở, (có nghĩa là mã chương trình có thể được xem, sửa đổi và chia sẻ)
• Các tính năng giống như IDE
• Được hỗ trợ bởi một cộng đồng người dùng và Microsoft lớn

Khi bạn đi xa hơn trong sự nghiệp mã hóa của mình, bạn có thể thử các biên tập viên mã khác để xem những tính năng nào hoạt động tốt nhất với quy trình phát triển cá nhân của bạn.

Ii. Cài đặt mã Visual Studio

Vì vậy, chúng tôi đã chọn trình chỉnh sửa văn bản của chúng tôi, bây giờ chúng tôi chỉ cần cài đặt nó trên máy tính của chúng tôi!

Hướng dẫn video

Đối với những người học trực quan, video này chi tiết cách tải xuống và cài đặt mã Visual Studio. Hướng dẫn bằng văn bản dưới đây.

Các bước cài đặt

Quá trình cài đặt cho các máy tính chạy macOS, Windows và Linux, (cụ thể là Ubuntu và Debian), sẽ rất giống nhau và sử dụng mã Visual Studio trên tất cả chúng sẽ giống nhau.

1. Truy cập trang web Visual Studio Code để tải xuống phiên bản mới nhất của Visual Studio Code.

   

2. Bạn sẽ thấy hệ điều hành máy tính của bạn được hiển thị, nhưng nếu nó không chính xác, hãy nhấp vào mũi tên xuống và tìm tùy chọn phù hợp với hệ điều hành của bạn từ menu thả xuống và nhấp vào biểu tượng mũi tên xuống dưới ổn định.

   Người dùng Windows: Điều này sẽ tải xuống phiên bản mới nhất của Visual Studio Code dưới dạng tệp .exe. This will download the latest version of Visual Studio Code as an .exe file.

   Người dùng Mac: Điều này sẽ tải xuống phiên bản mới nhất của Visual Studio Code cho Mac dưới dạng tệp .zip. This will download the latest version of Visual Studio Code for Mac as a .zip file.

   Người dùng Linux: .deb và .rpm là các loại tệp khác nhau để lưu trữ dữ liệu. Chúng tôi khuyên bạn nên tải xuống tệp .deb để tự động cập nhật hoạt động như tài liệu mã Visual Studio cho thấy. .deb and .rpm are different file types for storing data. We suggest you download the .deb file so auto-updates work as the Visual Studio Code documentation suggests.

3. Khi tệp mã Visual Studio hoàn tất tải xuống, chúng tôi cần cài đặt nó. Tìm tệp mã Visual Studio trong trình quản lý tệp của bạn, chương trình cho phép bạn xem các tệp và thư mục trên máy tính của bạn.

   Người dùng Windows: Mở tệp .exe bằng cách nhấp vào nó và chạy trình cài đặt. Tiếp tục nhấp vào ‘Tiếp theo và cuối cùng‘ Kết thúc. Open the .exe file by clicking on it and on run the installer. Keep clicking ‘Next’ and then finally ‘Finish.’

   Người dùng Mac: Tệp .zip được tải xuống sẽ nằm trong thư mục ‘Tải xuống của bạn. Mở tập tin. Nếu bạn thấy tin nhắn này, hãy chọn mở. The downloaded .zip file should be in your ‘Downloads’ folder. Open the file. If you see this message choose “Open.”

   Người dùng Linux: Tệp được tải xuống sẽ nằm trong thư mục ‘Tải xuống của bạn. The downloaded file should be in your ‘Downloads’ folder.

   Tìm nó trong trình quản lý tệp của bạn, nhấp đúp và chọn ‘Cài đặt trong trung tâm phần mềm GUI hoặc chạy các lệnh sau, từng lần một, trong thiết bị đầu cuối:

   sudo dpkg -i downloaded_filename.deb
   sudo apt-get install -f

4. Make sure you have your Visual Studio Code application saved in a place you know you will easily be able to find it.

   Windows users: It will automatically be placed in your Start menu.

   Mac users: Click and drag the Visual Studio Code icon from the Downloads folder to the Applications folder.

   Linux users: It should appear in your task bar of programs.

That’s it, you’ve successfully installed your text editor and are ready to start coding!

III. Practice: Use Visual Studio Code to start an off platform project

As you move through various lessons and paths here on Codecademy, you may find yourself needing to create a project on your own computer and not on the Codecademy learning environment. This can be tricky, but it’s an exciting step that signals that you are ready to work independently.

To do this, we’ll need to use the text editor we installed above. Let’s take a moment to try out Visual Studio Code.

What are ‘development folders’?

Before using your text editor, it’s important to establish an organized file system. As the number and size of your projects grow, it becomes increasingly important to know where to save new projects and find old projects.

Most developers store their projects in an easy-to-find directory, (what you might be used to calling a ‘folder’). Here at Codecademy, we recommend naming this directory projects. It will store all of your coding projects. Whenever you create a new project, no matter how small, you should always make a new folder inside your projects directory. You will find that single-file projects can quickly turn into large, multi-folder projects.

Practice: Let’s make a project

Below are the steps you need to follow to create a new folder for all of your programming projects. You will also learn how to load a new project folder into Visual Studio Code and make your very first “hello world” HTML project.

We’d recommend that you watch the above video and then follow the written steps below.

1. Make a development folder.

Navigate to a folder using your file manager or the terminal. Make sure it is a folder you visit regularly and will remember. Create a new folder called projects.

Mac users: This may be your User account or “Home” folder.

Windows users: You may want to save this on your C drive.

Linux users: You may want to save this in your User folder inside of the “Home” folder.

Inside the projects folder, create a new folder called HelloWorld. Everything you add to this folder will be part of your HelloWorld project.

2. Open Visual Studio Code

3. Open your development folder

Click on the ‘Explorer’ icon on the left hand menu and click on the button ‘Open Folder’ and choose your development folder. This will launch your file manager.

Navigate to the HelloWorld folder and select Open. The folder will open in Visual Studio Code’s side pane. At this point, there should not be any contents in the folder. We’ll add a file in the next step.

4. Add a file.

Before you learn how to add files to a project folder, it is important to understand the purpose of file extensions. A file extension is the suffix of a filename (the last 3 or 4 characters in a filename, preceded by a period) and describes the type of content the file contains. For example, the HTML file extension is .html, and it tells the browser (and other applications) to interpret the contents of the file as an HTML document. Once Visual Studio Code loads a project folder, you can add files. The steps below describe how to add files. Don’t worry about doing this on your own computer. We’ll get to that next.

In Visual Studio Code’s Explorer pane, click on your development folder’s name. You’ll see four icons appear to the right of the folder name. Click the ’New File’ icon. Type the new file’s name with its appropriate file extension ( for example, .html, .css, .csv). It is critical that you include the correct file extension, so programs like linters know how to interpret its contents. Press Enter when done.

5. Begin coding!

Copy and paste the following boilerplate HTML code:

<html> 
  <head>
    <title>Hello Worldtitle> 
  head>
  <body> 
    <h2>Hello Worldh2> 
  body>



html>
Save your file often with the Auto Save feature and track changes with a version control system if you know how to use one. (To turn Auto Save on, click on
‘File’ then ‘Auto Save’. When it’s on, you’ll see a check mark next to ‘Auto Save’.) This will decrease the chances of losing unsaved work.
File Extensions and Syntax Highlighting
Syntax is the set of rules that tell us how to create correctly written code. Visual Studio Code and other text editors are able to interpret file extensions and provide language-specific syntax highlighting. Syntax highlighting is a tool for making code easier to read. Take a look at your
index.html file. The text and tags are different colors. This is how Visual Studio Code highlights .html syntax. With each new language you learn, Visual Studio Code will highlight text in a way that makes your code easy to read. This may be different than other text editors and also different than the way your code is highlighted on Codecademy.
Tùy chọn: Thay đổi bảng màu
Mặc dù Code Visual Studio đi kèm với việc làm nổi bật cú pháp mặc định, bạn có thể muốn thay đổi màu sắc được sử dụng. Chủ đề màu tốt sẽ giúp việc đọc tất cả các dòng mã đó dễ dàng trên mắt bạn. .
Để thực hiện việc này, chọn chủ đề màu từ trang Chào mừng khi bạn mở mã Visual Studio đầu tiên hoặc nhấp vào mã trong thanh menu ở đầu cửa sổ Desktop của bạn, sau đó nhấp vào Tùy chọn, theo sau là chủ đề màu. Bạn cũng có thể tìm kiếm các chủ đề màu để cài đặt bằng menu mở rộng.
6. Xem tệp HTML của bạn trong trình duyệt
Tại thời điểm này, tệp của bạn đã sẵn sàng để được xem trong trình duyệt web. Các bước sau đây nên được thực hiện bên ngoài mã Visual Studio:
Điều hướng đến tệp index.html trong thư mục Hello World của bạn thông qua trình quản lý hoặc thiết bị đầu cuối tệp của bạn.index.html file in your Hello World folder through your file manager or terminal.
Nhấp đúp hoặc mở Index.html. Trang sẽ mở trong trình duyệt web mặc định của bạn. Đưa thứ hai để ngạc nhiên tại công việc thủ công của bạn, bạn đã thực hiện dự án đầu tiên của bạn với Visual Studio Code.index.html. The page should open in your default web browser. Take second to marvel at your handiwork—you
made your first project with Visual Studio Code. 
Đi xa hơn với các tính năng của Visual Studio Code
Nếu bạn đã cảm thấy thoải mái với các bước trước, hãy khám phá các tính năng sau để tùy chỉnh thêm môi trường phát triển của bạn. Bạn không cần phải sử dụng các đề xuất này để hoàn thành các dự án trên Codecademy nhưng chúng có thể giúp bạn hiệu quả hơn khi viết mã và là những gì làm cho Visual Studio Code trở thành một biên tập viên hữu ích!
Mã gỡ lỗi trong trình soạn thảo: Điều đó đúng, bạn có thể chạy và kiểm tra mã từ trình chỉnh sửa! That’s right, you can run and test code from the editor! 
Kiểm soát phiên bản: Bạn không cần phải chuyển sang thiết bị đầu cuối trên máy tính của mình để theo dõi các thay đổi với Git. You don’t need to switch to the terminal on your computer to track changes with Git. 
Terminal tích hợp: Bạn có thể chạy các lệnh dòng lệnh từ trình chỉnh sửa của mình bằng mã Visual Studio. You can run command line commands from your editor with Visual Studio Code. 
Iv. Gói lên
Xin chúc mừng! Bạn đã thiết lập thành công trình soạn thảo văn bản của mình và sẵn sàng tạo các trang web trên máy tính của riêng bạn.
Mã hóa hạnh phúc!
 

			
Visual Studio có phải là một biên tập viên HTML tốt không?
			
Nếu bạn làm mọi thứ với Microsoft, Visual Studio Code là một trình soạn thảo HTML tuyệt vời cho bạn.Nó không chỉ miễn phí, nguồn mở và được đóng gói với một thư viện khổng lồ của các ứng dụng và tiện ích mở rộng có thể tùy chỉnh, mà còn tích hợp với Microsoft Azure.. Not only is it free, open-source, and packed with an enormous library of customizable apps and extensions, but it also integrates with Microsoft Azure.
		
			
Bạn có thể viết mã một trang web trong Visual Studio không?
			
Tải xuống và cài đặt Visual Studio Code. Tiện ích mở rộng để phát triển web cơ bản. Sử dụng chức năng trình soạn thảo cơ bản của Visual Studio Code.Write và kiểm tra một ứng dụng web đơn giản. Install extensions for basic web development. Use the basic editor functionality of Visual Studio Code. Write and test a simple web app.