Đề Xuất 2/2023 # Lập Trình Web Với Visual Studio Code: Html, Css, Javascript # Top 6 Like | Thaiphuminh.com

Đề Xuất 2/2023 # Lập Trình Web Với Visual Studio Code: Html, Css, Javascript # Top 6 Like

Cập nhật nội dung chi tiết về Lập Trình Web Với Visual Studio Code: Html, Css, Javascript mới nhất trên website Thaiphuminh.com. Hy vọng thông tin trong bài viết sẽ đáp ứng được nhu cầu ngoài mong đợi của bạn, chúng tôi sẽ làm việc thường xuyên để cập nhật nội dung mới nhằm giúp bạn nhận được thông tin nhanh chóng và chính xác nhất.

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

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…

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

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

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,…

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 đã hỗ trợ sẵn cho bộ ba ngôn ngữ trùm sò trong lập trình web. Thế nhưng chúng ta có thể tối ưu cách làm việc bằng cách sử dụng thêm một số extension và nắm thêm một số quy ước trong 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

What is Workspace in VSCode

Hướng dẫn config cụ thể cho JavaScript trên trang chủ của VSCode: JavaScript in Visual Studio Code.

Cho thanh niên 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, 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.

CSS IntelliSense – Gợi ý code cho CSS

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.

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

Mặc định, Live Server sẽ mở trang web trên trình duyệt mặc định của bạn.

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, chúng tôi và chúng tôi 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:

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

Đố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:

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.

Tổng kết

Hướng Dẫn Dùng Visual Studio Code Căn Bản

Từ trước đến nay, khi nói đến sử dụng công nghệ Microsoft, ta không thể tránh khỏi Visual Studio. Nó gần như ôm trọn mọi thứ công nghệ của hãng này. Lập trình viên có thể dùng nó để làm tất tần tật từ desktop cho đến web rồi đến mobile. Điều này khiến Visual Studio ngày càng phình to. Theo xu thế hiện đại, công cụ viết code cần phải nhanh, gọn, nhẹ, vì lập trình viên không thích các công cụ đồ sộ. Hiểu được tâm lý này, vào tháng 4 năm 2015 tại hội thảo Build, Microsoft trình làng công cụ mới mang tên Visual Studio Code.

Đa nền tảng là xu hướng bắt buộc. Do cạnh tranh khốc liệt từ cộng đồng nguồn mở, Microsoft đã bắt đầu cởi trói cho đứa con cưng của mình, để chúng tự tung tự tác sang những nền tảng “đối lập”. Thay vì cứ bắt “hễ dùng công nghệ của tôi thì phải chạy hệ điều hành của tôi”, gã khổng lồ phần mềm cho phép các nền tảng khác tiếp cận dễ dàng với công nghệ của hãng, và Visual Studio Code là kết quả của tư duy mới này.

Nhìn về phía bên trái, ta thấy 4 biểu tượng nằm dọc theo mép cửa sổ. Dựa vào biểu tượng, ta dễ dàng đoán ra chức năng của chúng.

Visual Studio Code Explore

Visual Studio Code Search

Visual Studio Code Git

Version Control System (VCS) là công cụ không thể thiếu trong môi trường lập trình nhóm và Git là cái tên nổi bật nhất. Nếu dự án chưa được Git quản lí, Visual Studio Code hiển thị một cái nút to tướng đề nghị khởi tạo. Ta có thể dùng trực tiếp khung cửa sổ này để commit mà không cần nhảy qua cửa sổ dòng lệnh. Tất nhiên, Visual Studio Code không thể hỗ trợ mọi chức năng của Git. Nhưng với những gì nó cung cấp thì quá đủ cho nhu cầu Git hàng ngày.

Visual Studio Code Debug

Biểu tượng cuối cùng là con bọ nằm trong vòng tròn gạch chéo. Đây là chức năng tiêu diệt sâu bọ hay còn gọi là debugger. Thao tác cơ bản khi dùng debugger là như nhau. Đầu tiên ta đặt breakpoint, sau đó chạy chương trình cho tới khi đụng breakpoint. Kế đến, ta kiểm tra giá trị của biến, hoặc cho chạy từng dòng code để kiểm tra các thay đổi. Trong bài này, tôi không thể đi sâu vào quá trình debug. Bạn nên tìm hiểu thêm nếu kĩ năng debug vẫn còn non.

Thanh trạng thái

Visual Studio Code Status Bar

Thứ ba là mục kí tự kết thúc dòng. Trong Linux, kí tự kết thúc dòng là Line Feed (LF), còn trong Windows, kí tự này bao gồm Carriage Return và Line Feed (CRLF). Nếu để mặc định là LF, khi dùng Notepad mở file này, ta sẽ thấy văn bản trở nên lộn xộn vì Windows chỉ xuống dòng khi gặp CRLF.

Kế đến là mục ngôn ngữ lập trình. Visual Studio Code sẽ tự động phát hiện ngôn ngữ dựa vào đuôi file. Nếu nó chọn không đúng, ta dùng mục này để chỉnh lại.

Cuối cùng là biểu tượng mặt cười. Đây là nơi gửi phản hồi cho Microsoft để họ hoàn thiện sản phẩm. Nếu bạn có một ý tưởng hay, hãy gửi nó cho họ. Biết đâu trong bản Visual Studio Code tiếp theo, ý tưởng của bạn sẽ thành hiện thực.

Khung nhập lệnh

Khung nhập lệnh (Command Palette) là tính năng nổi tiếng của Sublime Text. Các trình soạn thảo code ra đời sau đều tích hợp tính năng này.

Visual Studio Code Command Palette

Khi muốn di chuyển nhanh đến dòng cụ thể, tôi dùng Ctrl + G. Lúc này, khung nhập lệnh hiện ra và điền sẵn dấu : bên trong. Tôi nhập số dòng và nhấn Enter để nhảy ngay đến dòng đó. Ngoài ra, khi muốn nhảy đến một class hay method, ta dùng Ctrl + Shift + O, sau đó nhập tên class hay method muốn đến. Các tên này được gọi là symbol và được biểu thị bằng kí tự @ phía trước.

Nếu nhìn kĩ, ta thấy bên trong khung nhập lệnh, Visual Studio Code gợi ý ta nhấn phím ? để xem thông tin trợ giúp. Visual Studio Code sẽ liệt kê một loạt các kí tự đặc biệt và các lệnh có thể dùng trong khung nhập lệnh. Trong trường hợp lỡ quên phím tắt của các chức năng này, ta vào menu Goto và sẽ thấy ngay các phím tắt cần thiết.

Sử dụng phím tắt là kĩ năng không thể thiếu. Phím tắt giúp ta viết code nhanh hơn, tiết kiệm thời gian và công sức. Visual Studio Code cung cấp nhiều phím tắt, nhưng ta chỉ cần nhớ vài phím hữu dụng. Học phím tắt giống như học từ vựng tiếng Anh, ta không thể ghi nhớ bằng cách học thuộc lòng cả danh sách dài. Thay vào đó, ta nên dùng thường xuyên thì mới nhớ dai được.

Trình soạn thảo code

Khung soạn thảo của Visual Studio Code trông đơn giản nhưng lại chứa nhiều tuyệt chiêu bí mật bên trong. Chiêu nổi bật nhất là tính năng tách khung soạn thảo ra làm hai, thậm chí làm ba. Nếu ta viết code với màn hình kích thước lớn (hơn 21 inch), phần lớn code chỉ gom về phía trái màn hình, phía bên phải thì trống không. Visual Studio Code cho phép tách ra nhiều khung soạn thảo để tận dụng diện tích màn hình. Để mở thêm khung thứ hai, ta bấm Ctrl + 2. Lúc này, khung mới hiện ra bên phải khung hiện tại. Nếu vẫn còn chỗ trống, ta mở thêm khung thứ ba bằng tổ hợp phím Ctrl + . Để đóng khung, ta dùng Ctrl + W.

Visual Studio Code cho mở tối đa 3 khung soạn thảo. Để di chuyển giữa các khung, ta dùng Ctrl và phím số tương ứng với thứ tự khung từ trái sang phải.

Emmet

Khi dùng Sublime Text, tôi phụ thuộc rất nhiều vào Emmet để viết code với ít phím gõ nhất. Mỗi khi cài mới Sublime Text, thao tác tiếp theo tôi làm là cài Emmet. Thật may, Visual Studio Code tích hợp Emmet từ đầu nên tôi không cần cài đặt thêm gì cả.

Đa con trỏ

Intellisense

Tôi không thể sống nếu thiếu Intellisense. Thật kinh khủng nếu một ngày đẹp trời nào đó, tôi mở Visual Studio Code và không thấy cái Intellisense đâu. Hầu như code editor nào cũng có tính năng nhắc mã, nhưng tôi đảm bảo nó không chuyên nghiệp bằng Visual Studio Code.

Khi viết code, Intellisense sẽ liên tục xuất hiện để gợi ý. Trong trường hợp ta cần được gợi ý mà lại không thấy Intellisense, ta gọi nó bằng Ctrl + Space (thanh khoảng trắng). Intellisense không những cung cấp tên biến hay method, mà nó còn thêm một dòng mô tả chức năng ngay bên dưới.

Intellisense

Các ngôn ngữ phổ biến đều được Intellisense hỗ trợ. Nếu dùng ngôn ngữ lạ, bạn có thể tải về extension bổ sung. Đầu tiên, ta mở khung nhập lệnh (Ctrl + Shift + P), rồi nhập vào ext install. Chờ một chút để Visual Studio Code lấy danh sách extension từ server. Sau đó, ta chọn extension muốn cài trong danh sách. Giả sử tôi muốn cài extension C++ Intellisense để Visual Studio Code nhắc mã khi viết code C++. Tôi mở khung nhập lệnh, gõ vào ext install c++. Nằm ngay đầu danh sách là C++ Intellisense. Tôi chọn nó và nhấn Enter. Từ giờ, Intellisense sẽ cung cấp gợi ý cho tôi khi viết code C++.

Code Snippet

Code snippet là đoạn code nhỏ thường được dùng ở nhiều chỗ khác nhau. Các snippet đều có một cái tên, và khi gõ cái tên này rồi nhấn Tab, toàn bộ đoạn code sẽ được chèn vào vị trí. Mặc định, Visual Studio Code cung cấp snippet cho các tính năng thường dùng trong ngôn ngữ. Ngoài ra, ta cũng có thể tạo snippet của riêng mình để dùng sau này.

Giả sử tôi đang viết JavaScript và cần dùng vòng lặp for. Lúc này, tôi gõ for và Intellisense hiện ra nhắc tôi là có một snippet tên for. Tôi chọn nó rồi nhấn Enter. Visual Studio Code chèn toàn bộ khung sườn của vòng lặp for và bôi đen những vị trí các biến để tôi thay thế cho dễ. Tôi di chuyển qua lại giữa các vị trí bôi đen này bằng phím Tab, và sau khi chỉnh sửa xong, tôi nhấn Enter để con trỏ soạn thảo nhảy ngay vào phần thân của vòng lặp. Hết sức nhanh chóng và tiện lợi.

Code Snippet

Di chuyển trong code

Khi viết những ứng dụng lớn, di chuyển qua lại trong code trở nên phức tạp. Trong Visual Studio, ta được trang bị hai tính năng Go to Definition và Peek Definition để nhảy ngay đến phần định nghĩa của một class hay method. Vì sự hữu ích không thể chối cãi, hai tính năng tuyệt vời này được mang sang Visual Studio Code.

Tính năng Peek Definition được bổ sung vào bản Visual Studio 2013 và giờ được tích hợp vào Visual Studio Code. Đây là tính năng tương tự Go to Definition nhưng cửa sổ code không nhảy sang vị trí khác. Thay vào đó, một cửa sổ con sẽ được mở ra ngay bên dưới. Ta có thể truy cập tính năng này bằng menu ngữ cảnh hoặc bằng Alt + F12. Ngoài ra, ta cũng có thể tìm tất cả các tham chiếu đến class hay method bằng tính năng Find All References với tổ hợp Shift + F12. Lúc này, Visual Studio Code hiển thị khung cửa sổ con như tính năng Peek Definition nhưng ở cột bên phải còn có thêm danh sách các tham chiếu.

Peek Definition

Ngoài ra, Visual Studo Code có một cách để xem nhanh định nghĩa bằng cách giữ phím Ctrl rồi rê chuột lên tên class hay method. Tôi hay dùng tính năng này để xem nhanh code trước khi quyết định có nhảy đến phần định nghĩa hay không.

Cấu hình

Quản lý code với Git

Git là thành phần không thể thiếu khi viết ứng dụng lớn, hoặc khi làm việc nhóm. Mọi thay đổi trong code cần được lưu lại, kể cả thông tin về người thực hiện thay đổi này. Khi có lỗi xảy ra, ta có thể quay về trạng thái cũ của code. Để dùng Git trong Visual Studio Code, ta phải cài Git sẵn trong máy.

Cửa sổ Git chia làm hai phần: Staged Changes và Changes. Changes chứa file bị thay đổi kể từ lần commit cuối cùng. Còn Staged Changes chứa file sẽ được commit trong lần tiếp theo. Khi rê chuột lên tên file, ta thấy phía bên phải xuất hiện biểu tượng. Để biết tính năng của chúng, ta rê chuột lên trên và chờ tooltip xuất hiện. Để commit các file trong Staged Changes, ta ghi thông tin vào khung Message, sau đó nhấn Ctrl + Enter. Phía trên khung Message là một loạt các biểu tượng khác. Trong đó, dấu ba chấm cung cấp một menu gồm khá nhiều tính năng của Git. Nếu chưa quen, bạn có thể tham khảo bài viết của tôi hướng dẫn sử dụng tính năng cơ bản của Git.

Visual Studio Code Git

Để ý kĩ, ta thấy phía trước tên file trong cửa sổ Git có một kí tự nhỏ. Đây là kí hiệu thông báo trạng thái của file. Bên dưới là danh sách các kí tự này:

U (Untracked): file chưa được theo dõi.

A (Added): file được thêm vào index để theo dõi.

M (Modified): file đã được thay đổi.

D (Deleted): file đã bị xóa.

Debug

Mắc lỗi và sửa lỗi đã trở thành một phần của cuộc đời lập trình viên. Dù muốn hay không, lỗi vẫn luôn hiện diện ở những nơi ta ít ngờ nhất. Và để tìm chúng thì không phải dễ. Do đó, ta cần có một công cụ mạnh giúp săn lùng những con sâu bọ này. Visual Studio Code cung cấp một trình debug tuy không quá cao siêu như trong Visual Studio nhưng cũng đủ thỏa mãn nhu cầu debug căn bản.

Cửa sổ debug chứa những thành phần căn bản ta thường thấy trong bất kì debugger:

Khung Variables chứa thông tin về các biến.

Khung Watch để thêm các biến cần theo dõi.

Khung Call Stack là danh sách các hàm được gọi theo thứ tự thời gian ngược, nghĩa là hàm gọi sau sẽ nằm đầu danh sách.

Khung Breakpoints chứa các tùy chọn cho breakpoint trong quá trình debug.

Visual Studio Code Debug

Để debug TypeScript, ta phải có file source map. Tôi sẽ hướng dẫn tạo file này ở phần tiếp theo: Chạy task tự động.

Chạy task tự động

Trong quy trình viết code JavaScript hiện đại, ta không còn phải thực hiện những thao tác thủ công nhàm chán. Visual Studio Code hỗ trợ tận răng những tính năng tự động hóa này, và cho phép chạy task thông qua các task runner nổi tiếng như Gulp, Grunt. Nếu viết code bằng TypeScript hoặc ECMAScript 6, ta có thể transpile nó sang JavaScript tự động bằng phím tắt hoặc mỗi khi save.

Chuẩn bị

Các task runner phổ biến hiện này đều chạy trong môi trường chúng tôi Do đó, bạn phải cài chúng tôi bản mới nhất tại chúng tôi nếu máy chưa có. Sau đó, ta tạo file package.json để lưu cấu hình cho dự án. Ta có thể tạo file này bằng cách thủ công, tuy nhiên, cách nhanh hơn là để npm tạo giúp. Ta vào cửa sổ dòng lệnh, sau đó di chuyển vào trong thư mục dự án. Tiếp theo, ta gõ lệnh npm init. Lúc này, npm sẽ hỏi ta một vài câu hỏi về thông tin dự án. Bạn có thể bỏ qua những câu hỏi không muốn trả lời bằng phím Enter. Sau khi hoàn tất, một file package.json được tạo ra trong thư mục dự án.

Cấu hình task

Biên dịch ECMAScript 6 tự động với Babel

Trước tiên, ta phải cài Babel cho dự án bằng npm. Ta chạy hai dòng lệnh sau:

npm install babel-cli --save-dev npm install babel-preset-es2015 --save-dev

Tiếp theo, ta mở file tasks.json và nhập vào thông tin sau:

Để chạy thử task, ta viết một vài dòng ECMAScript 6 vào một file nào đó trong thư mục js. Sau đó, ta nhấn Ctrl + Shift + B để chạy task. Cửa sổ Output sẽ hiện ra thông báo biên dịch thành công. Lúc này, trong thư mục dự án xuất hiện một thư mục mới tên out và bên trong chứa các file JavaScript đã được chuyển từ ECMAScript 6.

Nếu bạn không biết viết ECMAScript 6, hãy dùng tạm đoạn code sau để thử nghiệm:

Tuy nhiên, mỗi lần thay đổi code ta phải bấm Ctrl + Shift + B để chạy task thì quá bất tiện. Do vậy, ta có thể chạy task ở chế độ watch, và khi có thay đổi xảy ra trong file, nó sẽ tự động biên dịch. Để làm việc này, ta thêm đoạn code cấu hình sau vào mảng tasks trong file tasks.json.

Để chạy task này, ta không thể dùng Ctrl + Shift + B, vì nó không phải là build command ( isBuildCommand là false). Do đó, ta phải mở khung nhập lệnh Ctrl + P, sau đó gõ task rồi gõ khoảng trắng. Danh sách hiện ra các task có trong file tasks.json. Ta chọn babel-watch rồi nhấn Enter.

Lúc này, ở thanh trạng thái, ta thấy một biểu tượng xoay. Biểu tượng này cho biết rằng có một task vẫn đang chạy. Bây giờ, ta thay đổi code của file bất kì trong thư mục js, sau đó nhấn Ctrl + S để save. Ngay lập tức, Visual Studio Code sẽ cho biên dịch file này. Để tắt một task đang chạy, ta mở khung nhập lệnh, rồi gõ Terminate Running Task, sau đó nhấn Enter.

Thao tác cấu hình tôi trình bày trong phần này không chỉ dành cho Babel, mà còn dành cho tất cả các ứng dụng khác chạy trong môi trường dòng lệnh. Điển hình là trình biên dịch TypeScript tôi trình bày trong phần tiếp theo.

Biên dịch TypeScript tự động

Để biên dịch TypeScript, trước tiên ta phải cài đặt package TypeScript bằng npm:

Tiếp theo, ta mở tasks.json lên và thêm vào nội dung sau:

Ở thuộc tính args, tôi dùng thông số -p để chỉ định thư mục dự án (dấu chấm nghĩa là thư mục hiện tại). Tiếp theo, ta tạo thêm một file tên là tsconfig.json nằm ở thư mục dự án để cấu hình trình biên dịch TypeScript. File này có nội dung như sau:

Bây giờ, ta có thể chạy task bằng Ctrl + Shift + B. Visual Studio Code sẽ biên dịch tất cả các file .ts trong thư mục dự án và tạo ra file .js tương ứng. Vì ta đã bật thuộc tính sourceMap sang true nên trình biên dịch TypeScript cũng sẽ tạo ra các file source map tương ứng. Các file này dùng để debug TypeScript như đã trình bày ở phần Debug. Nếu bạn không biết gì về TypeScript, hãy tham khảo bài viết TypeScript căn bản của tôi.

Lời kết

Visual Studio Code là sự phối hợp hoàn hảo giữa code editor và IDE. Tuy không có nhiều tính năng cao cấp nhưng Visual Studio Code đáp ứng được phần lớn nhu cầu viết code của lập trình viên. Xu hướng viết code hiện nay là tránh dùng những công cụ cồng kềnh mà sử dụng một loạt các công cụ đơn giản kết hợp với nhau. Điều này cho phép họ tùy chỉnh quy trình viết code của mình sao cho phù hợp với sở thích cá nhân, thay vì phải gò ép bản thân cho khít với cách thức hoạt động của IDE.

Nếu đang dùng IDE hoặc code editor khác, bạn hãy tải Visual Studio Code và thử nghiệm trong một thời gian ngắn. Biết đâu sau vài ngày, bạn quyết định đi theo Visual Studio Code. Tại thời điểm viết bài này, nó vẫn đang trong giai đoạn “public preview”. Trong tương lai, Microsoft sẽ bổ sung thêm nhiều cải tiến hấp dẫn.

P.S. Trong phiên bản trước, Visual Studio Code không hỗ trợ gõ tiếng Việt có dấu bằng Unikey. Tuy nhiên, trong quá trình viết bài này, Microsoft đã tung ra bản update tháng 2 năm 2016 (nhằm ngày mùng 3 Tết), và bản này đã hỗ trợ gõ tiếng Việt bằng Unikey. Vậy là từ giờ tôi có thể dùng Visual Studio Code để viết bài thay vì Sublime Text.

DancongngheORG via hieusensei

Hướng Dẫn Lập Trình Python Cho Người Mới Bắt Đầu

Sử dụng “Grammar Version” 3.x (Ngữ pháp phiên bản 3.x):

Project đã được tạo ra.

Thêm nội dung cho chúng tôi :

print ("Hello Python!"); x = 5; y = 10; z = 20; print (x + y + z);

Chạy file chúng tôi bằng cách nhấn phải chuột vào nó và chọn:

Kết quả nhận được khi chạy chúng tôi :

Trong Python, module có thể hiểu một cách đơn giản là môt file nguồn ( *.py), nó có thể phơi bầy ra các lớp (class), hàm (function) và các biến toàn cục (global variables), mà các module khác có thể sử dụng.

Khi nhập khẩu (import) một file nguồn Python khác. Tên của file được đối xử như là một namespace (Không gian tên)

“Python package” đơn giản là một thư mục chứa các “Python module”.

Khi bạn tạo một package có tên “org.o7planning.test” sẽ có 3 thư mục được tạo ra là “org”, “o7planning”, “test”, trong mỗi thư mục tạo sẵn một file có tên “__init__.py”. Các file “__init__.py” thực chất không có nội dung bên trong, nhưng nó nói với Python rằng hãy đối xử với các thư mục chứa nó như là một “package”.

Bạn có thể tạo một module bên trong package, chẳng hạn tôi tạo một module có tên “mymodule.py” trong package “org.o7planning.test”:

Và trong một module khác có thể nhập khẩu “mymodule” để sử dụng với cú pháp:

# Nhập khẩu module "mymodule" trong package "org.o7planning.test" import org.o7planning.test.mymodule

Hoặc nhập nhẩu một class “myclass” trong module “mymodule”:

# Nhập khẩu một class nằm trong module mymodule. from org.o7planning.test.mymodule import myclass # Nhập khẩu module math để sử dụng. import math # math.floor(x) # Hàm này trả về số nguyên (interger) lớn nhất và nhỏ hơn hoặc bằng x. print ("math.floor(100.12) : ", math.floor( 100.12) ) # Hàm trả về giá trị tuyệt đối (absolute value). print ("math.fabs(-100.72) : ", math.fabs( -100.72) )

Tạo một module với tên “mymodule” và nằm trong package “org.o7planning.test”. Trong mymodule định nghĩa một hàm có tên sayHello.

Chú ý: Trong bài hướng dẫn này tôi không giới thiệu chi tiết về hàm. Nếu bạn là một người mới bắt đầu với Python, bạn không cần lo lắng về điều đó.

# Định nghĩa một hàm, truyền vào tên người # và trả về một chuỗi. def sayHello(name) : return "Hello "+ name # Sử dụng hàm sayHello ở trên. text = sayHello("Python") print(text)

Trong một module khác bạn muốn sử dụng hàm sayHello của “mymodule” bạn cần phải nhập khẩu module này, hoặc chỉ nhập khẩu hàm sayHello của module này.

import module:

# Import module. import org.o7planning.test.mymodule # Gọi hàm sayHello của mymodule: greeting = org.o7planning.test.mymodule.sayHello("Python") print(greeting)

Import function:

# Nhập khẩu hàm sayHello. from org.o7planning.test.mymodule import sayHello # Gọi hàm sayHello của mymodule: greeting = sayHello("Python") print(greeting)

6- Tra cứu thư viện Python

Khi làm việc với Python, bạn cần các tài liệu để có thể tra cứu các thư viện Python, và cách sử dụng chúng. Các tài liệu này được giới thiệu trên trang chủ của Python, các tài liệu này rất đầy đủ và chi tiết cho từng phiên bản khác nhau của Python.

Hướng Dẫn Nhanh Dùng Phần Mềm Zoom Trên Trình Duyệt Web

III. Tính năng Zoom trên các trình duyệt khác nhau

*Tính năng chia sẻ màn hình (Screensharing) trên Microsoft Edge yêu cầu Windows 10 Pro hoặc Enterprise. Nó không được hỗ trợ trên Windows 10 Home. Nếu bạn đang chạy Windows 10 Home và cần chia sẻ màn hình của mình, chúng tôi khuyên bạn nên sử dụng Chrome hoặc Firefox.

**Kết nối âm thanh thông qua máy tính trên Firefox và Safari chỉ dành cho những người tham dự hội thảo trên web (Tiếng Anh gọi là webinar attendees).

Nhấp vào liên kết (link) mời tham gia cuộc họp.

Một tùy chọn tham gia từ trình duyệt “Join from your Browser” có thể tự động xuất hiện. Nếu không, chọn tùy chọn tải xuống và chạy “download & run Zoom“.

Tùy chọn tham gia từ trình duyệt web “Join from your Browser” sẽ xuất hiện.

Bạn sẽ được nhắc nhập tên của bạn.

Nhấp vào “Join” để được đưa vào cuộc họp.

2. Join audio – Kết nối âm thanh

Khi bạn đã tham gia một cuộc họp, bạn có thể kết nối hệ thống âm thanh bằng máy tính, quay số trên điện thoại (dial in by telephone), hoặc chọn call me (nếu được bật cho tài khoản thuê bao trả phí – Host account). Call Me và các số điện thoại miễn phí yêu cầu bạn phải mua Add-on bổ sung audio conferencing plan.

Nhấp vào Phone Call, Computer Audio, hoặc Call Me tab để chọn phương thức tham gia kết nối âm thanh của bạn.

: Thực hiện theo các hướng dẫn trên màn hình để quay số qua điện thoại.

: Nhấp vào tùy chọn kết nối âm thanh từ máy tính “Join Audio By Computer“. Sau khi kết nối âm thanh từ máy tính, bạn có thể Tắt tiếng (Mute)/ bật tiếng (Unmute) ở góc dưới bên trái hoặc nhấp vào biểu tượng ^ để chọn micro (Microphone) và / hoặc loa (Speaker) khác.

: Chọn quốc gia mà điện thoại bạn đang thuê bao từ danh sách tùy chọn thả xuống. Nhập số điện thoại. Tích chọn hộp kiểm “Remember the number on this computer” nếu bạn muốn số này được lưu trữ cho các cuộc họp trong tương lai. Nhấp vào “Call Me”.

3. Xem video (Viewing video)

Khi tham gia một cuộc họp Zoom meeting từ trình duyệt web, bạn có thể xem video của một người tham gia trong chế độ xem loa đang hoạt động – Active speaker view – hoặc nếu thiết bị của người chủ trì (tiếng Anh gọi là Host) đang phát video. Nếu nhiều người tham gia cuộc họp cùng đang chia sẻ video của họ, bạn sẽ chỉ có thể xem một lần.

4. Mời người khác tham gia cuộc họp hoặc hội thảo (Inviting others)

Nhấp vào “Invite” để mở các tùy chọn để xem những người khác có thể mời tham gia cuộc họp.

Các tùy chọn khả dụng sẽ phụ thuộc vào các tiện ích bổ sung (tiếng Anh gọi là add-ons) cho tài khoản của bạn, nếu bạn là người chủ trì cuộc họp (thiết bị tham gia cuộc họp của bạn được gọi là máy chủ lưu trữ, tiếng Anh gọi là Host), và nếu bạn đang đăng nhập (logged in) tài khoản Zoom account của mình thì có các tùy chọn mời người khác tham gia như sau:

: Tùy chọn này sẽ mở ra các tùy chọn để gửi email với ứng dụng email client mặc định, Gmail, Yahoo mail, sao chép URL hoặc sao chép toàn bộ lời mời vào email để gửi đi.

: Nếu bạn có đã mua gói tiện ích bổ sung audio conferencing add-on, bạn có thể gọi cho người tham gia qua điện thoại. Nhập tên bạn muốn hiển thị cho họ, chọn quốc gia của họ, nhập số điện thoại của họ và nhấp vào Invite.

: Nếu bạn đã mua gói tiện ích bổ sung Cloud Room Connector add-on, Xem thông tin của hệ thống phòng họp H.323 hoặc SIP Room System để tham gia cuộc gọi hoặc mời họ bằng cách gọi đến địa chỉ IP của họ.

5. Chia sẻ màn hình của bạn (Sharing your screen)

Nhấp vào nút chia sẻ màn hình “Share Screen” nằm trên thanh công cụ điều khiển cuộc họp “Meeting Tool Bar” của bạn.

Chọn cửa sổ của một ứng dụng đang mở trên máy tính của bạn muốn chia sẻ, sau đó nhấp vào Share. Nếu bạn đang sử dụng nhiều màn hình cùng lúc (multi monitors), bạn sẽ thấy từng cửa sổ của từng màn hình và các cửa sổ ứng dụng đang mở ra trên nó.

Để chia sẻ một cửa sổ ứng dụng cụ thể, bấm vào Application Window tab, chọn cửa sổ ứng dụng cần chia sẻ, sau đó nhấn nút Share.

*Khi chia sẻ một ứng dụng, những thay đổi trực tiếp được thực hiện đối với tài liệu có thể không xuất hiện cho những người khác. Nếu bạn gặp phải sự cố này, vui lòng ngừng chia sẻ và thực hiện lại thao tác chia sẻ hoặc chia sẻ toàn bộ màn hình của bạn để tránh sự cố này.

*Đối với người dùng Windows 10, nếu một số ứng dụng được mở, một số lượng giới hạn sẽ được liệt kê dưới dạng tùy chọn để chia sẻ. Nếu ứng dụng bạn muốn chia sẻ không được liệt kê, hãy đóng các ứng dụng không cần thiết và thử lại.

Trong khi chia sẻ màn hình, bạn sẽ có quyền truy cập vào các điều khiển sau:

Một thông báo ở phía trên cửa sổ cuộc họp Zoom meeting window hiển thị bản xem trước của màn hình được chia sẻ của bạn. Nhấp vào Pause Share để tạm dừng chia sẻ màn hình.

Nhấp vào Resume Share để bắt đầu chia sẻ màn hình một lần nữa. Bạn cũng có thể nhấp vào Stop Share để ngừng chia sẻ màn hình của bạn.

Một thanh thông báo nổi xuất hiện trên đầu trình duyệt của bạn. Nhấp vào Stop sharing để ngừng chia sẻ màn hình của bạn. Nhấp vào Hide để ẩn thanh công cụ thông báo nổi của trình duyệt – floating notification bar.

Nhấp vào mũi tên hướng lên (^) bên cạnh nút Share screen để thay đổi người có quyền truy cập vào chia sẻ màn hình.

6. Yêu cầu truy cập từ xa (Request remote control)

Trong khi một người tham gia khác đang chia sẻ màn hình, bạn có thể điều khiển từ xa màn hình của họ.

Trong khi xem chia sẻ màn hình, nhấp vào Request Remote Control nằm ở trên cùng.

Nhấp vào bên trong vùng màn hình được chia sẻ để bắt đầu kiểm soát màn hình của người tham gia.

Để dừng điều khiển từ xa, nhấp vào Give Up Remote Control ở trên cùng.

7. Thực hiện Hỏi & Trả lời trong cuộc hội thảo trên web (Webinar Q&A)

Nhấp vào Q&A trong thanh công cụ điều khiển hội thảo trên web.

Bạn sẽ có quyền truy cập vào các điều khiển sau:

Nhập câu hỏi của bạn vào hộp văn bản để đặt câu hỏi.

Nếu người tham gia khác đã hỏi một câu hỏi, hãy nhấp vào biểu tượng ngón tay cái để bỏ phiếu cho câu hỏi hoặc nhấp vào Comment để thêm nhận xét của bạn. Các câu hỏi được sắp xếp dựa trên số phiếu bầu.

Nhấp vào Record để bắt đầu ghi nội dung cuộc họp trên Cloud.

– Quản lý người tham gia cuộc họp

Nhấp vào Manage để quản lý người tham gia cuộc họp hoặc hội thảo.

Di chuột qua tên của người tham gia và nhấp vào More để có thêm tùy chọn đối với người tham dự này.

* Rename: Thay đổi tên của người tham gia trong cuộc họp.

* Make Host: Chuyển quyền điều khiển cuộc họp (Host controls) cho người này.

* Put in Waiting Room: Đưa người này vào phòng chờ – Waiting room. Sau đó, bạn sẽ có tùy chọn để cân nhắc có đưa người này tham dự cuộc họp hay không?.

* Remove: Xóa tư cách tham gia của người này khỏi cuộc họp.

Ở cuối cửa sổ của người tham gia – Participants window, nhấp vào Mute All.

Khóa cuộc họp ngăn không cho bất kỳ người tham gia mới tham gia cuộc họp.

Ở cuối cửa sổ của người tham gia – Participants window, nhấp vào More.

– Điều khiển việc hỏi & Trả lời trong cuộc họp trên Web

Khi bạn là người tổ chức cuộc hội thảo (webinar host), người đồng tổ chức hội thảo (co-host), hoặc người tham gia hội thảo (panelist), nhấp vào Q&A trên điều khiển hội thảo – Webinar controls.

Câu hỏi được sắp xếp dựa trên số phiếu bầu (Vote). Bạn sẽ có quyền truy cập vào các điều khiển sau:

*Nhấp vào Answer Live để trả lời câu hỏi trực tiếp trong hội thảo trên web (tiếng Anh gọi là webinar).

*Nhấp vào Type Answer để nhập câu trả lời của bạn cho người tham dự đã nêu câu hỏi.

Nhập câu trả lời của bạn và nhấp vào Send.

( Tùy chọn): Tích chọn hộp kiểm Answer Privately nếu bạn chỉ muốn người tham dự đã nêu câu hỏi thấy được câu trả lời của bạn.

*Di chuột qua một câu hỏi và nhấp vào Dismiss để chuyển câu hỏi sang vùng từ chối trả lời Dismissed tab.

*Để mở lại câu hỏi, hãy nhấp vào Dismissed tab, tìm câu hỏi bạn muốn mở lại và nhấp vào Reopen Question.

*Nhấp vào biểu tượng bánh răng để hiển thị các cài đặt Q&A settings.

Lưu ý:Nếu bạn cho phép người tham dự trả lời Q & A, các câu hỏi sẽ vẫn xuất hiện trong danh sách các câu hỏi đang mở của Open tab, ngay cả khi người tham dự đã nhận xét về câu hỏi. Bạn có thể trả lời câu hỏi bằng cách chọn trả lời trực tiếp – Answer Live hoặc nhập câu trả lời – Type Answer.

Bài viết này hữu ích cho bạn không?

Bạn đang đọc nội dung bài viết Lập Trình Web Với Visual Studio Code: Html, Css, Javascript trên website Thaiphuminh.com. Hy vọng một phần nào đó những thông tin mà chúng tôi đã cung cấp là rất hữu ích với bạn. Nếu nội dung bài viết hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!