Môi trường Visual Studio Code

Visual Studio Code là một trong những IDE “hot” nhất hiện nay dành cho dân thiết kế và lập trình. Giao diện viết code thân thiện và nguồn Extensions (là những mô đun chức năng) dồi dào là những đặc điểm nổi bật nhất của VS Code.

Bài viết này minh họa cách làm việc với một tài liệu HTML thông qua môi trường VS Code và hệ điều hành sử dụng là Windows 10.

Tải và cài VS Code tại https://code.visualstudio.com/

Tạo một thư mục tên My Website chứa tập tin index.html có nội dung:

<!DOCTYPE html>
<html>
<body>
    <h1>Thiết kế website </h1>
    <p> Đây là trang web đầu tiên của tôi.</p>
</body>
</html>

Trong VS Code chọn File > Open Folder… và tìm đến thư mục My Website

Cài các Extensions

Vào mục Extensions từ VS Code

Cài Live Server

Gõ Live Server trong ô tìm kiếm và cài đặt bằng cách nhấn Install:

Extension này giúp các trang web tĩnh có thể được truy cập thông qua một máy chủ cục bộ (local server). Sau khi cài xong, chúng ta có thể thực thi tập tin index.html bằng cách nhấn chuột phải vào vùng soạn thảo tập tin này và chọn Open with Live Server:

Kết quả:

Để ý địa chỉ là 127.0.0.1 là địa chỉ IP của server cục bộ (hay localhost) và 5500 là cổng thực thi trang index.html.

Định dạng code tự động

Visual Studio Code hỗ trợ tự động định dạng source code (HTML, CSS hay JS) đẹp hơn. Ví dụ thay đổi mã HTML tập tin index.html lộn xộn như sau:

<!DOCTYPE html>
<html>

    <body>
<h1>Thiết kế website </h1><p> Đây là trang web đầu tiên của tôi.</p>
    </body>

</html>

Để VS Code tự động điều chỉnh cấu trúc mã nguồn đẹp hơn khi chúng ta lưu tập tin index.html, chúng ta chọn Manage > Settings (hay vào File > Preferences > Settings)

Trong ô Search settings gõ cụm từ format on save sẽ xuất hiện mục Editor: Format On Save. Đánh dấu chọn mục này:

Đóng tab Settings và quay trở lại index.html nhấn Ctrl + S để lưu thay đổi vừa thực hiện sẽ có phép màu xảy ra.

Chúng ta cũng có thể cài một Extension có tên là Prettier-Code formatter để hỗ trợ định dạng code. Extension này sẽ được thảo luận trong một bài viết khác.

Thay đổi trình duyệt mặc định khi dùng Live Server

Mặc định khi thực thi Live Server, trình duyệt web mặc định là Microsoft Edge. Chúng ta có thể thay đổi trình duyệt mặc định này bằng cách vào Settings > Users > Extensions > Live Server Config và tìm đến mục Custom Browser

Thay đổi giá trị null đến trình duyệt chúng ta mong muốn, ví dụ chrome

Dùng công cụ Inspect trong trình duyệt web

Sử dụng công cụ Inspect trong các trình duyệt hiện đại như Google Chrome hay Microsoft Edge (bằng cách nhấn chuột phải vào trình duyệt và chọn Inspect) sẽ giúp chúng ta tạo và quản lý nội dung trang web một cách hiệu quả hơn. Một ví dụ dùng công cụ Inspect trong Chrome khi thực thi trang index.html

Hợp lệ trang HTML

Thiết kế trang HTML phải đáp ứng các tiêu chuẩn công nghiệp web đề ra (tổ chức W3C ). Nếu thiết kế không đúng chuẩn có thể dẫn đến các vấn đề bảo mật hay các lỗi không mong muốn.

Để hợp lệ trang HTML có thể truy cập https://validator.w3.org/ một công cụ hợp lệ của W3C với giao diện:

Có 3 tùy chọn: hợp lệ trang theo địa chỉ có sẵn (Validate by URI), hợp lệ tập tin được tải lên từ máy người dùng (Validate by File Upload) và hợp lệ nội dung trực tiếp (Validate by Direct Input).

Giả sử chúng ta muốn hợp lệ nội dung tập tin index.html, chọn tùy chọn thứ hai và nhấn nút Choose File

Chọn tập tin index.html và nhấn Check, kết quả:

Cảnh báo 1 là thiếu thuộc tính lang trong thẻ html, lỗi 2 là chưa khai báo mã ký tự qua thẻ meta và lỗi 3 là chưa khai báo thẻ title trong thẻ head. Thay đổi nội dung tập tin index.html như sau:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>My Website</title>
</head>

<body>
    <h1>Thiết kế website </h1>
    <p> Đây là trang web đầu tiên của tôi.</p>
</body>
</html>

Thực hiện Check lại

Như vậy, trong một tập tin HTML đơn giản có một vài thành phần tưởng không quan trọng nhưng lại là bắt buộc theo tiêu chuẩn web công nghiệp mà chúng ta phải lưu ý, đặc biệt là những người mới học web.