Đề Xuất 2/2023 # Hướng Dẫn Dùng Visual Studio Code Căn Bản # Top 3 Like | Thaiphuminh.com

Đề Xuất 2/2023 # Hướng Dẫn Dùng Visual Studio Code Căn Bản # Top 3 Like

Cập nhật nội dung chi tiết về Hướng Dẫn Dùng Visual Studio Code Căn Bản 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ừ 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

Visual Studio Code: Code Editor Yêu Thích Mới Của Tôi

Visual Studio Code

Trong những năm qua, tôi đã sử dụng một loạt các Code Editor khác nhau; TextMate, Coda, Sublime Text, Atom, và mỗi cái có những ưu điểm và nhược điểm khác nhau. Tuy nhiên, Visual Studio Code thì tôi đã hoàn toàn bị thuyết phục cho đến lúc này, vì vậy chúng ta hãy xem một số tính năng của nó.

Bắt đầu bằng cách tải về phiên bản cho hệ thống của bạn (Windows, Mac OS, Linux) tại chúng tôi (dĩ nhiên là nó miễn phí).

UI

Một trong những lý do tôi rất thích Visual Studio Code là giao diện của nó; nó thực sự đơn giản.

Nó có một vài thanh sidebar, mà có thể được bố trí bên trái hoặc bên phải theo ý thích của bạn. Cái đầu tiên cung cấp cho bạn một số biểu tượng để chuyển đổi giữa các bảng điều khiển. Từ Explorer, Search, Git, Debug, và Extensions. Vào View để thay đổi kiểu hiển thị (full screen, zen mode, vân vân).

Di chuyển chuột lên trên Explorer nó sẽ cung cấp cho chúng ta một vài lựa chọn: New File, New Folder, Refresh và Collapse All. Nhấp chuột phải mang đến một menu ngữ cảnh.

Command Palette

Nhấn Shift-Command-P để bật Command Palette.

Trong bảng điều khiển này bạn có thể tìm kiếm bất cứ điều gì bạn thích ví dụ như những hành động nhanh chóng và dễ dàng; lệnh Git, thay đổi theme, cài đặt extension-đều có thể được thực hiện thông qua Command Palette.

Tương tự, Command-P sẽ bật bảng Go to file….

Terminal

Nhấn Command-` sẽ mở terminal tích hợp sẵn, cái mà tôi rất thích.

Điều này sẽ mở ra terminal trực tiếp trong thư mục gốc của dự án của bạn, giúp bạn tiết kiệm việc phải điều chuyển. Nhấp vào dấu + mở thêm cửa sổ terminal có thể được hoán đổi từ menu thả xuống. Tất cả điều này cung cấp một tính năng thực sự hữu ích, đặc biệt là nếu bạn sử dụng compiler khi viết code.

Git

Một tính năng khác mà tôi là một fan hâm mộ lớn là sự tích hợp Git. Những thay đổi bạn thực hiện trong các tập tin của bạn được đánh dấu khác để bạn biết chính xác những gì đang xảy ra:

Trong hình ở trên, bạn có thể thấy thanh thông báo nói với tôi một sự thay đổi chưa được commit, sự thay đổi được liệt kê trong bảng điều khiển Git, và một dòng đánh dấu chỉ cho tôi nơi thay đổi trong chính tập tin.

VSC cũng sẽ hiển thị phiên bản so sánh nằm cạnh nhau, chỉ để cho thêm rõ ràng.

Các lệnh Git tiêu chuẩn khác chẳng hạn như sync, pull, và vân vân, có sẵn trong bảng điều khiển Git.

Emmet (Zen Coding)

Tin tốt: Emmet đã được tích hợp vào VSC. Không cần cài đặt hoặc cấu hình, bạn chỉ cần bắt đầu sử dụng nó (với Tab là phím nóng mặc định để kích hoạt các đoạn snippet của bạn) ngay sau khi bạn mở editor.

Đa trỏ chuột

Khi bạn đánh dấu một mẫu code trong tập tin của bạn, VSC sẽ tự động đánh dấu tất cả các chuỗi tương tự. Bạn có thể nhấn Command-D để thêm một con trỏ đến phần tiếp theo, hoặc Shift-Command-L để thêm một con trỏ đến tất cả trường hợp. Chỉnh sửa hàng loạt, một cách dễ dàng.

Cài đặt

Trang cài đặt trong VSC là rất trực quan. Giống như Sublime Text, các thiết lập được lưu trữ trong một tập tin (JSON trong trường hợp này) cho phép bạn duyệt qua tất cả các giá trị mặc định. Bằng cách nhấn vào biểu tượng edit bên cạnh mỗi cài đặt, bạn sẽ sao chép nó vào một tập tin tùy biến, nơi bạn có thể tạo ra thay đổi:

Nhấn Save và xem các thay đổi có hiệu lực ngay lập tức.

IntelliSense

IntelliSense là một tính năng bên trong VSC mà tôi đã rất muốn thử ngay khi lần đầu tiên mở Editor. Đó là một tính năng tự động hoàn tác được cải tiến, trợ lý cú pháp và hơn những gì bạn mong đợi về tính năng này.

Di chuyển chuột lên trên CSS selector sẽ cung cấp cho bạn một ví dụ về cách bạn có thể sử dụng HTML tương ứng (rất hữu ích cho người mới bắt đầu):

Di chuyển chuột lên trên các thuộc tính sẽ hiện ra tài liệu hướng dẫn về những gì chúng thực hiện, và giá trị màu sắc được đưa vào một bảng màu nho nhỏ để cho bạn thấy chúng xuất hiện như thế nào trên màn hình. Những gợi ý khi bạn gõ code cũng cực kỳ tốt.

Extension

Ngoài theme mặc định, còn có một marketplace rất lớn (hiện đang miễn phí) với các theme sẵn có, cộng với các extension với tất cả các thể loại để bạn thoả sức sử dụng.

Tổng kết

Đó chỉ là tổng hợp một số tính năng yêu thích của tôi trong Visual Studio Code, ngoài ra nó còn có rất nhiều, rất nhiều tính năng có sẵn để đề cập. Với kinh nghiệm của tôi trong việc sử dụng VSC đến nay, tôi chỉ có thể nói rằng nó rất tích cực. Trước đây tôi đã sử dụng Atom, và tôi không hối tiếc khi thực hiện một sự chuyển đổi. Tất nhiên, bạn có thể không đồng ý với tôi, nhưng theo ý kiến cá nhân của tôi, bạn sẽ không sai khi tải về và dùng thử Code Editor này.

Liên kết hữu ích

Hướng Dẫn Căn Bản Sử Dụng Unikey 3.6

Hướng dẫn căn bản sử dụng UNIKEY 3.6-RC1 hay 4.0 RCI

****/ download unikey : www.unikey.org or http://sourceforge.net/projects/unikey/files/unikey-win/4.0-Beta/Uk40BSetup.exe/download

Hướng dẫn căn bản sử dụng UNIKEY 4.0 RC1 I- Sau khi bạn đã cài đặt Unikey 4.0-RC1 xong (chạy file chúng tôi hoặc chúng tôi , bạn nhìn xuống góc dưới và bên phải của màn hình (desktop) sẽ có xuất hiện chữ V màu đỏ (còn gọi là thanh Task bar): (xem hình 1) – Nhấn chuột vào chữ V đỏ, nó sẽ chuyễn thành chữ E đỏ: · Chữ V đỏ báo hiệu cho bạn biết computer đang ở chế độ gõ tiếng Việt. · Chữ E đỏ báo hiệu cho bạn biết computer đang ở chế độ gõ tiếng Anh. (có nghĩa là giống như chưa có cài đặt Unikey vào máy) Lưu ý: Khi đang ở chế độ gõ tiếng Việt (V), kiểu gõ VNI. bạn nên nhớ khi cần nhập Password cho email hoặc v.v….., khi cần gõ các con số dính liền với chữ, hãy gõ vào các nhóm keys (phím) số nằm sát rìa bên phải của bàn phím (keyboard), lý do: Thí dụ password của bạn là: langnhan12, nếu dùng các phím số nằm phía trên của các phím ký tự (chữ), bạn sẽ bị vô tình gõ thành langnhàn (langnhan gõ nối thêm số 1 thành langnhán, gõ nối thêm số 2 lại thành langnhàn) !!!. Chúng tôi đã rất gặp rất nhiều trường hợp than vản rằng: ?Tui bảo đảm gõ đúng y chang password mà vẫn không … vào được (log in / sign in)?. * Như vậy muốn tránh tình trạng vừa nêu, 1- Xin các bạn nên tạo thói quen khi gõ con số nên dùng cụm phím số bên phải bàn phím 2- (hoặc) Nhấn chuột vào chữ V (Vietnamese) để đổi thành chữ E (English).. * Cho dù bạn dùng kiểu gõ TELEX thì cũng rắc rối khi bạn gõ Password là Taa15, sẽ bị đổi thành Tá15.

Hình 2 Như bạn thấy trong hình 2 trên, nếu nhấn chuột (trái) vào dòng ?Bảng điều khiển… [CS+F5], bạn sẽ thấy xuất hiện ?Hộp điều khiển? như hình sau (Hình 3):

Hình 3 * Nhấn chuột vào nút chữ nhật ?Mở rộng? như trong hình, bạn sẽ có hình ?Hộp điều khiển đầy đũ mở rông? như hình 4 sau đây:

Hướng Dẫn Sử Dụng Google Data Studio

Ở bài viết trước, BAC đã giới thiệu đến các bạn Google data studio là gì? Ở bài viết tiếp theo này BAC tiếp tục giới thiệu đến các bạn chuỗi hướng dẫn sử dụng cơ bản google data studio.

Để đăng nhập, bạn cần có một tài khoản google (nên sử dụng tài khoản Analytics, Search Console, hoặc Google Ads.), tại trang Data Studio chon phím “Home”- Trang chủ để xem “dashboard”- bảng điều khiển của bạn.

Khám phá bảng điều khiển Data Studio

Nếu bạn đã sử dụng Google Docs, Sheets hoặc Drive trước đây, bảng điều khiển này sẽ khá quen thuộc.

Tại đây bạn có thể truy cập tất cả các báo cáo của mình giống như workbook trong Tableau hoặc Excel.

Đặc biệt bạn có thể lọc theo người sở hữu báo cáo.

2.Nguồn dữ liệu – Data sourses

Nguồn dữ liệu liệt kê ra tất cả các kết nối mà bạn đã tạo giữa Data Studio với nguồn dữ liệu ban đầu của bạn.

Data Studio hiện hổ trợ hơn 500 nguồn dữ liệu khác nhau.

Các nguồn dữ liệu đầu vào của Google Data Studio phổ biến nhất gồm có :

Google Analytics

Google Ads

Google Search Console

Big Query

YouTube Analytics

PostgreSQL

Search Ads 360

Display & Video 360

Nếu bạn sử dụng Google Analytics hoặc Search Console, bạn sẽ cần kết nối riêng từng chế độ xem và thuộc tính. Vì vậy nếu bạn có ba chế độ xem GA cho ba tên miền phụ khác nhau, bạn sẽ cần phải thiết lập ba nguồn dữ liệu khác nhau. Tuy nhiên đừng lo, đây là một quá trình dẽ dàng.

3.Explorer

Explorer là một công cụ thử nghiệm cho phép bạn thử nghiệm và điều chình biểu đồ mà không cần sửa báo cáo của mình. Ví dụ như bạn tạo một bảng trong Data Studio để hiển thị các trang hàng đầu theo tỷ lệ chuyển đổi. Khi nhìn vào bảng này bạn tự hỏi sẽ tìm thấy gì nếu thêm thời gian tải trang trung bình. Khi đó bạn không muốn chỉnh sửa biểu đồ trong báo cáo, vì vậy bạn xuất nó vào Labs – nơi bạn có thể điều chỉnh nó thành nội dung mà bạn muốn. Nếu bạn quyết định biểu đồ mới là có giá trị, bạn có thể dễ dàng xuất nó trở lại vào báo cáo.

4.Tổng quan về sản phẩm

Đến đây bạn sẽ quay lại trang tổng.

5.Report Gallery – Thư viện các bộ sưu tập.

Đây là bộ sưu tập những bản mẫu và ví dụ.

6.Kết nối với dữ liệu

Đây là nơi bạn thêm nguồn dữ liệu. Bạn cũng có thể thêm các nguồn trong chính báo cáo. BAC khuyên bạn nên bắt đầu với Analytics hoặc Search Console.

Nếu bạn muốn theo dõi chính xác với những gì tôi làm, hãy kết nối Tài khoản Google Analytics của bạn với Google Merchanse Store.

Bạn sẽ được nhắc nhở cho phép kết nối. Khi bạn đã thực hiện điều đó, bạn sẽ cần phải chọn một tài khoản. Để hoàn tất việc thiết lập kết nối, hãy nhấp vào “Kết nối” ở góc trên bên trái.

Để ” Field editing in reports” ở chế độ “ON”. Nhưng nếu bạn đang tạo một báo cáo cho khách hàng hoặc thực tập viên và bạn muốn cung cấp cho họ quyền chỉnh sửa mà không từ bỏ quyền kiểm soát hoàn toàn dữ liệu của bạn, bạn có thể tắt nó đi.

Tiếp theo bạn sẽ thấy danh sách các trường dữ liệu trong tài khoản Google Analytics của bạn.

Có rất nhiều thứ chúng ta có thể làm trong bước này: thêm các trường mới, sao chép các trường hiện có, tắt chúng, thay đổi giá trị trường, … nhưng chúng ta cũng có thể thực hiện tất cả những điều đó trong báo cáo và điều đó dễ dàng hơn nhiều nên hãy chuyển nhanh sang bước tiếp theo: Chọn “Created Report” ở phía trên bên phải.

Data Studio sẽ hỏi bạn có muốn chọn một nguồn dữ liệu mới cho báo cáo của bạn hay không – hãy chọn có.

Bạn sẽ nhìn thấy như hình trên. Tiếp đó chọn ” add a chart” ở thanh công cụ. Data Studio sẽ giúp bạn dễ dàng so sánh các loại biểu đồ bằng những ví dụ minh hoạ.

Chọn biểu đồ đầu tiên bên dưới “Time series”. Các kiểu biểu đồ này sẽ cho thấy những biến đổi theo thời gian.

Khi báo cáo của bạn đã có biểu đồ, khung bên phải sẽ thay đổi như sau:

Theo mặc định đơn vị đo lường sẽ là “Date”-“Ngày” nhưng bạn có thể chuyển đổi nó thành bất kỳ đại lượng chỉ thời gian nào như : năm , tháng, giờ …

Data Studio sẽ tự động chọn một số liệu (những gì hiển thị trên trục Y) cho bạn nhưng bạn hoàn toàn có thể chỉnh sửa được. Ví dụ nó được mặc định là “Số lượt xem” nhưng với tôi, tôi muốn hiển thị là “Doanh thu trên một người dùng”

Để sửa đổi, đầu tiên hãy chắc chắn là bạn đã chọn biểu đồ. Sau đó bạn sẽ thấy khung ở bên phải như hình sau :

Bạn có hai tùy chọn để thêm là số liệu hoặc đơn vị tính. Tiếp theo nhấp vào biểu tượng dấu cộng màu xanh da trời, nó sẽ hiển thị hộp tìm kiếm để bạn có thể tìm thấy trường bạn muốn hay bạn có thể kéo một trường từ bên phải vào phần số liệu.

Để xóa một số liệu, chỉ cần di chuột qua nó và nhấp vào biểu tượng X.

Bây giờ hãy để thêm một bảng. Lần này chọn tùy chọn thứ ba.

Biểu đồ mới được mặc định đơn vị tính là “Medium” và số liệu là “Số lượt xem” nhưng tôi sẽ đổi nó thành “Sản phẩm” và ” Mua hàng”

Và tôi nghĩ định dạng bảng này có thể sử dụng trong một số công việc như thay đổi hàng trên mỗi trang từ 100 thành 20 hàng (giúp dễ đọc hơn nhiều) và đánh dấu vào ô để thêm một hàng tóm tắt.

Cuối cùng, chọn “Style” để đến tab “phong cách”. Tại đây, hãy sáng tạo để biểu đồ mang phong cách của riêng bạn.

Tìm hiểu khóa học về SQL và Google data studio: http://www.bacs.vn/vi/khoa-hoc/phan-tich-du-lieu-voi-sql-va-google-data-studio/

Để thấy sản phẩm hoàn thiện, chọn “View” trên ở góc trên cùng, trình duyệt sẽ chuyển từ chế độ chỉnh sửa sang chế độ trình bày.

Bước cuối cùng là đặt tên cho báo cáo của bạn. Chọn “Edit”, nhấp đôi chuột vào tiêu đề (Untitled Report – theo hình) và đổi tên.

Nhu cầu đào tạo doanh nghiệp

là đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức của quốc tế. Ngoài các khóa học public, còn có các khóa học in house dành riêng cho từng doanh nghiệp. Chương trình được thiết kế riêng theo yêu cầu của doanh nghiệp, giúp doanh nghiệp giải quyết những khó khăn và tư vấn phát triển.

Tham khảo chương trình đào tạo:

Biên soạn và tổng hợp nội dung

Bạn đang đọc nội dung bài viết Hướng Dẫn Dùng Visual Studio Code Căn Bản 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!