Cách tạo tệp CSS trong Visual Studio Code

Trong bài viết này, chúng ta sẽ thực hiện các bước cần thiết để tải xuống trình soạn thảo văn bản phổ biến có tên là Visual Studio Code, còn được gọi là “VS Code”. ” Đến cuối bài viết, bạn sẽ có thể tạo một thư mục trong Visual Studio Code 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

'trình soạn thảo văn bản' là gì?

Trình soạn thảo văn bản, còn được gọi là trình soạn thảo mã, là ứng dụng được các nhà phát triển sử dụng để viết mã. Họ có thể đánh dấu và định dạng mã của bạn để dễ đọc và dễ hiểu hơn. Nếu bạn đã sử dụng Codecademy, bạn đã quen thuộc với trình soạn thảo văn bản. Đó là khu vực bạn viết mã của mình 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 “môi trường phát triển” của bạn, bộ công cụ mà bạn sử dụng để làm việc trên các dự án mã hóa. Nó sẽ cho phép bạn áp dụng những gì bạn đã học được trên Codecademy vào thực tế khi bạn làm việc với 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 sử dụng bởi các nhà phát triển chuyên nghiệp mà còn có nghĩa là bạn đã trưởng thành với tư cách là một nhà phát triển và sẵn sàng bắt đầu làm việc của riêng mình—bạn làm rất tốt

Cụ thể để viết mã, trình soạn thảo văn bản cung cấp một số lợi thế

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

Bạn cũng có thể đã đọc hoặc nghe nói về IDE, hoặc “trình soạn thảo phát triển tích hợp. ” Một 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 khuyên dùng không được coi là IDE, nhưng nó có nhiều tính năng giống IDE giúp cuộc sống của nhà phát triển trở nê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ố trình soạn thảo văn bản để lựa chọn. Ví dụ: Visual Studio Code là một trong những trình soạn thảo văn bản phổ biến nhất được các nhà phát triển sử dụng. (Đó là Visual Studio Code chứ không phải Visual Studio, hơi khác một chút. Chúng tôi muốn cái trước, cái có 'Mã' trong tên. ) Các trình soạn thảo văn bản phổ biến khác mà bạn có thể đã nghe nói đến là Atom và Sublime Text

Bất kỳ trình soạn thảo văn bản nào được đề cập đều tuyệt vời để phát triển nhưng để làm 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 trình soạn thảo này là

• Sử dụng miễn phí
• Nguồn mở, (có nghĩa là mã của 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 cộng đồng người dùng đông đảo và Microsoft

Khi bạn tiến xa hơn trong sự nghiệp viết mã của mình, bạn có thể thử các trình chỉnh sửa mã khác để xem 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

Như vậy là chúng ta đã chọn xong trình soạn thảo văn bản, bây giờ chúng ta chỉ cần cài đặt nó vào máy tính của mình

Video hướng dẫn

Đối với những người học trực quan, video này hướng dẫn chi tiết cách tải xuống và cài đặt Visual Studio Code. 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à việc sử dụng Visual Studio Code 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 Visual Studio Code mới nhất

   

2. Bạn sẽ thấy hệ điều hành máy tính của mình được hiển thị, nhưng nếu nó không đúng, 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ừ trình đơn thả xuống và nhấp vào biểu tượng mũi tên xuống bên dưới “Ổn định. ”

   người dùng Windows. Thao tác 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 tin exe

   người dùng Mac. Thao tác 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 tin nén

   người dùng Linux. . tranh luận và. rpm là các loại tệp khác nhau để lưu trữ dữ liệu. Chúng tôi đề nghị bạn tải về. deb để các bản cập nhật tự động hoạt động như tài liệu Visual Studio Code gợi ý

3. Khi tệp Visual Studio Code tải xuống xong, chúng ta cần cài đặt nó. Tìm tệp Visual Studio Code 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 mình

   người dùng Windows. Mở. 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 là 'Kết thúc'. ’

   người dùng Mac. đã tải xuống. tệp zip phải nằm trong thư mục 'Tải xuống' của bạn. Mở tập tin. Nếu bạn thấy thông báo này, hãy chọn “Mở. ”

   người dùng Linux. Tệp đã tải xuống phải nằm trong thư mục 'Tải xuống' của bạn

   Tìm nó trong trình quản lý tệp của bạn, nhấp đúp chuột 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ệnh một, trong thiết bị đầu cuối

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

4. Đảm bảo rằng bạn đã lưu ứng dụng Visual Studio Code của mình ở một nơi mà bạn biết rằng bạn sẽ dễ dàng tìm thấy nó

   người dùng Windows. Nó sẽ tự động được đặt trong menu Bắt đầu của bạn

   người dùng Mac. Nhấp và kéo biểu tượng Visual Studio Code từ thư mục Tải xuống vào thư mục Ứng dụng

   người dùng Linux. Nó sẽ xuất hiện trong thanh tác vụ của chương trình

Vậy là xong, bạn đã cài đặt thành công trình soạn thảo văn bản của mình và sẵn sàng bắt đầu viết mã

III. Luyện tập. Sử dụng Visual Studio Code để bắt đầu một dự án ngoài nền tảng

Khi bạn chuyển qua các bài học và lộ trình khác nhau ở đây trên Codecademy, bạn có thể thấy mình cần tạo một dự án trên máy tính của riêng mình chứ không phải trên môi trường học tập Codecademy. Điều này có thể phức tạp, nhưng đó là một bước thú vị báo hiệu rằng bạn đã sẵn sàng làm việc độc lập

Để làm điều này, chúng tôi sẽ cần sử dụng trình soạn thảo văn bản mà chúng tôi đã cài đặt ở trên. Hãy dành một chút thời gian để dùng thử Visual Studio Code

'thư mục phát triển' là gì?

Trước khi sử dụng trình soạn thảo văn bản của bạn, điều quan trọng là phải thiết lập một hệ thống tệp có tổ chức. Khi số lượng và quy mô dự án của bạn tăng lên, việc biết nơi lưu dự án mới và tìm dự án cũ ngày càng trở nên quan trọng.

Hầu hết các nhà phát triển lưu trữ các dự án của họ trong một thư mục dễ tìm, (bạn có thể quen gọi là 'thư mục'). Tại Codecademy, chúng tôi khuyên bạn nên đặt tên cho thư mục này là dự án. Nó sẽ lưu trữ tất cả các dự án mã hóa của bạn. Bất cứ khi nào bạn tạo một dự án mới, dù nhỏ đến đâu, bạn phải luôn tạo một thư mục mới bên trong thư mục dự án của mình. Bạn sẽ thấy rằng các dự án một tệp có thể nhanh chóng chuyển thành các dự án lớn, nhiều thư mục

Luyện tập. Hãy làm một dự án

Dưới đây là các bước bạn cần thực hiện để tạo một thư mục mới cho tất cả các dự án lập trình của mình. Bạn cũng sẽ học cách tải một thư mục dự án mới vào Visual Studio Code và tạo dự án HTML “hello world” đầu tiên của bạn

Chúng tôi khuyên bạn nên xem video trên rồi làm theo các bước được viết bên dưới

1. Tạo một thư mục phát triển

Điều hướng đến một thư mục bằng trình quản lý tệp của bạn hoặc thiết bị đầu cuối. Hãy chắc chắn rằng đó là một thư mục bạn truy cập thường xuyên và sẽ ghi nhớ. Tạo một thư mục mới có tên là dự án

người dùng Mac. Đây có thể là tài khoản Người dùng của bạn hoặc thư mục “Trang chủ”

người dùng Windows. Bạn có thể muốn lưu cái này vào ổ C của mình

người dùng Linux. Bạn có thể muốn lưu cái này trong thư mục Người dùng của mình bên trong thư mục “Trang chủ”

Trong thư mục dự án, tạo một thư mục mới có tên HelloWorld. Mọi thứ bạn thêm vào thư mục này sẽ là một phần của dự án HelloWorld của bạn

2. Mở mã Visual Studio

3. Mở thư mục phát triển của bạn

Nhấp vào biểu tượng 'Explorer' trên menu bên trái và nhấp vào nút 'Open Folder' và chọn thư mục phát triển của bạn. Thao tác này sẽ khởi chạy trình quản lý tệp của bạn

Điều hướng đến thư mục HelloWorld và chọn Mở. Thư mục sẽ mở trong ngăn bên của Visual Studio Code. Tại thời điểm này, không nên có bất kỳ nội dung nào trong thư mục. Chúng tôi sẽ thêm một tệp trong bước tiếp theo

4. thêm một tập tin

Trước khi bạn tìm hiểu cách thêm tệp vào thư mục dự án, điều quan trọng là phải hiểu mục đích của phần mở rộng tệp. Phần mở rộng tệp là hậu tố của tên tệp (3 hoặc 4 ký tự cuối cùng trong tên tệp, trước dấu chấm) và mô tả loại nội dung mà tệp chứa. Ví dụ: phần mở rộng tệp HTML là. html và nó yêu cầu trình duyệt (và các ứng dụng khác) diễn giải nội dung của tệp dưới dạng tài liệu HTML. Khi Visual Studio Code tải thư mục dự án, bạn có thể thêm tệp. Các bước bên dưới mô tả cách thêm tệp. Đừng lo lắng về việc làm điều này trên máy tính của riêng bạn. Chúng ta sẽ đến đó tiếp theo

Trong khung Visual Studio Code Explorer, nhấp vào tên thư mục phát triển của bạn. Bạn sẽ thấy bốn biểu tượng xuất hiện bên phải tên thư mục. Nhấp vào biểu tượng 'Tệp mới'. Nhập tên tệp mới với phần mở rộng tệp thích hợp của nó ( ví dụ:. html,. css,. csv). Điều quan trọng là bạn phải bao gồm phần mở rộng tệp chính xác, để các chương trình như linters biết cách diễn giải nội dung của nó. Nhấn Enter khi hoàn tất

5. Bắt đầu mã hóa

Sao chép và dán mã HTML soạn sẵn sau

    Hello World 

Lưu tệp của bạn thường xuyên bằng tính năng Lưu tự động và theo dõi các thay đổi bằng hệ thống kiểm soát phiên bản nếu bạn biết cách sử dụng. (Để bật Tự động lưu, nhấp vào 'Tệp' rồi 'Lưu tự động'. Khi bật, bạn sẽ thấy một dấu kiểm bên cạnh 'Lưu tự động'. ) Điều này sẽ làm giảm khả năng mất công việc chưa được lưu
Phần mở rộng tệp và đánh dấu cú pháp
Cú pháp là tập hợp các quy tắc cho chúng ta biết cách tạo mã được viết chính xác. Visual Studio Code và các trình soạn thảo văn bản khác có thể diễn giải các phần mở rộng tệp và cung cấp tính năng tô sáng cú pháp theo ngôn ngữ cụ thể. Đánh dấu cú pháp là một công cụ để làm cho mã dễ đọc hơn. Hãy nhìn vào chỉ số của bạn. tệp html. Văn bản và thẻ có màu khác nhau. Đây là cách Visual Studio Code làm nổi bật. cú pháp html. Với mỗi ngôn ngữ mới bạn học, Visual Studio Code sẽ đánh dấu văn bản theo cách giúp mã của bạn dễ đọc. Điều này có thể khác với các trình soạn thảo văn bản khác và cũng khác với cách đánh dấu mã của bạn trên Codecademy
Không bắt buộc. Thay đổi bảng màu
Mặc dù Visual Studio Code đi kèm với tô sáng cú pháp mặc định, bạn có thể muốn thay đổi màu sắc được sử dụng. Các chủ đề màu sắc tốt sẽ giúp bạn đọc tất cả các dòng mã đó một cách dễ dàng. (Thử các chủ đề tối, có độ tương phản thấp như “Solarized Dark” hoặc “Dracula Dark. ”)
Để thực hiện việc này, hãy chọn Chủ đề màu từ trang Chào mừng khi bạn mở Visual Studio Code lần đầu tiên hoặc nhấp vào Mã trong thanh menu ở đầu cửa sổ màn hình 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 sắc để cài đặt bằng menu Tiện ích 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 để xem trong trình duyệt web. Các bước sau đây nên được thực hiện bên ngoài Visual Studio Code
Điều hướng đến chỉ mục. html trong thư mục Hello World của bạn thông qua trình quản lý tệp hoặc thiết bị đầu cuối của bạn
Nhấp đúp chuột hoặc mở chỉ mục. html. Trang sẽ mở trong trình duyệt web mặc định của bạn. Dành giây phút để chiêm ngưỡng tác phẩm thủ công của bạn—bạn đã thực hiện dự án đầu tiên của mình với Visual Studio Code

Tiến 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 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 viết mã hiệu quả hơn và là điều khiến Visual Studio Code trở thành một trình soạn thảo hữu ích

IV. kết thúc

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 trang web trên máy tính của riêng mình

Làm cách nào để tạo tệp HTML và CSS trong Visual Studio Code?

Làm cách nào để định dạng CSS trong Visual Studio Code?