Giống như những newbie khác, tôi cũng lựa chọn Notepad++ làm trình soạn thảo code đầu tiên của mình. Đây có lẽ là một trong những IDE đơn giản nhất cho lập trình. Dần dần nhu cầu tăng lên, tôi đã thử dùng Brackets, Atom, sau đó là Visual Studio Code.Và cuối cùng thì VSCode đã trở thành trình soạn thảo yêu thích của tôi. Nó gây ấn tượng với tôi bởi giao diện người dùng hiện đại, nhiều tiện ích mở rộng, cũng như các tính năng tuyệt vời như built-in Git và terminal.Mục đích chính của blog này không phải để so sánh các IDE khác nhau, mà là để thảo luận về kinh nghiệm của tôi với VSCode. Vì vậy, trong bài này, tôi sẽ đi vào cụ thể từng khía cạnh sau:

Giới thiệu ngắn gọn về VSCodeCác theme trong VSCodeCác tiện ích mở rộngCách tôi tận dụng các tính năng của VSCode để nâng cao hiệu suất làm việc của mình.

VSCode là gì?

Visual Studio Code (VSCode) là một trình soạn thảo mã nguồn do Microsoft phát triển có thể chạy trên Windows, macOS và Linux. Nó hoàn toàn miễn phí, open-source và cung cấp hỗ trợ gỡ lỗi cũng như kiểm soát phiên bản Git tích hợp, đánh dấu cú pháp, đoạn mã, v.v. Giao diện người dùng của VSCode có khả năng tùy biến cao, vì người dùng có thể chuyển sang các chủ đề, phím tắt và tùy chọn khác nhau.VSCode ban đầu được công bố vào năm 2015 dưới dạng một dự án mã nguồn mở được lưu trữ trên GitHub trước khi phát hành lên web một năm sau đó. Kể từ đó, trình soạn thảo mã của Microsoft đã trở nên phổ biến nhanh chóng.Trong Khảo sát của Stack Overflow 2018, VSCode được xếp hạng là môi trường phát triển phổ biến nhất với khoảng 35% trong số hơn 100.000. Tuyệt vời hơn, con số này chiếm khoảng 39% trong lĩnh vực phát triển web.Và với các bản cập nhật hàng tháng, người dùng có thể mong đợi được tận hưởng trải nghiệm tuyệt vời hơn – các bản sửa lỗi, tính ổn định và tăng hiệu suất thường xuyên được đẩy mạnh.

Theme: Màu sắc và font chữ

Nếu bạn cũng quan tâm đến theme của IDE và quan niệm theme đẹp mắt mới mang lại cảm giác thoải mái khi code, thì bạn giống tôi đấy. Với tôi, việc tìm một phông chữ và màu chủ đề thích hợp là rất quan trọng. Cá nhân tôi thích một chủ đề tối và ghét phông chữ Consolas mặc định của VSCode trên Windows.Vì vậy, chủ đề Monokai và phông chữ FiraCode là lựa chọn hiện tại của tôi. Sự kết hợp này mang lại độ tương phản cao mà tôi thấy rất dễ chịu khi làm việc.

 

*

 

Để cài đặt chủ đề, nhấp vào biểu tượng Setting => Color Theme => Chọn chủ đề mà bạn thíchBạn cũng có thể thử OneDarkPro, một chủ đề khá đẹp.

Các tiện ích mở rộng (Extensions => Search => Install)

Đây là một số tiện ích mở rộng yêu thích của tôi:

Bracket Pair Colorizer:cho phép xác định các dấu ngoặc vuông bằng màu sắc

 

*

 

 

*

 

HTML Snippets: thêm hỗ trợ ngôn ngữ phong phú cho HTML Markup chẳng hạn như thẻ tự động đóng.Live Server: khởi chạy máy chủ cục bộ với các tính năng tải lại trực tiếp cho trang web HTML hoặc PHP của bạnMarkdown Preview Enhanced: chạy máy chủ trực tiếp cho tệp đánh dấu của bạn.Prettier: định dạng đẹp hơn cho các đoạn mã JavaScript / TypeScript / CSS của bạn.

Tùy chọn UI

 

*

 

Bạn có thể tùy chỉnh hầu hết mọi thứ, từ font-family và font-size của code đến chiều cao dòng, bằng cách:

Đi tới User Settings (Ctrl + ,)Tìm kiếm các từ khóa liên quan đến tùy chỉnh mong muốn của bạnNhấp vào nút Edit ở phía bên trái của cài đặt và chọn Replace trong Cài đặtThay đổi giá trị của cài đặt bạn vừa chọn.

Hiện tại tôi cài đặt fontSize thành 14, lineHeight thành 22 và tabSize thành 3.

Những điều giá mà tôi biết sớm hơn

Ngoài các chủ đề và tiện ích mở rộng này, tôi muốn chia sẻ với bạn cách tôi sử dụng các tính năng tuyệt vời của VSCode để tăng năng suất. Đây là tất cả những điều mà tôi không biết khi mới bắt đầu và điều đó sẽ rất hữu ích cho việc tận dụng và tạo điều kiện thuận lợi cho quy trình làm việc của tôi.

Integrated Terminals

Bạn càng dành nhiều thời gian cho việc phát triển phần mềm, thì Terminal càng trở nên quan trọng. Là một nhà phát triển JavaScript, tôi sử dụng Terminal để cài đặt các packages, chạy máy chủ hoặc thậm chí đẩy các thay đổi trong kho lưu trữ hiện tại lên GitHub.Lúc đầu, tôi chủ yếu thực hiện các tác vụ đó với Windows Command Prompt hoặc Git Bash. Nếu bạn sử dụng Windows, thì bạn có thể biết CMD có thể gây phiền toái và khó chịu như thế nào. Git Bash là một công cụ tuyệt vời, nhưng việc chuyển đổi giữa các ứng dụng khi bạn đang làm việc không thực sự là một trải nghiệm thú vị.VSCode thực sự giải quyết vấn đề này cho tôi với terminal tuyệt vời của nó.

Bạn đang xem: Visual studio code là gì

Xem thêm: Uk Là Gì – Và Uk Là Những Nước Nào, ở đâu

Xem thêm: Mrs Là Gì – Phân Biệt Giữa Miss, Mrs

Và điều thú vị là bạn có thể dễ dàng thiết lập nó hoạt động giống như Git Bash, nhưng ngay bên trong VSCode! Vậy là bạn có một sự kết hợp không thể hợp lý hơn.Để truy cập VSCode terminal, hãy sử dụng Ctrl + `(phía bên trái của phím 1 của bạn). Sau đó, Terminal sẽ bật lên.

 

*

 

Từ đây, bạn có thể làm rất nhiều điều thú vị như tạo một terminal mới hoặc xoá terminal hiện có. Bạn cũng có thể tách ra hoặc để chúng bên cạnh nhau để xem.

 

*

 

Source Control (Git)

 

*

 

Khi bạn đang làm việc trên một kho lưu trữ và liên tục cần thực hiện các thay đổi, bạn thường tìm đến terminal để thực hiện các thay đổi gần đây đúng không? VSCode cung cấp cho bạn một công cụ tích hợp tuyệt vời để kiểm soát các phiên bản của bạn.Bằng cách nhấp vào biểu tượng Git ở bên trái hoặc sử dụng Ctrl + Shift + G (Windows), bạn có thể dễ dàng truy cập Source Control. Tại đây, bạn có thể thực hiện tất cả các thao tác với Git. Thật tiện lợi phải không?

VSCode đã giúp tôi cải tiến năng suất làm việc như thế nào?

Sau một khoảng thời gian làm việc với VSCode, tôi thực sự tin rằng giá trị cốt lõi của nó là đáp ứng nhiều tính năng ngay trong một môi trường. Tất cả các nhu cầu của tôi đều được VSCode đáp ứng một cách hoàn hảo.

 

*

 

Giả sử tôi có một số ý tưởng làm việc trên một ứng dụng Music được tạo bởiReact. Tôi thường bắt đầu một dự án bằng cách tạo một thư mục trống tên là music_react. Sau đó, tôi có thể mở ngay dự án này trong VSCode chỉ bằng một cú nhấp chuột.Khi tôi đang trong dự án làm việc của mình, tôi có thể nhanh chóng tạo tệp và thư mục bằng các phím tắt trong bảng điều khiển bên trái.Trong dự án này, tôi muốn sử dụng tính năng create-react-appvì vậy tôi sẽ cần cài đặt package đó. Tôi mở terminal của mình bằng cách gõ Ctrl + `. Thật ngạc nhiên, terminal tự động điều hướng đến thư mục chính xác của tôi. Không cần phải thay đổi thư mục nữa.Sau khi nhập dòng lệnh để cài đặt gói npm, tất cả những gì tôi cần làm là đợi cho đến khi tất cả các dependenciesđược cài đặt.

 

*

 

 

*

 

Tôi cũng muốn xuất bản dự án của mình trên GitHub, vì vậy, có lẽ lúc đầu tôi nên khởi tạo kho lưu trữ Git. Sau khi các gói được cài đặt, tôi gõ lệnh khởi tạo Git ngay trong terminal của mình.

 

*

 

Khi Git được cài đặt thành công, tôi có thể commit tất cả các thay đổi đang chờ xử lý ngay trong Source Control phía bên trái.Sau đó, tôi có thể tiếp tục làm việc với dự án của mình như bình thường. Bên cạnh đó, tôi có thể đẩy tất cả các thay đổi sang GitHub từ terminal của mình nếu tôi muốn.

Kết

Vậy đó là quy trình làm việc bình thường của tôi trong môi trường VSCode. Điều này có thể có chút thay đổi tuỳ thuộc vào cách làm việc của bạn. Một nhà phát triển back-end có thể có quy trình làm việc hoàn toàn khác so với của tôi.Tuy nhiên, nếu bạn là nhà phát triển front-end mới biết về VSCode và bạn muốn được review trước thì hy vọng rằng bài viết này cung cấp cho bạn cái nhìn sâu sắc và giúp nâng cao năng suất của bạn. Rốt cuộc, nguồn cảm hứng lớn nhất của tôi để viết hướng dẫn nhỏ này là vì tôi thực sự không thể tìm thấy bất kỳ đánh giá kỹ lưỡng nào về VSCode cho người mới. Do đó, hy vọng bài viết có thể mang lại giá trị cho bạn.

Chuyên mục: Hỏi Đáp