Hướng dẫn html to jsx vscode - html sang jsx vscode

Một plugin mã Visual Visual Studio chuyển đổi văn bản HTML thành chuỗi JSX

Bạn có thể chọn văn bản HTML của mình và sử dụng phím tắt ctrl+alt+x

Có rất nhiều việc để làm

• Thêm chức năng để xác nhận mã HTML
• Thêm hỗ trợ để định dạng chuỗi kết quả
• Thêm hỗ trợ để chuyển đổi chuỗi JavaScript thành mã HTML

Thay đổi nhật ký

Chuyển đổi HTML đã sao chép thành JSX trước khi dán vào mã JavaScript/TypeScript.

---

Tổng quan

• Bắt đầu
• Chế độ on-demand
• Làm thế nào nó hoạt động
• Vấn đề hoặc đề xuất

Bắt đầu

Chế độ on-demand

Chế độ on-demand

Làm thế nào nó hoạt động

Vấn đề hoặc đề xuất

Chỉ cần sao chép HTML từ bất cứ đâu và dán nó vào bất kỳ tệp JavaScript hoặc TypeScript nào. Nó đã tự động được chuyển đổi thành JSX!

Làm thế nào nó hoạt động

Vấn đề hoặc đề xuất

Chỉ cần sao chép HTML từ bất cứ đâu và dán nó vào bất kỳ tệp JavaScript hoặc TypeScript nào. Nó đã tự động được chuyển đổi thành JSX!

• Đôi khi, việc chuyển đổi JSX tự động có thể gây khó chịu, ví dụ khi làm việc trên các dự án lai sử dụng cả JSX và HTML.
• Nếu bạn muốn tự điều khiển chuyển đổi, có chế độ on-demand, có thể được kích hoạt bằng cách đặt cài đặt paste-html-as-jsx.mode thành on-demand.

Khi chế độ on-demand hoạt động, HTML được sao chép sẽ không được chuyển đổi tự động. Một lệnh được thêm vào bảng màu có thể chuyển đổi nội dung bảng tạm của bạn từ HTML sang JSX tại bất kỳ điểm nào.

• javascript
• javascriptreact
• typescriptreact

Vì API mở rộng VSCODE không cung cấp một điểm chặn để sửa đổi nội dung clipboard trước khi dán, điều này phải dựa vào việc thay đổi văn bản clipboard tại các thời điểm có khả năng liên quan.

Vấn đề hoặc đề xuất

Chỉ cần sao chép HTML từ bất cứ đâu và dán nó vào bất kỳ tệp JavaScript hoặc TypeScript nào. Nó đã tự động được chuyển đổi thành JSX!

---

Đôi khi, việc chuyển đổi JSX tự động có thể gây khó chịu, ví dụ khi làm việc trên các dự án lai sử dụng cả JSX và HTML.

Nếu bạn muốn tự điều khiển chuyển đổi, có chế độ on-demand, có thể được kích hoạt bằng cách đặt cài đặt paste-html-as-jsx.mode thành on-demand.

Tổng quát

Thực ra, Visual Studio Code đã hỗ trợ sẵn một số tính năng đối với HTML, CSS và Javascript. Nhưng trong bài viết này, mình sẽ hướng dẫn cài đặt và sử dụng các extension để hỗ trợ lập trình web tốt hơn trên VSCode. Bên cạnh đó, mình cũng sẽ hướng dẫn thêm một số cách hack speed để gõ code nhanh và gọn gàng hơn. Các mục tiêu hướng đến sẽ là:

Hỗ trợ HTML, CSS, JavaScript: Code snippet, IntelliSense

1. LiveServer: Biến máy tính thành web server nhanh gọn. Xem kết quả trang web nhanh trong trình duyệt hoặc các thiết bị trong mạng lan.Code snippet, IntelliSense
2. Emmet: Code HTML nhanh như một vị thần. Không cần quan tâm đến đóng mở tags, tạo nhiều thẻ (div, span) một lúc, v.v… Biến máy tính thành web server nhanh gọn. Xem kết quả trang web nhanh trong trình duyệt hoặc các thiết bị trong mạng lan.
3. Yêu cầu cài đặt: Trước khi bắt đầu hướng  dẫn, bạn cần cài đặt sẵn Visual Studio Code editor. Xem bài viết hướng dẫn cài đặt VSCode tại đây: Code HTML nhanh như một vị thần. Không cần quan tâm đến đóng mở tags, tạo nhiều thẻ (div, span) một lúc, v.v…

Hướng dẫn cài đặt Visual Studio CodeTrước khi bắt đầu hướng  dẫn, bạn cần cài đặt sẵn Visual Studio Code editor. Xem bài viết hướng dẫn cài đặt VSCode tại đây:

Visual Studio Code đã hỗ trợ sẵn cho HTML, CSS và JavaScript

• Đừng mở file HTML, hãy làm quen với Workspace
• CSS IntelliSense – Gợi ý code cho CSS
• Tiện ích “IntelliSense for CSS class names in HTML”
  • Live Server – Test trang web nhanh-gọn-lẹ
• EMMET.IO – Cú pháp Emmet giúp code HTML siêu nhanh
• Một số cú pháp Emmet cơ bản
  • Một trong các tính năng của VSCode hấp dẫn các Web Developer đó là hỗ trợ các ngôn ngữ HTML, CSS và JS mặc định mà không cần phải cài thêm thứ gì. Các tính năng cơ bản có thể nói đến như là: Workspace, Xyntax Highlighting, Language Intellisense, Code Formatting, Emmet,…
• 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

• Visual Studio code là một code editor hiện đại và vô cùng mạnh mẽ, được rất nhiều lập trình viên tin dùng. Ngoài khả năng tương thích với mọi hệ điều hành PC hiện nay. VSCode còn nổi tiếng với khả năng mở rộng cực kỳ linh hoạt nhờ vào hệ thống extension của mình. Trong bài viết này, Hiếu Đá sẽ hướng dẫn thiết lập VSCode để lập trình web tiện lợi nhất. Là một vùng làm việc mà ta có thể tùy chỉnh những thiết lập đặc biệt, phù hợp với project và ngôn ngữ đang sử dụng. Đơn giản thì nó là một folder chứa code và tài nguyên cho project (ảnh, css, js,…).
• Tổng quát Làm nổi cú pháp, hay đơn giản là làm code của bạn màu mè dựa theo các từ khóa. Giúp dễ phân biệt các thành phần trong một cục code rối rắm.
• Thực ra, Visual Studio Code đã hỗ trợ sẵn một số tính năng đối với HTML, CSS và Javascript. Nhưng trong bài viết này, mình sẽ hướng dẫn cài đặt và sử dụng các extension để hỗ trợ lập trình web tốt hơn trên VSCode. Bên cạnh đó, mình cũng sẽ hướng dẫn thêm một số cách hack speed để gõ code nhanh và gọn gàng hơn. Các mục tiêu hướng đến sẽ là: VSCode sẽ gợi ý các từ khóa phù hợp khi bạn gõ code. Tính năng này giúp ta viết code nhanh và đỡ cực khổ hơn.
• Hỗ trợ HTML, CSS, JavaScript: Code snippet, IntelliSense Làm cho code của bạn gọn, đẹp, đúng chuẩn hơn. Đặc biết tính năng này hỗ trợ hầu hết các ngôn ngữ hiện nay. Cách Format code thì các bạn xem hình này nè.
• LiveServer: Biến máy tính thành web server nhanh gọn. Xem kết quả trang web nhanh trong trình duyệt hoặc các thiết bị trong mạng lan. Là các cú pháp được quy ước để viết code HTML nhanh hơn với tốc độ bàn thờ.

Emmet: Code HTML nhanh như một vị thần. Không cần quan tâm đến đóng mở tags, tạo nhiều thẻ (div, span) một lúc, v.v…

Yêu cầu cài đặt: Trước khi bắt đầu hướng  dẫn, bạn cần cài đặt sẵn Visual Studio Code editor. Xem bài viết hướng dẫn cài đặt VSCode tại đây:

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

Visual Studio Code đã hỗ trợ sẵn cho HTML, CSS và JavaScript

Đừng mở file HTML, hãy làm quen với Workspace

CSS IntelliSense – Gợi ý code cho CSS

---

CSS IntelliSense – Gợi ý code cho CSS

Phần này quan trọng, anh em đừng bỏ qua. Đối với Visual Studio Code, workspare là nơi chứa các project với các thiết lập tương ứng. Khi lập trình web bằng VSCode, anh em vẫn có thể mở file HTML và edit. Nhưng sẽ không thể dùng các tính năng như gợi ý file, css, js; Cũng như tạo server ảo để test web như bên dưới bài viết này. Chi tiết anh em có thể đọc ở bày bài viết sau: Workspace VSCode. Còn đơn giản chỉ cần nhớ:

Hãy mở folder chứa code bằng VSCode.

Click chuột phải và chọn Open with Code

---

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 ạ.

Tiện ích “IntelliSense for CSS class names in HTML”

Tiện ích này cung cấp tính năng gợi ý các class name của CSS cho các thuộc tính, thẻ HTML. Tiện ích này sẽ đọc các file CSS từ workspace (local) hoặc các phần CSS online trên mạng dựa vào phần tử link bạn định nghĩa trong file *.html.

Gợi ý CSS class name cho thẻ div trong HTML – Bootstrap

Các tính năng của extension:

• Hỗ trợ tự động hoàn thành code CSS class (css trong html và từ file *.css trong workspace)
• Hỗ trợ cả external CSS được liên kết bằng thuộc tính link trong html header.
• Hỗ trợ cú pháp Emmet. (mặc định bị tắt đi)
• Hỗ trợ TypeScript React, JavaScript và JavaScript React.
• Hỗ trợ CSS, SASS, SCSS.
• Tính năng cache và re-cache thủ công các class css. Tìm hiểu thêm trong link tải.

Thông tin khác và cài đặt extension: IntelliSense for CSS class names in HTML

---

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:

• Mở Live Server: Kích chuột phải vào file html và chọn Open with Live Server.Open with Live Server.
• Tắt Live Server: Kích chuột phải vào file html và chọn Stop Live Server.Stop Live Server.
• Tắt và mở Live Server có tất cả 5 cách tùy vào trường hợp và thói quen sử dụng. Tham khảo thêm tại link cài đặt.
• Mặc định, Live Server sẽ mở trang web trên trình duyệt mặc định của bạn.
• Để mở với trình duyệt khác hoặc chế độ ẩn danh thì cài đặt như sau:
  1. Ctrl+ Shift+ P > nhập User Setting> chọn: Preferences: Open User Settings+ Shift+ P > nhập User Setting> chọn: Preferences: Open User Settings
  2. User > Extensions > Live Server Config> Custom Browser. > Extensions > Live Server Config> Custom Browser.
  3. Sau đó chọn trình duyệt phù hợp.

• Bạn cần mở Workspace trong VSCode để Live Server hoạt động được. Nó sẽ xem đây là thư mục gốc của web.
• Hoạt động được cả với PHP, Node.js và ASP.NET nhưng cần cài thêm extension trên trình duyệt.

Toàn bộ thông tin và cài đặt Live Server:

VSCode 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.

---

EMMET.IO – Cú pháp Emmet giúp code HTML siêu nhanh

Emmet (trước đây là Zen Coding) là một plugin cho các code editor như Sublime Text, Atom, Bracket,… Còn đối với Visual Studio Code, nó được tích hợp sẵn! Emmet là các quy tắc viết tắt giúp việc viết code HTML/CSS trở nên nhanh gọn hơn. Thay vì phải gõ từng và rồi copy-paste hàng tá web element. Bạn chỉ cần gõ vài cú pháp viết tắt là xong.

Cú pháp Emmet để viết code HTML/CSS nhanh trong Visual Studio Code

Đối với những bạn mới làm quen với lập trình web. Các bạn nên nắm vững và sử dụng thành thạo các web elements (document, head, body, div, span, a, …) rồi hãy nghĩ đến việc sử dụng Emmet. Cú pháp Emmet mang lại nhiều lợi ích, nhưng nó cũng dễ gây lú cho người mới làm quen.

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 + TabTab 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

1. Tạo một trang HTML5 từ trang trống: html:5html:5
2. Tạo tag chỉ cần dùng tên thẻ: divimgulli, v.v…div img ul li, v.v…
   

   Tạo tag có class name và id: div.class1.class2#id Tạo tag có class name và id: div.class1.class2#idsrc=""alt=""> Tạo tag có class name và id: div.class1.class2#id Tạo tag có class name và id: div.class1.class2#id

3. Tạo tag có class name và id: div.class1.class2#iddiv.class1.class2#id
   

   Tạo tag có class name và id: div.class1.class2#idclass="class1 class2"id="id">

4. Tạo tag có class name và id: div.class1.class2#iddiv*3
   

   Kết hợp 3 và 4: div.class1.class2#id*3 Kết hợp 3 và 4: div.class1.class2#id*3 Kết hợp 3 và 4: div.class1.class2#id*3

5. Tạo tag có class name và id: div.class1.class2#iddiv.class1.class2#id*3
   

   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 Udemyclass="class1 class2"id="id"> 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 Udemyclass="class1 class2"id="id"> 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 Udemyclass="class1 class2"id="id">

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.

React Native Tools

• Redux DevTools
• Angular Snippets
• Debugger for Chrome
• Debugger for Firefox
• Debugger for Edge
• …
• Tổng kế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

Visual Studio code là một code editor hiện đại và vô cùng mạnh mẽ, được rất nhiều lập trình viên tin dùng. Ngoài khả năng tương thích với mọi hệ điều hành PC hiện nay. VSCode còn nổi tiếng với khả năng mở rộng cực kỳ linh hoạt nhờ vào hệ thống extension của mình. Trong bài viết này, Hiếu Đá sẽ hướng dẫn thiết lập VSCode để lập trình web tiện lợi nhất.