Bạn đang xem bài viết Hướng Dẫn Dùng Visual Studio Code Căn Bản được cập nhật mới nhất trên website Utly.edu.vn. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung 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.
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-devTiế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
Lập Trình Web Với Visual Studio Code: Html, Css, Javascript
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 Cách Dùng Máy Quẹt Thẻ Căn Bản Tại Cửa Hàng
Máy quẹt thẻ thanh toán là một trong những thiết bị hữu ích tại nhiều cửa hàng hiện đại. Máy không chỉ giúp quá trình thanh toán nhanh hơn mà còn là một cách giúp tối ưu phương thức thanh toán tại cửa hàng, không chỉ bằng tiền mặt. Vậy máy quẹt thẻ là gì? Và cách dùng máy quẹt thẻ như thế nào?
1. Máy quẹt thẻ là gì?
Máy quẹt thẻ hay máy POS là những chiếc máy cho phép thanh toán hóa đơn bằng các loại thẻ được ngân hàng phát hành. Hầu hết các loại thẻ ATM được các ngân hàng trong và ngoài nước phát hàng đều có thể thanh toán qua máy quẹt thẻ. Cách dùng máy quẹt thẻ rất đơn giản, chỉ cần bạn biết cách phân biệt các loại thẻ sau:
2 Các loại thẻ có thể thanh toán bằng máy quẹt thẻ
2.1. Thẻ thanh toán quốc tế
2.1.1. Thẻ Visa
– Logo Visa ở mặt trước thẻ
– Số Thẻ bắt đầu bằng số 4
2.1.2. MasterCard
– Logo MasterCard ở mặt trước
– Số Thẻ bắt đầu bằng số 5
2.1.3. Thẻ JCB
– Logo JCB ở mặt trước thẻ
– Số Thẻ bắt đầu bằng số 35
2.1.4. Thẻ UnionPay
– Logo UnionPay ở mặt trước thẻ
– Số Thẻ bắt đầu bằng số 62
2.2. Thẻ thanh toán nội địa
Là các loại thẻ ATM thông thường có liên kết internet banking
– Logo ngân hàng phát hành thẻ
– Số Thẻ bắt đầu bằng số 9704
3. Hướng dẫn cách dùng máy quẹt thẻ
3.1. Cách quẹt thẻ chip
3.1.1. Thẻ Chip là gì?
Thẻ chip là thẻ có mạch Chip ngay trên mặt trước thẻ để máy đọc thông tin thẻ.
3.1.2. Thao tác quẹt thẻ Chip
Chèn thẻ vào khe đọc, hướng mặt Chip lên trên, giữ thẳng thẻ và chèn phần có mạch chip vào thân máy.
3.2. Cách dùng máy quẹt thẻ với thẻ Từ
3.2.1. Thẻ Từ là gì?
Thẻ Từ là loại thẻ có vạch từ màu đen ở mặt sau thẻ.
3.2.2. Thao tác quẹt thẻ Từ
Cầm thẻ ngang, quẹt thẻ để phần từ hướng xuống dưới, áp mặt từ vào thân máy, quẹt thẻ theo hướng từ đầu đến cuối khe đọc thẻ.
Như vậy, cách dùng máy quẹt thẻ để thanh toán khá đơn giản. Bạn chỉ cần học nhanh cách phân biệt các loại thẻ thanh toán, thao tác đúng tương ứng với từng loại thẻ là thành công.
Hướng Dẫn Sử Dụng Macbook Cho Người Mới Bắt Đầu (Phần 2): Các Thao Tác Căn Bản
Hướng dẫn sử dụng MacBook không thể bỏ qua bàn phím
Nếu bạn vẫn đang tìm phím Control trên MacBook thì sẽ thấy chúng nằm cạnh phím Option. Tuy nhiên, nếu giả sử bạn thực hiện thao tác Copy mà dùng phím Control + C thì sẽ không có tác dụng. Thay vào đó, bạn hãy tìm nút Command. Phím Command trên macOS có chức năng tương tự như phím Ctrl trên Windows vậy. Nên để Copy, bạn sẽ dùng phím Command + C. Các dòng MacBook từ trước tới nay đã sử dụng phím Command này thay cho phím Ctrl trên WIndows rồi!
Bên cạnh đó, phím Option có chức năng tương tự Alt, trong khi Delete chính là Backspace. Ngoài ra, dãy phím từ F1-F12 cũng có phần khác biệt. Tuỳ vào từng dòng MacBook mà bạn sẽ có thể có TouchBar. Còn lại, các phím khác đều tương tự như trên laptop Windows.
Ngoài việc nắm được cách dùng MacBook và bàn phím thì bạn cũng cần biết về TrackPad của chúng. Nếu sử dụng trackpad trên MacBook hoặc Magic Trackpad, bạn sẽ được trải nghiệm rất nhiều tính năng thú vị. Có thể kể đến như cuộn trang bằng 2 ngón tay, vuốt 3 ngón từ dưới lên để bật Mission Control (quản lý cửa sổ, desktop), hay thu phóng nội dung bằng 2 ngón tay.
Trackpad của MacBook có rất nhiều cử chỉ thông minh
Ngoài ra, nếu bạn sở hữu MacBook đời mới thì TrackPad còn được tích hợp tính năng Force Touch. Đây là tính năng xuất hiện trên iPhone và đã được đưa vào MacBook. Bạn có thể nhấn mạnh xuống TrackPad để thực hiện nhiều tính năng như xem trước nội dung link trong Safari, tua nhanh chậm video trong QuickTime,…)
Hướng dẫn sử dụng MacBook: Các phím tắt thông dụng
Điều bạn cần biết khi được hướng dẫn sử dụng MacBook là các phím tắt thông dụng. Những thao tác trên MacBook sẽ trở nên nhanh chóng hơn bao giờ hết với phím tắt. Đa số các phím tắt trên MacBook sẽ giống Windows. Có điều bạn cần thay phím Ctrl thành phím Cmd trên MacBook.
Các phím tắt cơ bản giúp cách dùng MacBook tiện lợi hơn
The Unarchiver là phần mềm hữu ích để giải nén file
Để tải The Unarchiver, bạn truy cập vào logo AppStore ở thanh Dock. Nhập vào khung tìm kiếm với từ khóa “The Unarchiver”. Chọn ứng dụng và nhấn Cài đặt để cài đặt ứng dụng.
Bạn có thể dùng The Unarchiver làm ứng dụng mặc định để sau này tiết kiệm thời gian giải nén file. Nhấn chuột phải tại 1 file nén bất kỳ. Chọn Get Info. Tại mục Open With bạn chọn ứng dụng mặc định là The Unarchiver. Chọn vào Change All để áp dụng là xong. Từ giờ bạn chỉ cần nhấn vào file nén là có thể giải nén được rồi!
Một thao tác khác mà người dùng khi tìm hướng dẫn sử dụng MacBook sẽ cần đến chính là cách đánh tiếng Việt. Trên macOS thì không có Vietkey hay Unikey. Vậy làm thế nào để gõ tiếng Việt trên MacBook? Về cơ bản, bạn không cần cài đặt ứng dụng gõ tiếng Việt vào MacBook đâu. Trong hệ điều hành macOS đã có sẵn bộ gõ của nhiều ngôn ngữ rồi. Bạn chỉ cần kích hoạt chúng mà thôi.
Cần biết cách gõ tiếng Việt khi tìm hướng dẫn sử dụng MacBook
Sau khi cài đặt xong, bạn chỉ cần nhấn vào biểu tượng lá cờ ở trên thanh Menu bar để thay đổi bàn phím. Chọn Vni hoặc Telex là xong rồi!!
Cập nhật thông tin chi tiết về Hướng Dẫn Dùng Visual Studio Code Căn Bản trên website Utly.edu.vn. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Chúc bạn một ngày tốt lành!