Simulacrum, từ simulacrum Latin, là một sự bắt chước, giả mạo hoặc hư cấu. Khái niệm này được liên kết với mô phỏng, đó là hành động mô phỏng .Một...
Lập trình web với Visual Studio Code: HTML, CSS, JavaScript – Blog Hiếu Đá
Visual Studio code là một code editor văn minh và vô cùng can đảm và mạnh mẽ, được rất nhiều lập trình viên tin dùng. Ngoài năng lực thích hợp với mọi hệ quản lý PC lúc bấy giờ. VSCode còn nổi tiếng với năng lực lan rộng ra cực kỳ linh động nhờ vào mạng lưới 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 thuận tiện nhất .
Tổng quát
Thực ra, Visual Studio Code đã tương hỗ sẵn 1 số ít tính năng so với HTML, CSS và Javascript. Nhưng trong bài viết này, mình sẽ hướng dẫn thiết lập và sử dụng những extension để tương hỗ 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 1 số ít cách hack speed để gõ code nhanh và ngăn nắp hơn. Các tiềm năng hướng đến sẽ là :
- Hỗ trợ HTML, CSS, JavaScript: Code snippet, IntelliSense
- 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.
- 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:
Visual Studio Code đã hỗ trợ sẵn cho HTML, CSS và JavaScript
Một trong những tính năng của VSCode mê hoặc những Web Developer đó là tương hỗ những ngôn từ 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 hoàn toàn có thể nói đến như thể : Workspace, Xyntax Highlighting, Language Intellisense, Code Formatting, Emmet, …
- Workspace: 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,…).
- Xyntax Highlighting: 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.
- Language Intellisense: 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.
- Code Formatting: 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è.
- Emmet: Là các cú pháp được quy ước để viết code HTML nhanh hơn với tốc độ bàn thờ.
Mặc dù Visual Studio Code đã tương hỗ sẵn cho bộ ba ngôn từ trùm sò trong lập trình web. Thế nhưng tất cả chúng ta hoàn toàn có thể tối ưu cách thao tác bằng cách sử dụng thêm một số ít extension và nắm thêm một số ít quy ước trong kiến thiết xây dựng project .
Thông tin về Workspace và cách tạo workspace trong VSCode. Mình hay mở workspace bằng cách chuột phải vào folder chứa project, sau đó nhấn chọn Open with Code
Hướng dẫn config đơn cử cho JavaScript trên trang chủ của VSCode : JavaScript in Visual Studio Code .
Cho người trẻ tuổi nào muốn try-hard JavaScript : JavaScript extensions in Visual Studio Code
Đừng mở file HTML, hãy làm quen với Workspace
Phần này quan trọng, bạn bè đừng bỏ lỡ. Đối với Visual Studio Code, workspare là nơi chứa những project với những thiết lập tương ứng. Khi lập trình web bằng VSCode, đồng đội vẫn hoàn toàn có thể mở file HTML và edit. Nhưng sẽ không hề dùng những 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 bạn bè hoàn toàn có thể đọc ở bày bài viết sau : Workspace VSCode. Còn đơn thuần chỉ cần nhớ :
Hãy mở thư mục chứa code bằng VSCode .
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 đã tương hỗ gần như tận răng cho đồng đội lập trình web. Thế nhưng CSS lại không được tương hỗ tính năng gợi ý code. Do vậy, khi thao tác với CSS thì không được tiện nghi cho lắm. Một file CSS thường có rất nhiều class / id. Chẳng ai hoàn toàn có thể nhớ hết tên class / id trong đó được. Nhất là khi ta thao tá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 phân phối tính năng gợi ý những class name của CSS cho những thuộc tính, thẻ HTML. Tiện ích này sẽ đọc những file CSS từ workspace ( local ) hoặc những phần CSS trực tuyến trên mạng dựa vào thành phần link bạn định nghĩa trong file *. html .
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.
tin tức khác và setup 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 sever web đơn thuần. Bạn hoàn toàn có thể xem tác dụng hoặc test website của mình ngay trên trình duyệt hoặc từ một thiết bị khác cùng liên kết chung mạng LAN, ví dụ như smartphone. Điểm đặc biệt quan trọng của ứng dụng này là website trên trình duyệt sẽ tự động hóa 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.
- Tắt Live Server: Kích chuột phải vào file html và chọn 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:
- Ctrl + Shift + P > nhập User Setting > chọn: Preferences: Open User Settings
- User > Extensions > Live Server Config > Custom Browser.
- 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à thiết lập Live Server :
Vì thời lượng bài viết có hạn nên Hiếu Đá chỉ trình làng sơ qua tiện ích này. Mình sẽ viết riêng một bài khá đầ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
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.
Đố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 những web elements ( document, head, body toàn thân, div, span, a, … ) rồi hãy nghĩ đến việc sử dụng Emmet. Cú pháp Emmet mang lại nhiều quyền lợi, 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 + Tab
- Tạo một trang HTML5 từ trang trống:
html : 5
- Tạo tag chỉ cần dùng tên thẻ:
div
img
ul
li
, v.v…
1234
src=” “alt=” “>
div. class1. class2 # id
| 1 |
class=” class1 class2 “id=” id “>
|
div * 3
| 123 |
|
div. class1. class2 # id * 3
| 123 |
class=” class1 class2 “id=” id “>
class=” class1 class2 “id=” id “>
class=” 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 Udemy
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 lúc bấy giờ đã tăng trưởng rất nhiều. Do đó, chỉ với HTML, CSS, Javascript là không đủ. Một số công nghệ tiên tiến như ReactJS, AngularJS, Electron, Blazor, v.v … được tạo ra để đẩy nhanh quy trình tiến độ tăng trưởng web hoặc tạo ra những ứng dụng đa nền tảng một cách thuận tiện. 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ệ quản lý và điều hành ). Các bạn hoàn toàn có thể tải thêm một số ít extension tương ứng với công nghệ tiên tiến đang thao tác để VSCode tương hỗ tốt nhất .
Tổng kết
Như vậy là tất cả chúng ta đã setup thành công xuất sắc Visual Studio Code để tương hỗ cho lập trình web. Bạn có vướng mắc hay góp ý gì về bài viết ? Hãy phản hồi ngay phía bên dưới nhé !
Xem thêm bài viết : Tổng hợp những Plugins không hề thiếu cho VSCode
Source: https://vh2.com.vn
Category : Tin Học
Khởi động sao tam giác là một trong số những phương pháp để khởi động động cơ đơn giản, hiệu quả và tiết kiệm chi phí. Vậy Khởi động sao...
Đồ Án 2: Thiết kế mạch Buck Converter DC-DC Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây...
Nguyên tắc hoạt động máy phát điện xoay chiềuDựa trên hiện tượng cảm ứng điện từ: Khi từ thông qua một vòng dây biến thiên điều hòa, trong vòng dây...
HDSD Led matrix Trong Proteus Và Cách Quét LED SD 8051 ( 8 x 64 ) Ngày 03/08/2010 20:19:50 / Lượt xem: 27279 / Người đăng: biendt / Nguồn: [email protected]...