Choosing a Text Editor
There are a number of text editors to choose from. For example, Visual Studio Code is one of the most popular text editors used by developers. (That’s Visual Studio Code and not Visual Studio, which is slightly different. We want the former, the one with ‘Code’ in the name.) Other popular text editors you may have heard of are Atom and Sublime Text.
Any of these text editors mentioned are great for development but to make things easier, we suggest you start off with Visual Studio Code. Some of the benefits of this editor are:
When you are further along in your coding career, you can try other code editors to see what features work best with your personal development workflow.
What are ‘text editors’?
Text editors, also called code editors, are applications used by developers to write code. They can highlight and format your code so that it’s easier to read and understand. If you’ve used Codecademy, you’re already familiar with a text editor. It’s the area you write your code in.
Using a text editor is part of creating your “development environment,” the set of tools that you use for working on coding projects. It will allow you to take what you’ve learned on Codecademy and put it into practice as you work on projects on your computer. Not only will this introduce you to tools that are commonly used by professional developers but it also means that you’ve grown as a developer and are ready to start working on your own—great work!
Specific to writing code, text editors provide a number of advantages:
You may also have read or heard about IDEs, or “integrated development editors.” An IDE allows you to not only edit, but also compile, and debug your code through one application or interface. While the text editor we recommend isn’t considered an IDE, it has many IDE-like features that make life as a developer easier without needing a lot of resources that an IDE usually requires. The best of both worlds!
Live Server – Test trang web nhanh-gọn-lẹ
Live Server là một tiện ích giúp biến máy tính của bạn thành một máy chủ web đơn giản. Bạn có thể xem kết quả hoặc test trang web của mình ngay trên trình duyệt hoặc từ một thiết bị khác cùng kết nối chung mạng LAN, ví dụ như smartphone. Điểm đặc biệt của ứng dụng này là trang web trên trình duyệt sẽ tự động tải lại khi bạn lưu file *.html.
Một số điều cần biết khi sử dụng Live Server:
Toàn bộ thông tin và cài đặt Live Server:
Vì thời lượng bài viết có hạn nên Hiếu Đá chỉ giới thiệu sơ qua tiện ích này. Mình sẽ viết riêng một bài đầy đủ hướng dẫn dùng Live Server vào dịp khác.
CSS IntelliSense – Gợi ý code cho CSS
Có thể nói, những tính năng sẵn có của Visual Studio Code đã hỗ trợ gần như tận răng cho anh em lập trình web. Thế nhưng CSS lại không được hỗ trợ tính năng gợi ý code. Do vậy, khi làm việc với CSS thì không được tiện lợi cho lắm. Một file CSS thường có rất nhiều class/id. Chẳng ai có thể nhớ hết tên class/id trong đó được. Nhất là khi ta làm việc với bộ CSS Framework lớn như Bootstrap thì thôi nhé, không có gợi ý code thì ngồi nhớ class đến sang năm luôn đi ạ.
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.
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.
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.
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.
Copy and paste the following boilerplate HTML code:
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.
Optional: Change the color scheme
Although Visual Studio Code comes with default syntax highlighting, you may want to change the colors used. Good color themes will make reading all those lines of code easy on your eyes. (Try out low contrast, dark themes like “Solarized Dark” or “Dracula Dark.”)
To do this, select Color Theme from the Welcome page when you first open Visual Studio Code, or click on Code in the menu bar at the top of your desktop window, then click on Preferences, followed by Color Theme. You can also search for color themes to install using the Extensions menu .
At this point, your file is ready to be viewed in a web browser. The following steps should be taken outside of Visual Studio Code:
Navigate to the index.html file in your Hello World folder through your file manager or terminal.
Double click or open 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.
Hướng dẫn cách sử dụng VSCode
Visual Studio Code (VS Code) menjadi pilihan populer bagi pengembang web karena mudah digunakan dan banyak fitur mendukung. Pada artikel ini, kita akan membahas bagaimana kamu bisa mulai membuat kode HTML di VS Code. Langkah-langkah yang akan dijelaskan pun cukup mudah dipahami, bahkan bagi para pemula.
Các extension khác hỗ trợ lập trình web chuyên nghiệp hơn
Công nghệ lập trình web hiện nay đã phát triển rất nhiều. Do đó, chỉ với HTML, CSS, Javascript là không đủ. Một số công nghệ như ReactJS, AngularJS, Electron, Blazor, v.v… được tạo ra để đẩy nhanh giai đoạn phát triển web hoặc tạo ra các ứng dụng đa nền tảng một cách dễ dàng. Những website/ứng dụng được tạo ra về cơ bản sẽ chạy trên một trình duyệt (Chrome, Firefox hoặc Webview của hệ điều hành). Các bạn có thể tải thêm một số extension tương ứng với công nghệ đang làm việc để VSCode hỗ trợ tốt nhất.
Như vậy là chúng ta đã setup thành công Visual Studio Code để hỗ trợ cho lập trình web. Bạn có thắc mắc hay góp ý gì về bài viết? Hãy bình luận ngay phía bên dưới nhé!
Xem thêm bài viết: Tổng hợp những Plugins không thể thiếu cho VSCode
I had this same problem, but I found a different solution;
In file settings.json I had "python.defaultInterpreterPath": "D:\Program Files\Python310\python.exe", but even this was getting ignored for some reason!
So, I looked at $ENV:path in the PowerShell loaded in Visual Studio Code, and the $ENV:path in the standard command line PowerShell in Windows, and they were different!
It seems that if you have a terminal open in Visual Studio Code, it remembers the $ENV from that terminal, even if you completely restart Visual Studio Code or even if you reboot your computer.
What worked for me (by accident) is, close all terminal windows (and possibly anything else terminal/PowerShell related that's open) and give it another try!
If it still doesn't work, compare the $ENV:Path values again, and see if they're still different!
Langkah 2: Membuat file HTML baru
Setelah Visual Studio Code berhasil diinstall, kamu bisa mulai membuat file HTML. Berikut ini adalah langkah-langkah yang bisa kamu ikuti:
Sekarang kamu sudah punya file HTML, maka bisa mulai untuk menulis kode. Berikut adalah struktur dasar dari HTML:
Untuk memulai, kamu bisa menyalin struktur di atas ke dalam file HTML kamu di Visual Studio Code serta melakukan modifikasi sesuai kebutuhan.
Một số cú pháp Emmet cơ bản
Quy tắc chung khi sử dụng Emmet đó là: bạn chỉ cần gõ một đoạn emmet, sau đó nhấn Tab thì editor sẽ tự động sinh code HTML tương ứng. Bạn cũng đừng lo lắng về việc không nhớ rõ các cách viết tắt. Visual Studio sẽ gợi ý các cú pháp emmet cho bạn. Điều bạn cần chỉ là xài lâu ngày rồi quen tay thôi. Cú pháp chung để sử dụng Emmet: Emmet_Code + Tab
Trên đây là chỉ là một phần rất nhỏ của các củ pháp emmet. Những gì nó làm được còn hay ho hơn nữa. Trong phạm vi bài viết này mình chỉ giới thiệu đến đây. Nếu bạn thấy hứng thú với cú pháp emmet thì hãy nghiên cứu ở trang chủ Emmet hoặc Khóa học Emmet miễn phí trên Udemy
