Hướng dẫn cài môi trường html

Mục tiêu của bài viết này là giúp bạn cài đặt môi trường để thực hành các bài học lập trình tiếp theo. Mình sẽ không dài dòng, không giới thiệu quá nhiều các ngôn ngữ, các IDE hay Text Editor mà chỉ tập trung làm sao bạn có thể cài đặt môi trường nhanh nhất, chuẩn nhất và dễ tiếp cận cũng như phổ biến nhất trên thế giới.

Cài đặt công cụ cần thiết để học lập trình

Cài đặt Visual Studio Code

Để bắt đầu lập trình một website, chúng ta cần một nơi để viết những dòng code của mình và lưu chúng lại. Các lập trình viên khác nhau lại sử dụng những IDE và Text Editor khác nhau, bạn không cần bận tâm họ dùng công cụ gì vì kết quả nó trả ra là như nhau cả. Hãy chỉ chọn 1 công cụ để code và hãy sử dụng thành thạo nó. Đây là lời khuyên tốt nhất.

Anh A dùng Webstorm để code, anh B dùng Sublime Text, anh C dùng Visual Studio Code, … đừng lo lắng, vì đơn giản họ thích dùng phần mềm đó và họ đã quen sử dụng nó rồi. Bạn cũng hãy chọn cho mình một phần mềm để đồng hành cùng bạn thôi.

Ở bài viết này, mình sẽ hướng dẫn các bạn cài đặt và sử dụng Visual Studio Code, một Text Editor hoặc cũng có thể gọi là Code Editor phổ biến được nhiều lập trình viên trên thế giới lựa chọn và sử dụng nhất. Quan trọng là nó nhẹ và miễn phí.

Để so sánh IDE và Text Editor, bạn có thể tham khảo bài viết Sự khác nhau giữa IDE và Text Editor để biết thêm kiến thức chém gió với ae bạn bè, thực chất, kiến thức này không quan trọng.

Tải Visual Studio Code tại đây. Lựa chọn phiên bản phù hợp với hệ điều hành bạn đang sử dụng và ấn và download. Việc cài đặt giống nó cũng đơn giản như mọi phần mềm khác. Visual Studio Code viết tắt là VS Code, hỗ trợ cả hệ điều hành Windows và MacOS.

Sau khi download và cài đặt thành công, mở VS Code lên. Mình sẽ hướng dẫn cài một số plugin hỗ trợ cho các bạn code nhanh hơn và đẹp đẽ hơn trong quá trình viết code sau này.

Cách cài plugin cho VS Code, những plugins hữu ích

Khi đã mở VS Code,  nhìn vào cột công cụ ngoài cùng bên tay trái, chọn Extensions icon

, trên thanh tìm kiếm, hãy gõ tìm kiếm “Atom One Dark Theme” và ấn Install. Sau khi cài đặt xong hãy Enable nó lên nhé

Màu sắc của VS Code đã thay đổi trông đẹp mắt và mềm mại hơn rồi đó. Có rất nhiều Theme cho VS Code, bạn có thể lựa chọn một theme khác phù hợp với phong cách của mình nhé.

Quay lại thanh tìm kiếm, cài tiếp cho mình một số plugin sau với thao tác tương tự như trên:

• Live Server
• Color Picker
• Auto close tag
• Auto rename tag
• Image preview
• Eslint
• Prettier
• GitLens

Những plugin này mình thường sử dụng trong quá trình code. Chúng giúp mình code nhanh hơn và đẹp hơn,… các bạn cứ cài theo mình đi nhé.

Cài đặt trình duyệt Chrome

Có rất nhiều browser [trình duyệt] mạnh mẽ và phổ biến hiện nay nhưng trong series những bài hướng dẫn này, mình hi vọng bạn sẽ sử dụng Chrome để đồng bộ môi trường với mình nhé. Bạn có thể tải Chrome ở link này.

Cài Chrome plugin Mate Translate

Nếu các bạn đang sử dụng Chrome để duyệt web thì để thuận tiện trong quá trình dịch tiếng anh sang tiếng việt, plugin này cho phép bạn nhấp chuột 2 lần vào từ tiếng anh muốn dịch để xem bản dịch. Các bạn có thể download tại đây.

Lời kết

Bây giờ, bạn đã sẵn sàng để  bắt đầu thực hành viết những dòng mã HTML đầu tiên, tạo ra website của chính mình.

Tài liệu này sẽ giúp các bạn cài đặt môi trường làm việc để sắn sàng cho khoá học Frontend cho người mới bắt đầu tại Nordic Coder.

Các bước cần thực hiện:

1. Tải và cài đặt VSCode
2. Tải và cài đặt NodeJS
3. Cài đặt VSCode extension
4. Cài package surge.sh
5. Thử deploy một website đơn giản

1. Tải và cài đặt VSCode#

• Vào website VSCode: //code.visualstudio.com/
• Click Download để tải phần mềm về.
• Tiến hành cài đặt như hướng dẫn.
• Sau đó mở VSCode lên bạn sẽ thầy được giao diện dạng thế này:

2. Tải và cài đặt NodeJS#

• Vào website NodeJS: //nodejs.org/en/
• Tải version LTS, không dùng bản Current.
• Tiến hành cài đặt như hướng dẫn.
• Kiểm tra cài đặt thành công bằng cách mở terminal và run lệnh:

3. Cài đặt VSCode extension#

Bật chế độ Format on save#

• VSCode sẽ giúp bạn format lại code sau mỗi lần bạn save document Ctrl + S.
• Mở VSCode.
• Phía bên trái, phía dưới có hình bánh răng, click vào đó --> chọn Settings.

• Gõ chữ format on save vào ô tìm kiếm. Check vào cái ô checkbox để bật tính năng này lên.

Cài extention Live Server#

• Ông thần này giúp mình reload trình duyệt để thấy kết quả mới mỗi khi mình thay đổi code html/css/js.
• Vào link của Live Server extension.
• Click Install. Nó sẽ hỏi có cho phép mở VSCode để cài đặt không? Chọn Yes

4. Cài package surge.sh#

• Mở terminal với quyền admin:

• Với windows chạy luôn lệnh này để cho phép dùng command-line ở trong ứng dụng VSCode.

5. Thử deploy một website đơn giản#

• Tạo một folder rỗng, đặt tên là test hoặc tên gì bạn thích.
• Mở VSCode.
• Dùng File --> Open folder --> chọn folder rỗng mới tạo
• Trong VSCode, tạo một file mới bằng cách click vào icon thêm file mới, đặt tên là index.html
• Gõ html:5 rồi tab. Một template mẫu ra hiển thị ra thế này.

• Thay đổi title và thêm h2 vào hehe

• Deploy thôi nào. Mở terminal bên trong VSCode. Ctrl + J [Windows] còn MacOS Command + J
• Run lệnh

note

Trong đó:

• surge: là lệnh bắt buộc
• .: dấu chấm ý nghĩa là folder hiện tại.
• your-unique-name.surge.sh: cái này bạn lựa chọn một cái tên gì đó mà riêng cho bạn, ít đụng tới người khác để tránh bị trùng với người khác. Nếu lỡ người khác đã dùng sub-domain này rồi thì bạn sẽ không deploy được. Còn phần đuôi .surge.sh bạn giữ nguyên giúp mình nhé.

• Sau khi run lênh này, ở lần đầu tiên nó sẽ hỏi email và password
• Nhập email rồi nhấn enter
• Tiếp nhập password rồi nhấn enter [lưu ý, password sẽ không hiển thị lên màn hình đâu nha, nhưng nó vẫn hiểu hehe]
• Sau đó, nó sẽ chạy một tí rồi thông báo thành công dạng thế này.

Chúc các bạn thành công nhé! 😉
Nếu gặp vấn đề gì thì hãy thông báo lên group nhé! 🙂