4. Install Extensions Visual studio code - hướng dẫn cài đặt vscode extension để lập trình web
Вставка
- Опубліковано 14 жов 2024
- ❤️ Donate ủng hộ phát triển kênh| Momo: 0975812064
Số TK : 0975812064 Ngân hàng TPBank - Chủ tài khoản: Phạm Trung Kiên
✅ Nếu thấy video hay và bổ ích hãy like và chia sẻ để mình biết
Các bạn đang quan tâm nhiều đến chủ đề nào và phát triển tiếp cho nội dung đăng sau này
✅ Đăng ký kênh để không bỏ lỡ video: dangky.tuhoc.cc
Playlist Video :
✅Lập trình web HTML-CSS-JS : web.tuhoc.cc/
✅Lập trình Android với kotlin : kotlin.tuhoc.cc/
✅Lập trình java : java.tuhoc.cc/
✅Lập trình C++ : c.tuhoc.cc/
✅ selenium C# : selenium.tuhoc.cc/
✅ ffmpeg cut, ghép video cực nhanh : ffmpeg.tuhoc.cc/
✅C# cơ bản cho người mới: csharp.tuhoc.cc/
✅ Python căn bản cho người mới: python.tuhoc.cc/
✅ pygame lập trình game cho người mới : pygame.tuhoc.cc/
✅ opencv python : opencv.tuhoc.cc/
✅ clip động lực để học tập : dongluc.tuhoc.cc/
#htmlcss #html5 #htmlcsswebsite
Xin chào mọi người!
Hôm nay, trên kênh UA-cam của tuhoc.cc, chúng ta sẽ tiếp tục hành trình khám phá Visual Studio Code với chủ đề thú vị: "4. Install Extensions Visual Studio Code - Hướng dẫn cài đặt vscode extension để lập trình web".
Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn mở mạnh mẽ và phổ biến trong cộng đồng lập trình. Tuy nhiên, một trong những lợi ích chính của VS Code là khả năng mở rộng thông qua các extension. Điều này cho phép chúng ta tùy chỉnh và mở rộng khả năng của trình soạn thảo để phù hợp với nhu cầu lập trình của mình.
Trong video mới này, chúng ta sẽ đi sâu vào việc cài đặt các extension quan trọng cho lập trình web trong Visual Studio Code. Tôi sẽ giới thiệu cho bạn một số extension phổ biến và hữu ích, như "Live Server", "HTML CSS Support", "Prettier", và nhiều hơn nữa. Chúng sẽ giúp bạn tăng năng suất, sửa lỗi tự động, và cung cấp các tính năng hỗ trợ khi phát triển ứng dụng web.
Qua video này, bạn sẽ được hướng dẫn từng bước cụ thể về cách tìm kiếm, cài đặt và quản lý extension trong VS Code. Tôi sẽ chia sẻ những gợi ý và bí quyết để bạn có thể tận dụng tối đa khả năng của các extension này, và từ đó nâng cao hiệu suất lập trình của mình.
Nếu bạn đang muốn nâng cao kỹ năng lập trình web của mình và tìm kiếm những công cụ hữu ích để làm việc hiệu quả hơn, video này là dành cho bạn. Đừng bỏ lỡ cơ hội học tập và khám phá cùng tôi trên kênh UA-cam tuhoc.cc!
Hãy nhớ subscribe kênh và bật thông báo để không bỏ lỡ bất kỳ video hữu ích nào trong tương lai. Cảm ơn bạn đã theo dõi và hãy bắt đầu cuộc hành trình cùng tuhoc.cc ngay bây giờ!
Chúc bạn một ngày vui vẻ và thành công trong việc lập trình web!
more video about : Install Extensions Visual studio code - hướng dẫn cài đặt vscode extension để lập trình web
• Hướng dẫn cài đặt VSCo...
• 15 Extensions VS Code ...
• Top 10 VSCode Extensio...
Trời ông thầy này xịn xò kinh khủng. Bài giảng cực kỳ chi tiết, rất tận tâm luôn. Tự nhiên có động lực học lập trình vì thầy. Cám ơn thầy nhiều và chúc thầy nhiều sức khỏe
Nội cái phần cài thôi đã chi tiết kinh khủng. Mến thầy ở điểm đó. Đó công sức của thầy đã làm ra nhưng video đầy chất lượng như vậy. Con yêu thầy.
lần đầu tiên thấy 1 người dạy có tâm như vậy em cảm ơn thầy em sẽ follow thầy và xem video của thầy thương xuyên hơn.
Thầy dạy rất hay ạ mong kênh phát triển hơn nữa❤❤
Cảm ơn thầy đã hướng dẫn. Con đg tự học 2 tháng hè để đi học chính thức cho đỡ bỡ ngỡ
Dạ em cảm ơn thầy đã chia sẽ những kiến thức bổ ích này ạ
Hướng dẫn vô cùng chi tiết ạ.Cảm ơn anh 👍
hướng dẫn gì mà nhiệt tình quá thầy ơi ! mong thầy tiếp tục hướng dẫn chi tiết như vậy !
Thầy dạy rất hay ạ ❤❤
cảm ơn tác giả rất nhiều em tự học rất hay 🥰🥰🥰🥰
Bài giảng thật sư rất hay và rất hữu ích, cảm ơn thầy.
làm rất có tâm, chúc anh nhiều sức khỏe
Dùng ctrl shift p dùng emmet wrap cũng được
Dinh qua anh oiiii
, e cam on anh nhieu , qua chi tiet luon a
rất hay, em cám ơn anh nhiều
Thầy ơi, con nhấn ctrl F nó không lưu lại, mà phải nhấn ctrl F5 mới lưu vậy thầy
ctrl + s chứ
em cảm ơn thầy
😘 oki e. để sau nà a chi rõ phím hơn 🥲
Cho em hỏi mình cài làm sao để nó gợi ý thanh tag khi mình tập tên tag đó vậy ạ? Em phải gõ cả dấu nó mới hiện ra
e cài hết extension bài 4 này laòk mà.
a ơi e dùng cái prettier nó format cái lorem10 toàn thành kiểu
lorem10
chứ cái p không trên 1 dòng thì phải lms ạ
e vào setting ( hoặc nhấn phím tắt Ctrl + dấu , ) -> Nhìn sang góc phải trên cùng có biểu tượng tờ giấy có mũi tên , ngay dưới nút - thu nhỏ cửa sổ . chỉ vào nó hiện chữ open setting (JSON) , xóa toàn bộ code trong đó thay bằng code dưới đây xem sao nhé. Đây là code trên vs code của a :
{
"workbench.colorTheme": "Default Dark+",
"editor.formatOnSave": true,
"files.autoSave": "afterDelay",
"debug.console.fontSize": 16,
"markdown.preview.fontSize": 16,
"terminal.integrated.fontSize": 16,
"editor.accessibilityPageSize": 14,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"liveServer.settings.donotShowInfoMsg": true,
"editor.linkedEditing": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"workbench.iconTheme": "material-icon-theme",
"git.autofetch": true,
"git.enableSmartCommit": true,
"git.confirmSync": false,
"cSpell.language": "en,vi",
"files.autoSaveDelay": 5,
"liveServer.settings.wait": 3,
"liveServer.settings.fullReload": true,
"editor.scrollbar.horizontalScrollbarSize": 16,
"editor.fontSize": 17,
"liveServer.settings.donotVerifyTags": true,
"terminal.integrated.defaultProfile.windows": "Git Bash",
"git.openRepositoryInParentFolders": "never",
"emmet.syntaxProfiles": {
"html": {
"inline_break": 1
}
},
"window.zoomLevel": 2,
"editor.minimap.enabled": false
}
hay quá thầy ơi
nhiều extension như vậy có nặng máy k a tại lap e chip i5 hơi yếu
Nó nhẹ hều ý mà e, có nặng thì thằng chrome nó hút ram thôi 😄
Tất cả các dự án mình làm thì mặc định dự án tên là index hả ad
file index.html là 1 file đặc biệt. trình duyệt sẽ tìm đến file này để ưu tiên hiển thị e nhé. e thử đổi tên đi mà xem 😁
Dạ thầy cho em hỏi em bị lỗi gõ prettier mà không hiện để cài đặt thì làm sao ạ. ( " error while fetching extensions.failed to fetch") ạ
e làm giống hết các bước trong clip lại 1 lần . nếu vẫn o đc kiểm tra ngôn ngữ bàn phím. để sang Eng nhé.
Của e html hiện giao diện xong e tạo CSS IMG thử nhưng không hiện giao diện màu, e làm theo mà k đc
anh ơi em gõ vs code js nhưng trong code toàn hiện dấu "" mà k sửa về thành dấu ' ' này đc mong anh tl ạ
Thầy ơi, Phần Show live serve preview em cài rồi, hiện lên trang màu trắng nhưng văn bản nó không xuất hiện thầy ạ huhuhu thầy giúp em với (đã viết code giống thầy), kể cả phần Go live để xem cũng chỉ hiện trang màu trắng chứ không hiển thị văn bản ạ!
save chưa bro
thầy ơi, cái phần live server preview em nhấn F1 nó ko ra như video mà nó tắt tiếng thôi thầy. tại sao v thầy
e cài cái này, chuột phải index chọn show preview nhé marketplace.visualstudio.com/items?itemName=ms-vscode.live-server .Nó có hướng dẫn luôn đó
em ko pt sao h tự dưng ấn h1 ko ra gợi ý như trước nữa
Hd chi tiết quá ạ nhưng sao font chữ trên màn hình hơi nhỏ và nhòe ạ
e chỉnh video youtube lên 1080 xem
Hay quá
rất chi tiết
Thầy ơi, mn ơi giờ em gõ h1 xong bấm Enter thì nó hết hiện ra gợi ý phía sau rồi. Giờ e quay lại coi phần extensions thì không thấy cái nào cài hết. Giúp em với ạ 🥹
cài lại thôi e
Biểu tượng con rệp để đo các box đó tên j v a?
e cài extension chrome này nhé : chromewebstore.google.com/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi?pli=1
hay quá thầy
Cho em hỏi cái live sever
Khi mà em chọn go live thì nó có thông báo sever started, nhưng mà lại không hiện trang lên thì phải làm sao ạ?
e có đang ở tab index.html không nhỉ. xem win nó có hỏi chọn trình duyệt không e nhé.
@ nó không hiện hỏi chọn trình duyệt ạ
@ cái này em chuyển sang dùng cái edge extension được ko ạ? Tại em thấy nó cũng tương tự
được e. dùng cái nào tiện thì dùng. còn cái này nữa này marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
Cài icon them vs code trực tiếp trong extension của vs không được hả a ,sao phải vào google?
Được e ạ, cứ nhớ tên tìm là cài được. Qua google để nhiều khi có bạn nào tìm kiếm các tiện ích trên google thì cũng biết add vào vscode cho linh động. Để cho biết thêm hướng cài ý mà
tại sao em cài live server preview rồi gõ show live server preview nó kh ra zậy anh ,em bấm f1 trên bàn phím thì nó chỉ tắt âm lượng
laptop e ấn thử Fn + F1 nhé
âm thanh nói nhỏ quá lần sau tăng tiếng lên nha bác :3
😘 mình sẽ kiểm điểm bản thân nha 😜😜
Thầy cho e xin file giáo trình để in ra đi thầy
dc.tuhoc.cc box HTML CSS mục tài liệu có e nhé
Dạ anh ơi cho em hỏi, làm sao để gõ được tiếng việt trên VSC vậy ạ, em gõ nó cứ bị kiểu: Xin chafo moij nguoi
e dùng hệ điều hành gì nhỉ ?
Dạ em dùng win10 ạ
Em code trên scrimba rồi copy dán vào VS Code thì nó ra được tiếng việt, nhma em code trực tiếp trên VS Code thì nó bị kiểu: xin chaof moij nguoifw
anh ơi sao anh để tiếng việt mà gõ h1 xong nhấn enter nó cũng ra như khi mình để tiếng anh là cài thế nào ạ
hi e, a không bị lỗi đấy.
1. a dùng evkey chứ không dùng unikey.
2. e kiểm tra ngôn ngữ trên win. để là english nhé và dùng thêm evkey thử.
tại sao image preview lại không hiển thị được ảnh nữa nhỉ mặc dù e thử gỡ đi tải lại
tắt vscode bật lại thử xem e. với lại nếu e chèn link online thì nó cũng o hiện dc.
e để ảnh trong thư mục hay online nhỉ
@ e để trong thư mục lại k hiện, nma chèn link online có cái hiện có cái không
Thanks
thầy ơi, cái Go live em ấn vào sao nó k tự mở trang web ạ
e có đang ở tab file index không nhỉ. Kiểm tra xem win nó có hỏi em chọn trình duyệt để mở không nhé
win k hỏi chọn trình duyệt luôn thầy ơi =((
@@Bau-vy7xb e cài extension này,sau khi cài, chuột phải index.html chọn show preview là xong
@ vẫn v thầy ạ☹️, thôi chắc chịu khó shift alt r thôi thầy
@@Bau-vy7xb vào discord kênh pm a luôn a ultraview qua xem nào.
10:10 Show live sever preview
sao em f1 maf ko ra anh nhi
8:48
f1 nó kh ra thầy oi
e cài cái này thay thế nhé, cài xong, click chuột phải vào file index, chọn show preview , ngay trong link này họ cũng hướng dẫn dùng đó
marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
go❤
heart
Trên vs code của e không thấy chữ Go live anh có thể giúp e hiện thị nó ra được không
e cài xong extension chưa. ktra kỹ lại nhé.
@ e cài extension rồi ạ .E đã tìm ra rồi ạ ,e đã tắt hiển thị thanh status bar,và e đã bật lên rồi ạ ,cám ơn a vì những video hữu ích,chúc a một ngày tốt lành
@@laptrinhcc oki e. chúc e học tốt nhé. a còn đang đi viện khám . kkk.
@ anh không khoẻ à ,chắc hồi trước a bị covid ,nên sức khỏe bị ảnh hưởng đó...,chúc anh mau khỏe nhé! ❤️
@@laptrinhcc dạo này ngủ ít làm video đâm ra người yếu e ạ. đang bị rối loạn tiêu hóa. 🥲
Thầy dạy rất hay ạ mong kênh phát triển hơn nữa❤❤
Thầy ơi chỗ cài live server preview sao em nhấn f1 k ra chỗ tìm kiếm vậy ạ😢
e check xem cài thành công chưa, thử tắt bật vscode xem sao nhé