Mã phòng thu trực quan html5

Visual Studio Code là lựa chọn số 1 của hầu hết các lập trình viên trên thế giới. Trong bài viết này tôi chỉ hướng dẫn bạn cách cài đặt và sử dụng VSCode để học lập trình web một cách hiệu quả nhất

Visual Studio Code là gì?

Tiếp xúc và làm việc với lập trình đã có trên 10 năm nhưng thực tế là để tìm được một phần mềm viết mã chuyên nghiệp tiện lợi thực sự khó khăn cho đến khi tôi biết được Visual Studio Code từ các bạn lập trình viên nước ngoài

Không phải nói quá đâu nhưng hầu hết các phần mềm soạn thảo code đều được như Php Store, Sublime Text… thì đều tốn phí mua bản quyền hoặc phải mất rất nhiều thủ thuật mới có được nó

Visual Studio code thì hoàn toàn khác, nó thực sự là ngon

• Được tạo ra và phát hành miễn phí bởi tập đoàn công nghệ hàng đầu thế giới Microsoft
• Phần mềm được phát hành miễn phí khi giá trị sử dụng cao
• Thao tác trên phần mềm vô cùng tiện lợi vô cùng dễ dàng đặc biệt là để lập trình web
• Hỗ trợ mở rộng kho mở rộng phục vụ nhiều nhu cầu khác nhau của lập trình viên giúp công việc tốt hơn
• Cài đặt nhẹ nhàng, khởi động nhanh chóng
• Quản lý tệp và thư mục dựa trên dự án thuận lợi, các thao tác như sao chép, dán, di chuyển, tạo tệp, tạo thư mục cực kỳ linh hoạt
• Tóm tắt lại là ngon

Ok, nếu bạn đang tìm một phần mềm lập trình web thì Visual Studio Code là lựa chọn tốt nhất cho bạn rồi đó. Ở phần tiếp theo tôi có một loạt video hướng dẫn cách sử dụng phần mềm này, rất hữu ích cho bạn

1. Hướng dẫn cài đặt Visual Studio Code

Video này tôi hướng dẫn bạn cách cài đặt mã VS chỉ sau vài phút. Hủy bỏ mọi thứ nhanh chóng, bạn bật máy tính lên và thực hiện theo luôn nhé

2. Gỡ bỏ phần mềm Visual Studio Code

Trong quá trình bạn sử dụng Mã VS đôi khi mình cài đặt nhiều tiện ích mở rộng quá dẫn đến xung đột thì video bên dưới là cách triệt tiêu cho Visual Studio Code. Bạn cứ xem qua biết đâu sau này gặp thì biết là có video này để xử lý

Lưu ý là nếu chỉ gỡ mã VS Code theo cách thông thường thì sẽ không triệt tiêu phần mềm nên nhiều cài đặt sẽ bị giữ lại

3. Cài đặt Color Theme cho Visual Studio Code

Trong VS code có nhiều tùy chọn màu chủ đạo khác nhau, video bên dưới giúp bạn chọn giao diện soạn thảo VS Code mà bạn thấy code dễ nhất

4. Cài đặt Material Icon Theme cho VS Code

Mặc dù VSC có biểu tượng cơ bản và có phần khó để phân biệt các loại tệp khác nhau. Yên tâm trong video tôi hướng dẫn bạn chọn Material Icon để từ đó giúp bạn có phần hiển thị tệp thư mục trực quan và gắn kết với ngôn ngữ mà bạn đang sử dụng

5. Cách Zoom code trong VS Code

Mắt mỗi người phù hợp với mã kích thước phông chữ khác nhau. Video bên dưới giúp bạn cấu hình để phóng to và thu nhỏ mã chỉ bằng cú trượt chuột

6. Cài đặt Live Server cho Visual Studio Code

Khi thiết lập web, kết quả cần hiển thị trên giao diện. Trong quá trình học xây dựng giao diện bằng Html, Css, Js thay vì cần phải chạy mã trên máy chủ ảo như Xampp, bạn hoàn toàn có thể sử dụng Live Server để hiển thị kết quả của những mã bạn đã duyệt

7. Quản lý tệp và thư mục trên Visual Studio Code

Trong dự án thì không có gì ngoài file và các thư mục. Vì sao phải làm thế nào để có thể sử dụng linh hoạt những thao tác đó?

8. Tự động xuống hàng trong Mã VS

Default if you have a đoạn văn bản dài thì Mã VS không tự động xuống dòng mà để 1 dòng dài lòng khoan dung. Điều đó không hay cho lắm vì chúng ta khó kiểm soát được những thông tin mình code ra của dự án

Video bên dưới tôi chỉ cho bạn mẹo cài đặt để nhắn tin ngoan ngoãn xuống hàng làm cho mã của bạn rõ ràng sạch sẽ, dễ quản lý hơn

9. Căn chỉnh code php trên Visual Studio Code

Để tự động căn chỉnh mã trên Mã VS bạn sử dụng tổ hợp phím Alt + Shift + F nhưng với Php thì cần cài đặt thêm tiện ích mở rộng. Video này hướng dẫn bạn điều đó để có thể viết mã php Ngừng hơn

pause

Trên đây mình chia sẻ với các bạn những bài hướng dẫn những thứ bạn cần để sử dụng Visual Studio Code dễ dàng hơn và giúp học tập và phát triển website dễ dàng hơn

Nếu có bất kỳ thắc mắc nào, bạn cứ để lại bình luận bên dưới, tôi sẽ dành thời gian tư vấn để hỗ trợ bạn

À, nếu bạn đang học lập trình web để đi làm nhưng không biết bắt đầu từ đâu? . vn, tôi chia sẻ những thứ bạn cần để có thu nhập 8-30tr/tháng từ khởi nghiệp chương trình này

Visual Studio Code cung cấp hỗ trợ cơ bản cho lập trình HTML ngay lập tức. Có đánh dấu cú pháp, hoàn thành thông minh với IntelliSense và định dạng tùy chỉnh. Mã VS cũng bao gồm hỗ trợ Emmet tuyệt vời

IntelliSense

Khi bạn nhập HTML, chúng tôi đưa ra các đề xuất qua HTML IntelliSense. Trong hình ảnh bên dưới, bạn có thể thấy một đóng phần tử HTML được đề xuất

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

8 cũng như danh sách các phần tử được đề xuất theo ngữ cảnh cụ thể

Các ký hiệu tài liệu cũng có sẵn cho HTML, cho phép bạn nhanh chóng điều hướng đến các nút DOM theo id và tên lớp

Bạn cũng có thể làm việc với CSS và JavaScript nhúng. Tuy nhiên, lưu ý rằng tập lệnh và kiểu bao gồm từ các tệp khác không được tuân theo, hỗ trợ ngôn ngữ chỉ xem nội dung của tệp HTML

Bạn có thể kích hoạt đề xuất bất kỳ lúc nào bằng cách nhấn ⌃Dấu cách (Windows, Linux Ctrl+Dấu cách . ).

Bạn cũng có thể kiểm soát nhà cung cấp dịch vụ hoàn thành mã tích hợp nào đang hoạt động. Ghi đè những điều này trong cài đặt người dùng hoặc không gian làm việc của bạn nếu bạn không muốn xem các đề xuất tương ứng

// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": true

Đóng thẻ

Các phần tử thẻ tự động được đóng khi

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

9 của thẻ mở được nhập

Thẻ đóng phù hợp được chèn khi

"html.autoClosingTags": false

0 của thẻ đóng được nhập

Bạn có thể tắt thẻ tự động đóng bằng cài đặt sau

"html.autoClosingTags": false

Tự động cập nhật thẻ

Khi sửa đổi thẻ, tính năng chỉnh sửa được liên kết sẽ tự động cập nhật thẻ đóng phù hợp. Tính năng này là tùy chọn và có thể được kích hoạt bằng cách cài đặt

"editor.linkedEditing": true

Bộ chọn màu

Giao diện người dùng bộ chọn màu Mã VS hiện có sẵn trong các phần kiểu HTML

Nó hỗ trợ cấu hình màu sắc, độ bão hòa và độ mờ cho màu được chọn từ trình chỉnh sửa. Nó cũng cung cấp khả năng kích hoạt giữa các chế độ màu khác nhau bằng cách nhấp vào chuỗi màu ở đầu bộ chọn. Bộ chọn xuất hiện khi bạn di chuột qua một định nghĩa màu

Bay lượn

Di chuột qua các thẻ HTML hoặc các kiểu được nhúng và JavaScript để có thêm thông tin về biểu tượng bên dưới con trỏ

Thẩm định

Hỗ trợ ngôn ngữ HTML thực hiện xác thực trên tất cả JavaScript và CSS được nhúng

Bạn có thể tắt xác thực đó bằng các cài đặt sau

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

gấp

Bạn có thể gấp các vùng của mã nguồn bằng cách sử dụng các biểu tượng gấp trên rãnh giữa số dòng và bắt đầu dòng. Vùng gấp có sẵn cho tất cả các thành phần HTML cho nhận xét nhiều dòng trong mã nguồn

Ngoài ra, bạn có thể sử dụng các điểm đánh dấu vùng sau để xác định vùng gấp.

"html.autoClosingTags": false

1 và

"html.autoClosingTags": false

0

Nếu bạn muốn chuyển sang chế độ gấp dựa trên thụt đầu dòng để sử dụng HTML

"[html]": {
    "editor.foldingStrategy": "indentation"
},

định dạng

Để cải thiện định dạng mã nguồn HTML của bạn, bạn có thể sử dụng lệnh Định dạng tài liệu ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I) to format the entire file or Format Selection ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F) to just format the selected text.

Trình định dạng HTML dựa trên js-beautify. Các tùy chọn định dạng do thư viện đó cung cấp được hiển thị trong cài đặt Mã VS

• "html.autoClosingTags": false
  

  1. Số ký tự tối đa trên mỗi dòng

• "html.autoClosingTags": false
  

  2. Danh sách các thẻ không nên định dạng lại

• "html.autoClosingTags": false
  

  3. Danh sách các thẻ, được phân tách bằng dấu phẩy, không nên định dạng lại nội dung

• "html.autoClosingTags": false
  

  4. Danh sách các thẻ nên có thêm một dòng mới trước chúng

• "html.autoClosingTags": false
  

  5. Có nên giữ nguyên các ngắt dòng hiện có trước các phần tử hay không

• "html.autoClosingTags": false
  

  6. Số lượng ngắt dòng tối đa được giữ nguyên trong một đoạn

• "html.autoClosingTags": false
  

  7. Thụt lề phần

  "html.autoClosingTags": false
  

  8 và

  "html.autoClosingTags": false
  

  9

• "editor.linkedEditing": true
  

  0. Chiến lược gói cho các thuộc tính

  • "editor.linkedEditing": true
    

    1. Quấn khi vượt quá chiều dài dòng

  • "editor.linkedEditing": true
    

    2. Bọc tất cả các thuộc tính, ngoại trừ đầu tiên

  • "editor.linkedEditing": true
    

    3. Bọc tất cả các thuộc tính, ngoại trừ thuộc tính đầu tiên và căn chỉnh các thuộc tính

  • "editor.linkedEditing": true
    

    4. Bọc tất cả các thuộc tính

  • "editor.linkedEditing": true
    

    5. Ngắt dòng khi vượt quá độ dài dòng, căn chỉnh thuộc tính theo chiều dọc

  • "editor.linkedEditing": true
    

    6. Giữ nguyên gói thuộc tính

  • "editor.linkedEditing": true
    

    7. Giữ nguyên gói thuộc tính nhưng căn chỉnh

• "editor.linkedEditing": true
  

  8. Kích thước căn chỉnh khi sử dụng

  "editor.linkedEditing": true
  

  9 và

  // Configures if the built-in HTML language support validates embedded scripts.
  "html.validate.scripts": true,
  
  // Configures if the built-in HTML language support validates embedded styles.
  "html.validate.styles": true
  

  0 trong

  "editor.linkedEditing": true
  

  0 hoặc

  // Configures if the built-in HTML language support validates embedded scripts.
  "html.validate.scripts": true,
  
  // Configures if the built-in HTML language support validates embedded styles.
  "html.validate.styles": true
  

  2 để sử dụng kích thước thụt lề mặc định

• // Configures if the built-in HTML language support validates embedded scripts.
  "html.validate.scripts": true,
  
  // Configures if the built-in HTML language support validates embedded styles.
  "html.validate.styles": true
  

  3. Tôn vinh các thẻ ngôn ngữ tạo khuôn mẫu django, erb, tay lái và php

• // Configures if the built-in HTML language support validates embedded scripts.
  "html.validate.scripts": true,
  
  // Configures if the built-in HTML language support validates embedded styles.
  "html.validate.styles": true
  

  4. Giữ nội dung văn bản với nhau giữa chuỗi này

Mẹo. Trình định dạng không định dạng các thẻ được liệt kê trong cài đặt

"html.autoClosingTags": false

2 và

"html.autoClosingTags": false

3. JavaScript nhúng được định dạng trừ khi thẻ 'script' bị loại trừ

Thị trường có một số trình định dạng thay thế để lựa chọn. Nếu bạn muốn sử dụng một trình định dạng khác, hãy xác định

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

7 trong cài đặt của bạn để tắt trình định dạng tích hợp

đoạn trích Emmet

Mã VS hỗ trợ mở rộng đoạn mã Emmet. Các từ viết tắt của Emmet được liệt kê cùng với các đề xuất và đoạn trích khác trong danh sách tự động hoàn thành của trình chỉnh sửa

Mẹo. Xem phần HTML của bảng cheat Emmet để biết các từ viết tắt hợp lệ

Nếu bạn muốn sử dụng các từ viết tắt HTML Emmet với các ngôn ngữ khác, bạn có thể kết hợp một trong các chế độ Emmet (chẳng hạn như

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

8,

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

9) với các ngôn ngữ khác bằng cài đặt

"[html]": {
    "editor.foldingStrategy": "indentation"
},

0. Cài đặt lấy a và liên kết nó với ID ngôn ngữ của chế độ được Emmet hỗ trợ

Ví dụ: để sử dụng các từ viết tắt Emmet HTML bên trong JavaScript

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

6

Chúng tôi cũng hỗ trợ Đoạn mã do người dùng xác định

Dữ liệu tùy chỉnh HTML

Bạn có thể mở rộng hỗ trợ HTML của VS Code thông qua định dạng dữ liệu tùy chỉnh khai báo. Bằng cách đặt

"[html]": {
    "editor.foldingStrategy": "indentation"
},

1 thành danh sách các tệp JSON theo định dạng dữ liệu tùy chỉnh, bạn có thể nâng cao hiểu biết của VS Code về các thẻ HTML, thuộc tính và giá trị thuộc tính mới. Sau đó, Mã VS sẽ cung cấp hỗ trợ ngôn ngữ, chẳng hạn như thông tin hoàn thành và di chuột cho các thẻ, thuộc tính và giá trị thuộc tính được cung cấp

Bạn có thể đọc thêm về cách sử dụng dữ liệu tùy chỉnh trong kho vscode-custom-data

tiện ích mở rộng HTML

Cài đặt tiện ích mở rộng để thêm nhiều chức năng hơn. Chuyển đến chế độ xem Tiện ích mở rộng ( ⇧⌘X (Windows, Linux Ctrl+Shift+X)) and type 'html' to see a list of relevant extensions to help with creating and editing HTML.

Mẹo. Nhấp vào ô tiện ích mở rộng ở trên để đọc mô tả và đánh giá để quyết định tiện ích mở rộng nào phù hợp nhất với bạn. Xem thêm trên Marketplace