Trong hướng dẫn này, bạn sẽ học cách tận dụng Visual Studio Code để tăng cường quy trình phát triển của mình.

Bài viết này được viết cho những người mới bắt đầu sử dụng Visual Studio Code lần đầu tiên. VS Code, như thường được biết đến, được coi là một trình soạn thảo mã “nhẹ”. So với các trình soạn thảo môi trường phát triển tích hợp đầy đủ (IDE) chiếm hàng gigabyte dung lượng đĩa, VS Code sử dụng ít hơn 200MB khi cài đặt.

Mặc dù có thuật ngữ “nhẹ”, Visual Studio Code cung cấp một số lượng lớn các tính năng liên tục tăng và cải thiện với mỗi bản cập nhật mới. Đối với hướng dẫn này, chúng tôi sẽ đề cập đến các tính năng được sử dụng phổ biến nhất. Mỗi lập trình viên đều có bộ công cụ của riêng họ mà họ luôn cập nhật bất cứ khi nào phát hiện ra quy trình công việc mới. Nếu bạn muốn tìm hiểu mọi công cụ và tính năng mà VS Code phải cung cấp, hãy xem tài liệu chính thức. Ngoài ra, bạn có thể muốn theo dõi cập nhật cho các tính năng mới và cải tiến.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, bạn cần phải thành thạo ít nhất một ngôn ngữ lập trình và khuôn khổ. Bạn cũng cần thành thạo với việc lập phiên bản mã dự án của mình với git. Bạn cũng sẽ cần phải có tài khoản với nền tảng lưu trữ từ xa như GitHub. Tôi khuyên bạn nên thiết lập SSH để kết nối với repo từ xa của bạn.

Chúng tôi sẽ sử dụng một Tiếp theo.js dự án trình diễn các tính năng của VS Code. Nếu bạn chưa quen với điều này, đừng lo lắng, vì khung và ngôn ngữ được sử dụng không phải là trọng tâm cho hướng dẫn này. Các kỹ năng được dạy ở đây có thể được chuyển sang bất kỳ ngôn ngữ và khuôn khổ nào mà bạn đang làm việc.

Một chút về lịch sử

Nếu bạn mới làm quen với lập trình, tôi khuyên bạn nên bắt đầu với một trình soạn thảo văn bản đơn giản như Windows NotePad. Đây là trình soạn thảo văn bản cơ bản nhất và không cung cấp bất kỳ hình thức trợ giúp nào. Ưu điểm chính của việc sử dụng nó là nó buộc bạn phải ghi nhớ cú pháp ngôn ngữ và thực hiện thụt lề của riêng bạn. Khi bạn đã viết mã thoải mái, hãy nâng cấp lên trình soạn thảo văn bản tốt hơn, chẳng hạn như NotePad ++ là bước hợp lý tiếp theo. Nó cung cấp một chút trợ giúp mã hóa cần thiết với các tính năng như tô màu cú pháp, tự động thụt lề và tự động hoàn thành cơ bản. Điều quan trọng khi học lập trình là không bị choáng ngợp với quá nhiều thông tin và sự trợ giúp.

Khi bạn đã quen với việc có trải nghiệm viết mã tốt hơn, đã đến lúc nâng cấp. Cách đây không lâu, đây là những môi trường phát triển tích hợp đầy đủ được cung cấp:

Các nền tảng này cung cấp quy trình phát triển hoàn chỉnh, từ mã hóa đến thử nghiệm và triển khai. Chúng chứa rất nhiều tính năng hữu ích như phân tích mã và đánh dấu lỗi. Chúng cũng chứa nhiều tính năng hơn mà nhiều nhà phát triển không sử dụng, mặc dù chúng rất cần thiết cho một số nhóm. Do đó, các nền tảng này chiếm nhiều dung lượng đĩa và khởi động chậm. Nhiều nhà phát triển ưa thích sử dụng các trình soạn thảo văn bản nâng cao như emacs và khí lực để viết mã của họ vào.

Chẳng bao lâu, một loạt các trình soạn thảo mã độc lập với nền tảng bắt đầu xuất hiện. Chúng nhẹ và cung cấp nhiều tính năng hầu như chỉ dành riêng cho IDE. Tôi đã liệt kê chúng bên dưới theo thứ tự chúng được phát hành:

Các nhà phát triển Mac đã có quyền truy cập vào TextMate được phát hành vào tháng 2004 năm XNUMX. Hệ thống đoạn trích được sử dụng bởi tất cả các trình soạn thảo ở trên có nguồn gốc từ TextMate. Sau khi sử dụng tất cả chúng, tôi cảm thấy rằng trình chỉnh sửa sau đó là một cải tiến đáng kể so với trình chỉnh sửa hiện tại. Theo một cuộc khảo sát dành cho nhà phát triển được thực hiện bởi Ngăn xếp tràn vào năm 2019, Visual Studio Code là môi trường phát triển mã phổ biến nhất với 50.7% sử dụng. Visual Studio IDE đứng thứ hai và NotePad ++ đứng thứ ba.

Đó là đủ lịch sử và số liệu thống kê cho bây giờ. Hãy đi sâu vào cách sử dụng các tính năng của Visual Studio Code.

Thiết lập và cập nhật

Trình cài đặt gói của Visual Studio Code nhỏ hơn 100MB và tiêu thụ ít hơn 200MB khi được cài đặt đầy đủ. Khi bạn truy cập tải về , hệ điều hành của bạn sẽ tự động được phát hiện và liên kết tải xuống chính xác sẽ được đánh dấu.

Cập nhật VS Code rất dễ dàng. Nó hiển thị lời nhắc thông báo bất cứ khi nào bản cập nhật được phát hành. Đối với người dùng Windows, bạn sẽ phải nhấp vào thông báo để tải xuống và cài đặt phiên bản mới nhất. Quá trình tải xuống diễn ra trong nền khi bạn đang làm việc. Khi nó đã sẵn sàng để cài đặt, một lời nhắc khởi động lại sẽ xuất hiện. Nhấp vào đây sẽ cài đặt bản cập nhật cho bạn và khởi động lại VS Code.

Đối với các bản phân phối dựa trên Ubuntu, nhấp vào cập nhật thông báo sẽ chỉ cần mở trang web để bạn tải xuống trình cài đặt mới nhất. Một cách dễ dàng hơn nhiều chỉ đơn giản là chạy sudo apt update && sudo apt upgrade -y. Thao tác này sẽ cập nhật tất cả các gói Linux đã cài đặt bao gồm Visual Studio Code. Lý do điều này hoạt động là vì VS Code đã thêm repo của nó vào sổ đăng ký repo gói của bạn trong quá trình cài đặt ban đầu. Bạn có thể tìm thấy thông tin repo trên đường dẫn này: /etc/apt/sources.list.d/vscode.list.

Giao diện người dùng

Đầu tiên chúng ta hãy làm quen với giao diện người dùng:

nguồn hình ảnh

Giao diện người dùng của Visual Studio Code được chia thành năm khu vực chính mà bạn có thể dễ dàng điều chỉnh.

• Thanh hoạt động: cho phép bạn chuyển đổi giữa các chế độ xem: thám hiểm, tìm kiếm, kiểm soát phiên bản, gỡ lỗi và tiện ích mở rộng.
• Thanh bên: chứa khung nhìn đang hoạt động.
• Biên tập viên: đây là nơi bạn chỉnh sửa tệp và xem trước tệp đánh dấu. Bạn có thể sắp xếp nhiều tệp đang mở cạnh nhau.
• Bảng điều khiển: hiển thị các bảng khác nhau: thiết bị đầu cuối tích hợp, bảng đầu ra cho thông tin gỡ lỗi, lỗi và cảnh báo.
• Trạng thái: hiển thị thông tin về dự án và tệp đang mở. Cũng chứa các nút để thực hiện các hành động kiểm soát phiên bản và bật / tắt các tính năng của tiện ích mở rộng.

Ngoài ra còn có đầu Menu Bar nơi bạn có thể truy cập hệ thống menu của trình soạn thảo. Đối với người dùng Linux, thiết bị đầu cuối tích hợp mặc định có thể sẽ là Cú đánh vỏ sò. Đối với người dùng Windows, nó PowerShell. May mắn thay, có một bộ chọn trình bao nằm bên trong trình đơn thả xuống của thiết bị đầu cuối sẽ cho phép bạn chọn một trình bao khác. Nếu được cài đặt, bạn có thể chọn bất kỳ tùy chọn nào sau đây:

• Command Prompt
• PowerShell
• Lõi PowerShell
• Bash Gash
• Bash WSL

Làm việc với các dự án

Không giống như IDE đầy đủ, Visual Studio Code không cung cấp tạo dự án hoặc đề nghị dự án mẫu theo cách truyền thống. Nó chỉ hoạt động với các thư mục. Trên máy phát triển Linux của mình, tôi đang sử dụng mẫu thư mục sau để lưu trữ và quản lý các dự án của mình:

/home/{username}/Projects/{company-name}/{repo-provider}/{project-name}

Sản phẩm Projects thư mục là những gì tôi đề cập đến không gian làm việc. Là một nhà văn và nhà phát triển tự do, tôi phân tách các dự án dựa trên công ty tôi đang làm việc và repo tôi đang sử dụng. Đối với các dự án cá nhân, tôi lưu trữ chúng dưới “tên công ty” hư cấu của riêng mình. Đối với các dự án mà tôi thử nghiệm với mục đích học tập và tôi không có ý định giữ lâu, tôi sẽ chỉ sử dụng một cái tên như play or tuts như một sự thay thế cho {repo-provider}.

Nếu bạn muốn tạo một dự án mới và mở nó trong VS Code, bạn có thể sử dụng các bước sau. Mở một thiết bị đầu cuối và thực hiện các lệnh sau:

$ mkdir vscode-demo
$ cd vscode-demo
# Launch Visual Studio Code
$ code .

Bạn cũng có thể thực hiện việc này trong File Explorer. Khi bạn truy cập menu ngữ cảnh chuột, bạn sẽ có thể mở bất kỳ thư mục nào trong VS Code.

Nếu bạn muốn tạo một dự án mới được liên kết với một repo từ xa, thì việc tạo một dự án trên trang repo sẽ dễ dàng hơn - ví dụ: GitHub or Cai Xô nhỏ.

Ghi lại tất cả các trường đã được điền và chọn. Tiếp theo, đi đến thiết bị đầu cuối và thực hiện như sau:

# Navigate to workspace/company/repo folder
$ cd Projects/sitepoint/github/ # Clone the project to your machine
$ git clone git@github.com:{insert-username-here}/vscode-nextjs-demo.git # Open project in VS Code
$ cd vscode-nextjs-demo
$ code .

Sau khi trình chỉnh sửa bắt đầu và chạy, bạn có thể khởi chạy thiết bị đầu cuối tích hợp bằng phím tắt Ctrl+~ (phím dấu ngã). Sử dụng các lệnh sau để tạo package.json và cài đặt các gói:

# Generate `package.json` file with default settings
$ npm init -y # Install package dependencies
$ npm install next react react-dom

Tiếp theo, mở package.json và thay thế scripts phần với cái này:

"scripts": { "dev": "next", "build": "next build", "start": "next start"
}

Toàn bộ cửa sổ Visual Studio Code sẽ giống như sau:

Trước khi chúng ta xem phần tiếp theo, tôi muốn đề cập rằng VS Code cũng hỗ trợ khái niệm không gian làm việc đa gốc. Nếu bạn đang làm việc với các dự án liên quan - front-end, back-end, docs, v.v. - bạn có thể quản lý tất cả chúng trong một không gian làm việc duy nhất bên trong một trình soạn thảo. Điều này sẽ giúp dễ dàng giữ cho mã nguồn và tài liệu của bạn được đồng bộ hóa.

Kiểm soát phiên bản với Git

Visual Studio Code được tích hợp sẵn với trình quản lý điều khiển nguồn Git. Nó cung cấp một giao diện UI nơi bạn có thể tạo giai đoạn, cam kết, tạo các nhánh mới và chuyển sang các nhánh hiện có. Hãy cam kết những thay đổi mà chúng tôi vừa thực hiện trong dự án của mình. Trên Thanh hoạt động, mở Bảng điều khiển nguồn và xác định vị trí Giai đoạn tất cả các thay đổi nút dấu cộng như hình bên dưới.

Nhấn vào nó. Tiếp theo, nhập thông báo cam kết "Đã cài đặt phụ thuộc next.js", sau đó nhấp vào Cam kết ở trên cùng. Nó có biểu tượng dấu kiểm. Điều này sẽ cam kết các thay đổi mới. Nếu bạn nhìn vào trạng thái nằm ở dưới cùng, bạn sẽ thấy các biểu tượng trạng thái khác nhau ở góc bên trái. Các 0 ↓ nghĩa là không có gì để lấy từ repo từ xa. Các 1 ↑ có nghĩa là bạn đã có một cam kết mà bạn cần đẩy vào kho lưu trữ từ xa của mình. Nhấp vào nó sẽ hiển thị lời nhắc về hành động sẽ diễn ra. Nhấp chuột OK đến pull và push ma cua ban. Điều này sẽ đồng bộ hóa repo cục bộ của bạn với repo từ xa.

Để tạo một chi nhánh mới hoặc chuyển sang một chi nhánh hiện có, chỉ cần nhấp vào Tên chi nhánh master trên thanh trạng thái, góc dưới bên trái. Điều này sẽ bật lên một bảng điều khiển chi nhánh để bạn thực hiện một hành động.

Hãy xem các tiện ích mở rộng sau để có trải nghiệm tốt hơn với Git:

Hỗ trợ cho một loại SCM khác, chẳng hạn như SVN, có thể được thêm vào bằng cách cài đặt tiện ích mở rộng SCM có liên quan từ thị trường.

Tạo và chạy mã

trên Thanh hoạt động, quay trở lại Bảng điều khiển Explorer và sử dụng Thư mục mới nút để tạo thư mục pages ở gốc của dự án. Chọn thư mục này và sử dụng Tập tin mới nút để tạo tệp trang / index.js. Sao chép mã sau:

function HomePage() { return <div>Welcome to Next.js!</div>;
} export default HomePage;

Với Bảng điều khiển Explorer, bạn sẽ thấy một phần có tên Tập lệnh NPM. Mở rộng phần này và di chuột qua dev. Một run nút (biểu tượng phát) sẽ xuất hiện bên cạnh nó. Nhấp vào nó và điều này sẽ khởi chạy máy chủ nhà phát triển Next.js bên trong Thiết bị đầu cuối tích hợp.

Sẽ mất vài giây để quay lên. Sử dụng Ctrl + Nhấp chuột trên URL http://localhost:3000 để mở nó trong trình duyệt của bạn. Trang sẽ mở thành công khi hiển thị thông báo "Chào mừng". Trong phần tiếp theo, chúng ta sẽ xem xét cách chúng ta có thể thay đổi tùy chọn Visual Studio Code.

Cài đặt Người dùng và Không gian làm việc

Để truy cập cài đặt tùy chọn Mã VS, hãy sử dụng phím tắt Ctrl + ,. Bạn cũng có thể truy cập nó thông qua lệnh menu như sau:

• Trên Windows / Linux - Tập tin > Sở thích (Preferences) > Cài đặt
• Trên macOS - Mã > Sở thích (Preferences) > Cài đặt

Theo mặc định, một Trình chỉnh sửa cài đặt giao diện đồ họa sẽ xuất hiện. Nó giúp người dùng thực hiện các thay đổi đối với tùy chọn dễ dàng, vì có hàng nghìn cài đặt có thể chỉnh sửa được. Các Trình chỉnh sửa cài đặt cung cấp tên và mô tả thân thiện với người dùng cho chức năng của mỗi cài đặt. Ngoài ra, các cài đặt liên quan đã được nhóm lại với nhau và có một thanh tìm kiếm để định vị cài đặt cụ thể.

Khi thay đổi cài đặt bằng trình chỉnh sửa, hãy chú ý đến phạm vi hoạt động ở trên cùng. Lưu ý rằng không phải tất cả các cài đặt đều có thể được cấu hình thông qua giao diện đồ họa. Đối với điều đó, bạn phải chỉnh sửa tệp settings.json trực tiếp. Khi bạn cuộn xuống Trình chỉnh sửa cài đặt, bạn sẽ gặp một lối tắt sẽ đưa bạn đến tệp này.

Có hai phạm vi khác nhau mà cài đặt Visual Studio Code được phân loại theo:

• User Settings: Cài đặt được lưu trữ trong tài khoản người dùng. Chúng sẽ có hiệu lực trên tất cả các dự án mà bạn đang làm.
• Không gian làm việc: Cài đặt được lưu trữ trong thư mục dự án hoặc không gian làm việc. Chúng sẽ chỉ áp dụng trong dự án cụ thể đó.

Tùy thuộc vào nền tảng của bạn, bạn có thể tìm cài đặt người dùng của VS Code ở các vị trí sau:

• Windows: %APPDATA%CodeUsersettings.json
• hệ điều hành Mac: $HOME/Library/Application Support/Code/User/settings.json
• Linux: $HOME/.config/Code/User/settings.json

Trong Không gian làm việc, chỉ cần tạo một thư mục .vscode ở gốc của dự án của bạn. Sau đó tạo tệp settings.json bên trong thư mục này. Nếu làm việc với Trình chỉnh sửa cài đặt , nó sẽ tự động thực hiện việc này cho bạn khi bạn thay đổi cài đặt trong Không gian làm việc phạm vi. Đây là một tập hợp con các cài đặt chung mà tôi muốn làm việc với:

{ "editor.minimap.enabled": false, "window.openFoldersInNewWindow": "on", "diffEditor.ignoreTrimWhitespace": false, "files.trimTrailingWhitespace": true, "javascript.updateImportsOnFileMove.enabled": "always", "workbench.editor.enablePreview": false, "workbench.list.openMode": "doubleClick", "window.openFilesInNewWindow": "default", "editor.formatOnPaste": true, "editor.defaultFormatter": "esbenp.prettierVS Code", "editor.formatOnSave": true, "editor.tabSize": 2, "explorer.confirmDelete": false
}

Tôi có xu hướng làm việc với nhiều dự án đồng thời, do đó thiết lập window.openFoldersInNewWindow cho phép tôi mở các thư mục dự án mới mà không cần đóng (thay thế) thư mục đang hoạt động. Đối với editor.defaultFormatter, Tôi đã đặt nó thành Đẹp hơn, là một tiện ích mở rộng mà tôi đã cài đặt. Chúng ta sẽ thảo luận điều này trong phần sau ngay sau đây. Tiếp theo, hãy xem xét các liên kết ngôn ngữ.

Hiệp hội ngôn ngữ

Tôi thực hiện rất nhiều dự án bằng React. Gần đây, hầu hết các khuôn khổ React tạo ra các thành phần sử dụng .js phần mở rộng thay vì .jsx. Do đó, định dạng và tô màu cú pháp trở thành một vấn đề khi bạn bắt đầu viết mã JSX. Để khắc phục điều này, bạn cần liên kết .js tập tin với JavaScriptReact. Bạn có thể dễ dàng làm điều này bằng cách thay đổi Chế độ ngôn ngữ thông qua Ctrl + sự thay đổi + P bảng lệnh. Bạn cũng có thể cập nhật settings.json bằng cách thêm cấu hình này:

{ "files.associations": { "*.js": "javascriptreact" }
}

Lần tới khi bạn mở tệp JS, nó sẽ được coi là tệp React JSX. Tôi đã chỉ định điều này trong cài đặt chung của mình vì tôi thường làm việc với các dự án React. Thật không may, làm điều này phá vỡ một tính năng tích hợp có tên là Emmet. Đây là một plugin phổ biến giúp các nhà phát triển tự động điền mã HTML và CSS một cách rất trực quan. Bạn có thể khắc phục sự cố này bằng cách thêm cấu hình sau vào settings.json:

{ "emmet.includeLanguages": { "javascript": "javascriptreact" }
}

Lần tới khi bạn gặp sự cố khi kích hoạt Emmet cho một phần mở rộng tệp hoặc ngôn ngữ cụ thể, hãy kiểm tra xem liệu nó có thể được giải quyết hay không bằng cách thêm liên kết ngôn ngữ vào emmet.includeLanguages. Để biết thêm thông tin, hãy xem tài liệu chính thức cho VS Code Emmet.

Phím tắt

Cho đến nay, chúng tôi đã đề cập đến hai phím tắt:

• Ctrl + ,: Mở cài đặt
• Ctrl + sự thay đổi + P: Mở bảng lệnh

Sản phẩm Palette lệnh cung cấp quyền truy cập vào toàn bộ chức năng của Visual Studio Code bao gồm các phím tắt cho các thao tác thông thường. Nếu bạn cài đặt tiện ích mở rộng, mọi hành động được kích hoạt thủ công sẽ được liệt kê ở đây. Tuy nhiên, đối với các tiện ích mở rộng như Đẹp hơn và Tô điểm, họ sẽ sử dụng cùng một Định dạng chỉ huy. Visual Studio Code cũng có plugin định dạng tích hợp riêng. Để chỉ định plugin nào sẽ thực thi hành động, bạn cần đi tới Trình chỉnh sửa cài đặt và thay đổi Định dạng mặc định cấu hình. Đây là một ví dụ về cách tôi thiết lập nó trong của tôi:

{ "editor.defaultFormatter": "esbenp.prettierVS Code"
}

Bạn cũng có thể chỉ định một định dạng khác cho một chế độ ngôn ngữ cụ thể. Dưới đây là một số phím tắt khác mà bạn cần ghi nhớ:

• Ctrl + P sẽ cho phép bạn điều hướng đến bất kỳ tệp hoặc biểu tượng nào bằng cách nhập tên của nó
• Ctrl + Tab sẽ chuyển bạn qua tập hợp tệp cuối cùng được mở
• Ctrl + sự thay đổi + O sẽ cho phép bạn điều hướng đến một biểu tượng cụ thể trong một tệp
• Ctrl + G sẽ cho phép bạn điều hướng đến một dòng cụ thể trong tệp

Dưới đây là các lệnh yêu thích của tôi mà tôi thường sử dụng khi viết mã:

• Ctrl + D: nhấn nhiều lần để chọn các từ khóa giống nhau. Khi bạn bắt đầu nhập, nó sẽ đổi tên tất cả các từ khóa đã chọn
• Ctrl + sự thay đổi + Lên xuống: Thêm Con trỏ bên trên hoặc bên dưới để chỉnh sửa nhiều dòng cùng một lúc
• Khác + sự thay đổi + Nhấp chuột: Thêm Con trỏ tại nhiều vị trí để chỉnh sửa đồng thời các phần mã khác nhau
• Ctrl + J: Thêm 2 hoặc nhiều dòng thành một. Hoạt động hoàn hảo nếu bạn có trình định dạng đang hoạt động khi bạn chỉnh sửa mã
• Ctrl + F: Tìm kiếm từ khóa trong tệp hiện tại
• Ctrl + H: Tìm kiếm và thay thế trong tệp hiện tại
• Ctrl + sự thay đổi + F: Tìm kiếm trong tất cả các tệp

Nếu bạn truy cập Menu tùy chọn, bạn sẽ tìm thấy các phím tắt cho hầu hết các lệnh. Cá nhân tôi chưa bao giờ quen với một số phím tắt mặc định đi kèm với Visual Studio Code do sử dụng các trình soạn thảo như Atom trong một thời gian dài. Giải pháp mà tôi tìm thấy chỉ đơn giản là cài đặt sơ đồ bàn phím nguyên tử. Điều này cho phép tôi sử dụng phím tắt Ctrl + để chuyển đổi Thanh bên. Nếu bạn muốn tự mình chỉnh sửa các ràng buộc bàn phím, chỉ cần đi tới menu bên dưới Tập tin > Sở thích (Preferences) > Phím tắt. (Mã > Sở thích (Preferences) > Phím tắt trên macOS).

Các tính năng của trình soạn thảo mã

Trong phần này, chúng ta sẽ nhanh chóng xem xét các tính năng thân thiện với nhà phát triển khác nhau mà Visual Studio Code cung cấp để giúp bạn viết mã nhanh hơn, sạch hơn và dễ bảo trì hơn.

thông minh

Đây là một tính năng phổ biến còn được gọi là “hoàn thành mã” hoặc tự động hoàn thành. Ngoài ra, VS Code cung cấp Intellisense cho:

• JavaScript, TypeScript
• HTML
• CSS, SCSS và ít hơn

Khi bạn nhập mã của mình, một cửa sổ bật lên với danh sách các tùy chọn khả thi sẽ xuất hiện. Bạn nhập càng nhiều, danh sách càng ngắn. Bạn có thể nhấn đăng ký hạng mục thi or Tab khi từ khóa dự định của bạn được đánh dấu để tự động hoàn thành mã của bạn. Ép Esc sẽ xóa cửa sổ bật lên. Chèn một . ở cuối một từ khóa hoặc nhấn Ctrl + phím cách sẽ kích hoạt cửa sổ bật lên IntelliSense xuất hiện.

Nếu bạn đang làm việc với một ngôn ngữ không được hỗ trợ ngoài hộp, bạn có thể cài đặt một tiện ích mở rộng ngôn ngữ từ thị trường để kích hoạt IntelliSense cho ngôn ngữ lập trình mong muốn của bạn. Kiểm tra tài liệu chính thức để tìm hiểu thêm về cách bạn có thể tùy chỉnh IntelliSense.

Đoạn trích

Nhập mã lặp lại chẳng hạn như if báo cáo, for vòng lặp và khai báo thành phần có thể hơi mệt mỏi. Bạn có thể thấy mình sao chép và dán mã để hoạt động nhanh hơn. May mắn thay, Visual Studio Code cung cấp một tính năng được gọi là Snippets, mà chỉ đơn giản là các mẫu mã. Ví dụ: thay vì nhập console.log, chỉ loại log và IntelliSense sẽ nhắc bạn chèn đoạn mã.

Có rất nhiều đoạn mã bạn có thể truy cập miễn là bạn đã ghi nhớ tốc ký hoặc từ khóa kích hoạt chèn đoạn mã. Vì bạn mới làm quen với điều này, bạn có thể truy cập danh sách tất cả các đoạn mã có sẵn qua Palette lệnh > Chèn đoạn mã:

Cuộn lên và xuống để xem toàn bộ danh sách. Hãy lưu ý rằng hầu hết các đoạn mã đều có các tab cho phép bạn thay thế các phần mã có liên quan khi bạn chèn chúng. Bạn có thể tìm thấy nhiều tiện ích mở rộng đoạn mã hơn trên thị trường. Bạn cũng có thể tạo của riêng bạn. Điều này bài viết chỉ cho bạn cách làm cả hai. Bạn có thể kiểm tra tài liệu chính thức để biết thêm thông tin về cách xác định các đoạn mã của riêng bạn.

Định dạng

Thông thường, khi nhập hoặc dán mã từ các nguồn khác nhau, chúng ta có xu hướng kết hợp các kiểu mã hóa. Ví dụ:

• thụt lề bằng dấu cách so với tab
• kết thúc bằng dấu chấm phẩy
• dấu ngoặc kép hoặc dấu ngoặc kép

Định dạng rất quan trọng vì nó làm cho mã có thể đọc được. Tuy nhiên, có thể tốn thời gian khi bạn gặp phải các phần lớn mã chưa được định dạng. May mắn thay, Visual Studio Code có thể thực hiện định dạng cho bạn bằng một lệnh duy nhất. Bạn có thể thực hiện lệnh định dạng thông qua Palette lệnh. Visual Studio Code hỗ trợ định dạng cho các ngôn ngữ sau:

• JavaScript
• TypeScript
• JSON
• HTML

Bạn có thể tùy chỉnh hành vi định dạng của Visual Studio Code bằng cách thay đổi các cài đặt sau thành true or false:

• editor.formatOnType: định dạng dòng sau khi nhập
• editor.formatOnSave: định dạng tệp khi lưu
• editor.formatOnPaste: định dạng nội dung đã dán

Tuy nhiên, các bộ định dạng tích hợp có thể không phù hợp với phong cách viết mã của bạn. Nếu bạn đang làm việc với các framework như React, Vue hoặc Angular, bạn sẽ thấy rằng các bộ định dạng tích hợp có xu hướng làm rối mã của bạn. Bạn có thể khắc phục điều này bằng cách tắt định dạng cho một ngôn ngữ cụ thể:

"html.format.enable": false

Tuy nhiên, giải pháp tốt nhất là cài đặt tiện ích mở rộng định dạng từ thị trường. Yêu thích của tôi là [Prettier] (https://marketplace.visualstudio.com/items?itemName=esbenp.prettierVS Code), vì nó hỗ trợ rất nhiều ngôn ngữ bao gồm:

• Luồng · JSX · JSON
• CSS · SCSS · Ít hơn
• Vue · Góc cạnh
• GraphQL · Đánh dấu · YAML

Sau khi cài đặt nó, bạn sẽ cần đặt nó làm định dạng mặc định:

{ "editor.defaultFormatter": "esbenp.prettierVS Code", "[javascript]": { "editor.defaultFormatter": "esbenp.prettierVS Code" }
}

Bạn cũng nên cài đặt prettier gói cục bộ dưới dạng phụ thuộc nhà phát triển:

npm install prettier -D --save-exact

Các tùy chọn định dạng mặc định Prettier thực thi có thể phù hợp với bạn. Nếu không, bạn có thể tùy chỉnh bằng cách tạo .prettierrc tệp cấu hình tại thư mục gốc của dự án hoặc trong thư mục chính của bạn. Bạn có thể đặt các quy tắc định dạng tùy chỉnh của mình tại đây. Đây là một ví dụ:

{ "trailingComma": "all", "tabWidth": 2, "semi": false, "singleQuote": true
}

Vui lòng kiểm tra khác phần mở rộng định dạng. Tuy nhiên, bạn sẽ thấy Prettier là phổ biến nhất.

lót

A Xơ, hoặc là kẻ nói dối là một công cụ phân tích mã của bạn và kiểm tra lỗi cú pháp, các vấn đề về kiểu dáng, lệnh gọi đến các biến chưa được khai báo, việc sử dụng các hàm không dùng nữa, sử dụng sai phạm vi và nhiều vấn đề khác. Visual Studio Code không đi kèm với bất kỳ Linter nào. Tuy nhiên, nó giúp bạn dễ dàng thiết lập một ngôn ngữ lập trình mà bạn đang sử dụng. Ví dụ: nếu bạn đang làm việc trên dự án Python mới, bạn sẽ nhận được nhanh chóng để cài đặt một cái cho bạn. Bạn cũng có thể mở Palette lệnh (Ctrl + sự thay đổi + P) và chọn Python: Chọn Linter chỉ huy.

Đối với JavaScript, bạn sẽ cần cài đặt một tiện ích mở rộng như Tiếng Anh cái nào phổ biến nhất. Phần mở rộng này yêu cầu bạn cài đặt ESLint như một phần phụ thuộc của nhà phát triển. Bạn cũng có thể cần một hoặc nhiều plugin ESLint sẽ giúp bạn phù hợp với phong cách mã hóa và khuôn khổ mà bạn đang sử dụng. Bạn có thể kiểm tra của chúng tôi hướng dẫn về cách cấu hình ESLint. Ngoài ra còn có các dụng cụ linter bạn có thể kiểm tra. Khuyến nghị của tôi là sử dụng ESLint vì nó dễ định cấu hình hơn và hỗ trợ nhiều kiểu và khung JavaScript hơn.

Khi bạn đã thiết lập công cụ linting, VS Code sẽ tự động linting mã của bạn mỗi khi bạn lưu tệp. Bạn cũng nên cập nhật package.json tập lệnh để bao gồm một lệnh để chạy công cụ lint.

Gỡ lỗi

Nếu bạn sử dụng câu lệnh in để gỡ lỗi, bạn nên dừng và hủy danh sách vì có một cách tốt hơn để gỡ lỗi mã của bạn. Với VS Code, bạn có thể đặt các điểm ngắt và kiểm tra các biến trong khi mã của bạn đang chạy.

nguồn hình ảnh

Kiểm tra của chúng tôi hướng dẫn gỡ lỗi các dự án JavaScript với VS Code và Chrome Debugger để được hướng dẫn từng bước về cách gỡ lỗi mã của bạn.

Tổng kết

Bây giờ chúng ta đã đến phần cuối của hướng dẫn. Như đã lưu ý trước đó, thông tin ở đây sẽ giúp bạn bắt đầu cải thiện quy trình viết mã của mình với Visual Studio Code. Tôi khuyên bạn nên xem của chúng tôi 10 tiện ích mở rộng phải có hàng đầu cho VS Code. Trong khi hầu hết các công cụ VS Code đều dễ học và tích hợp vào quy trình làm việc của bạn, những công cụ khác cần một thời gian để tìm hiểu và làm quen. Tuy nhiên, nắm vững các tính năng của VS Code sẽ giúp bạn trở thành một nhà phát triển phần mềm hiệu quả và tốt hơn.

Nếu bạn muốn đạt đến đỉnh cao tuyệt đối về hiệu suất làm việc với Visual Studio Code, hãy xem Mã Visual Studio: Công cụ sửa lỗi và chỉnh sửa đầu cuối dành cho nhà phát triển web. Đó là một cuốn sách tuyệt vời của Wiley mà bạn có thể đọc trực tuyến (hoặc tắt!) Trong thư viện Premium của chúng tôi.

Nguồn: https://www.sitepoint.com/visual-studio-code-power-user-guide/?utm_source=rss