Cách sử dụng mã Visual Studio

Visual Studio Code, VSCode cho bạn bè, là một trình soạn thảo cực kỳ mạnh mẽ đang ngày càng phổ biến. Tìm hiểu lý do và các tính năng chính của nó dành cho nhà phát triển

Giới thiệu

Kể từ đầu, các biên tập viên là một con thú kỳ lạ. Một số người bảo vệ sự lựa chọn biên tập viên của họ một cách gay gắt. Trong thế giới Unix, bạn có nhữngEmacsvsvi"Chiến tranh", và tôi tưởng tượngtại saorất nhiều thời gian dành để tranh luận về lợi thế của cái này so với cái khác.

Tôi đã sử dụng rất nhiều trình chỉnh sửa và IDE trong vài năm qua. Tôi có thể nhớ TextMate, TextWrangler, Espresso, BBEdit, XCode, Coda, Brackets, Sublime Text, Atom, vim, PHPStorm. Sự khác biệt giữa IDE và trình soạn thảo chủ yếu nằm ở bộ tính năng và độ phức tạp.

Tôi phần lớn thích một trình soạn thảo hơn IDE, vì nó nhanh hơn và ít gây cản trở hơn.

Trong 12 tháng qua, tôi đã sử dụng VS Code, trình soạn thảo Mã nguồn mở của Microsoft và nó nhanh chóng trở thành trình soạn thảo yêu thích của tôi.

Tôi có nên chuyển sang VS Code không? Và tại sao?

Nếu bạn đang tìm kiếm gợi ý về việc có nên sử dụng nó hay không, hãy để tôi nóiĐúng, bạn nên chuyển sang nó từ bất kỳ trình soạn thảo nào khác mà bạn đang sử dụng bây giờ.

Trình chỉnh sửa này được xây dựng dựa trên kinh nghiệm biên tập hàng chục năm của Microsoft.

Mã của trình soạn thảo hoàn toàn là Mã nguồn mở và không cần thanh toán để sử dụng nó.

Nó sử dụngĐiện tửlàm cơ sở của nó, cho phép nó hoạt động trên nhiều nền tảng và hoạt động trên Mac, Windows và Linux. Nó được xây dựng bằng cách sử dụng Node.js và bạn có thể mở rộng nó bằng cách sử dụng JavaScript (điều này làm cho nó trở thành một chiến thắng cho tất cả các nhà phát triển JavaScript chúng tôi).

nó làNhanh, dễ dàng là trình soạn thảo nhanh nhất mà tôi đã sử dụng sau Sublime Text.

Nó đã giành được sự nhiệt tình của cộng đồng: có hàng nghìnphần mở rộng, một số chính thức và một số do cộng đồng tạo ra, và nóthắng cuộc khảo sát.

Microsoft phát hành bản cập nhật hàng tháng. Các bản cập nhật thường xuyên thúc đẩy sự đổi mới và Microsoft đang lắng nghe người dùng của mình, đồng thời giữ cho nền tảng ổn định nhất có thể (tôi nên nói rằng tôi chưa bao giờ gặp sự cố với VS Code trong 1 năm sử dụng nó hàng ngày gần như cả ngày).

Bắt đầu

Trang chủ của Visual Studio Code trên internet làhttps://code.visualstudio.com/.

Truy cập trang web đó để tải xuống bản phát hành ổn định mới nhất của trình chỉnh sửa.

VS Code site

Quá trình cài đặt phụ thuộc vào nền tảng và bạn nên quen với nó.

Khi bạn khởi động trình chỉnh sửa lần đầu tiên, bạn sẽ thấy màn hình chào mừng:

Welcome screen for VS Code

Có một thanh công cụ bên trái với 5 biểu tượng. Điều đó cho phép truy cập vào:

  • Trình khám phá tệp
  • Tìm kiếm
  • Kiểm soát nguồn
  • Trình gỡ lỗi
  • Các phần mở rộng

nhà thám hiểm

Hãy bắt đầu khám phá với thám hiểm (dự định chơi chữ).

VS Code Explorer

Nhấn nút “Mở thư mục” trong thanh bên hoặcOpen folder...liên kết trong trang Chào mừng. Cả hai sẽ kích hoạt chế độ xem bộ chọn tệp.

Chọn một thư mục mà bạn có mã nguồn hoặc thậm chí chỉ là các tệp văn bản và mở nó.

VS Code sẽ hiển thị nội dung thư mục đó trong chế độ xem của bạn:

Opened folder

Ở bên phải, giao diện trống hiển thị một số lệnh để thực hiện một số thao tác nhanh và phím tắt của chúng.

Nếu bạn chọn một tệp ở bên trái, tệp đó sẽ mở trên bảng điều khiển chính:

Files list

và nếu bạn bắt đầu chỉnh sửa nó, hãy nhận thấy một dấu chấm sẽ xuất hiện bên cạnh tên tệp trong tab và cả trong thanh bên:

Editing file

ÉpCMD+Psẽ hiển thị cho bạn một công cụ chọn tệp nhanh chóng để dễ dàng di chuyển tệp trong các dự án lớn:

Quick file picker

Bạn có thể ẩn thanh bên lưu trữ tệp bằng phím tắtCMD+B.

Lưu ý: Tôi đang sử dụng các phím tắt trên Mac. Hầu hết các trường hợp, trên Windows và Linux, bạn chỉ cần thay đổi CMT thành CTRL và nó hoạt động, nhưng không phải lúc nào cũng vậy. In của bạntham chiếu phím tắt.

Biểu tượng thứ hai trên thanh công cụ là “Tìm kiếm”. Nhấp vào nó sẽ hiển thị giao diện tìm kiếm:

Search

Bạn có thể nhấp vào các biểu tượng để phân biệt chữ hoa chữ thường tìm kiếm, để đối sánh toàn bộ các từ (không phải chuỗi con) và để sử dụng biểu thức chính quy cho chuỗi tìm kiếm.

Để thực hiện tìm kiếm, nhấnenter.

Nhấp vào biểu tượng ▷ ở bên trái để bật công cụ tìm kiếm và thay thế.

Nhấp vào 3 dấu chấm sẽ hiển thị một bảng cho phép bạn chỉ bao gồm một số loại tệp cụ thể và loại trừ các tệp khác:

Search and replace

Kiểm soát nguồn

Tab Kiểm soát nguồn được bật bằng cách nhấp vào biểu tượng thứ ba trên thanh công cụ.

Source control

VS Code đi kèm với hỗ trợ Git. Trong trường hợp này, thư mục mà chúng tôi đã mở không được khởi tạo kiểm soát nguồn.

Nhấp vào biểu tượng đầu tiên ở trên cùng, với biểu tượng Git, cho phép chúng tôi khởi tạo kho lưu trữ Git:

Git repo is initialized

CácUbên cạnh mỗi tệp có nghĩa là nó đã được cập nhật kể từ lần cam kết cuối cùng (vì chúng tôi chưa bao giờ thực hiện một lần cam kết ngay từ đầu nên tất cả các tệp đều được cập nhật).

Tạo cam kết đầu tiên bằng cách viết tin nhắn văn bản và nhấnCmd-Enterhoặc nhấp vào biểu tượng ✔︎ ở trên cùng.

First commit

Tôi thường đặt điều này để tự động phân giai đoạn các thay đổi khi tôi thực hiện chúng.

Biểu tượng 3 chấm, khi được nhấp vào, cung cấp rất nhiều tùy chọn để tương tác với Git:

Git options

Trình gỡ lỗi

Biểu tượng thứ tư trên thanh công cụ sẽ mở trình gỡ lỗi JavaScript. Điều này xứng đáng có một bài báo của riêng mình. Trong thời gian chờ đợi, hãy kiểm tratài liệu chính thức.

Tiện ích mở rộng

Biểu tượng thứ năm đưa chúng ta đến các tiện ích mở rộng.

Extensions

Các tiện ích mở rộng là một trong những tính năng tuyệt vời của VS Code.

Chúng có thể cung cấp nhiều giá trị đến nỗi bạn chắc chắn sẽ phải sử dụng hàng tấn chúng.

Tôi đã cài đặt rất nhiều tiện ích mở rộng.

Một điều cần nhớ là mọi tiện ích mở rộng bạn cài đặt sẽ ảnh hưởng (ít nhiều) đến hiệu suất của trình soạn thảo của bạn.

Bạn có thể tắt tiện ích mở rộng mà bạn cài đặt và chỉ bật khi bạn cần.

Bạn cũng có thể tắt tiện ích mở rộng cho một không gian làm việc cụ thể (chúng ta sẽ nói về không gian làm việc sau). Ví dụ: bạn không muốn bật các tiện ích mở rộng JavaScript trong dự án Go.

Có một danh sách các tiện ích mở rộng được đề xuất, bao gồm tất cả các công cụ phổ biến nhất.

Recommended extensions

Vì tôi chỉnh sửa rất nhiều tệp đánh dấu cho blog của mình, VS Code gợi ý cho tôimarkdownlinttiện ích mở rộng, cung cấp tính năng kiểm tra cú pháp và linting cho các tệp Markdown.

Ví dụ, hãy cài đặt nó.

Đầu tiên, tôi kiểm tra số lượt xem. Nó là 1,2 triệu, rất nhiều! Và các đánh giá là tích cực (4.55). Nhấp vào tên tiện ích mở rộng sẽ mở thông tin chi tiết ở bên phải.

Extension details

Nhấn nút Cài đặt màu xanh lá cây sẽ bắt đầu quá trình cài đặt, quá trình này rất đơn giản. Nó làm mọi thứ cho bạn và bạn chỉ cần nhấp vào nút “Tải lại” để kích hoạt nó, về cơ bản sẽ khởi động lại cửa sổ trình chỉnh sửa.

Làm xong! Hãy kiểm tra nó bằng cách tạo một tệp đánh dấu có lỗi, chẳng hạn như bị thiếualtthuộc tính trên một hình ảnh. Nó thành công cho chúng tôi biết như vậy:

markdownlint extension

Dưới đây, tôi giới thiệu một số tiện ích mở rộng phổ biến mà bạn không muốn bỏ lỡ và những tiện ích mở rộng tôi sử dụng nhiều nhất.

Nhà ga

VS Code có một thiết bị đầu cuối tích hợp.

Bạn có thể kích hoạt nó từ menuView ➤ Integrated Terminal, hoặc sử dụngCMD+\`và nó sẽ mở với trình bao mặc định của bạn.

The terminal

Điều này rất thuận tiện vì trong phát triển web hiện đại, bạn hầu như luôn có một sốnpmhoặc làyarnquá trình chạy trong nền.

Bạn có thể tạo nhiều tab đầu cuối và hiển thị chúng bên cạnh tab khác, đồng thời xếp chúng ở bên phải thay vì ở cuối cửa sổ:

Multiple terminals

Bảng lệnh

Command Palette là một công cụ rất mạnh mẽ. Bạn kích hoạt nó bằng cách nhấp vàoView ➤ Command Palette, hoặc sử dụngCMD+SHIFT+P

Một cửa sổ phương thức sẽ xuất hiện ở trên cùng, cung cấp cho bạn nhiều tùy chọn khác nhau, tùy thuộc vào plugin bạn đã cài đặt và lệnh nào bạn đã sử dụng sau cùng.

Các hoạt động phổ biến mà tôi thực hiện là:

  • Tiện ích mở rộng: Cài đặt tiện ích mở rộng
  • Sở thích: Chủ đề màu sắcđể thay đổi chủ đề màu sắc (đôi khi tôi thay đổi từ đêm sang ngày)
  • Định dạng tài liệu, định dạng mã tự động
  • Mã vận hành, được cung cấp bởi Code Runner và thực thi các dòng JavaScript được đánh dấu

bạn có thể kích hoạt bất kỳ cái nào trong số đó bằng cách bắt đầu nhập và chức năng tự động hoàn thành sẽ hiển thị cho bạn cái bạn muốn.

Nhớ khi bạn gõCMD+Pđể xem danh sách các tập tin, trước đây? Đó là một phím tắt cho một tính năng cụ thể của Command Palette. Co nhung nguoi khac:

  • Ctrl-Shift-Tabhiển thị cho bạn các tệp đang hoạt động
  • Ctrl-Gmở bảng lệnh để cho phép bạn nhập số dòng để chuyển đến
  • CMD+SHIFT+Ohiển thị danh sách các ký hiệu được tìm thấy trong tệp hiện tại

Ký hiệu gìChúng tôiphụ thuộc vào loại tệp. Trong JavaScript, đó có thể là các lớp hoặc hàm. Trong Markdown, tiêu đề phần.

Chủ đề

Bạn có thể chuyển đổi chủ đề màu được sử dụng bằng cách nhấp vàoCMD-k+CMD-thoặc bằng cách gọiSở thích: Chủ đề màu sắcchỉ huy.

Thao tác này sẽ hiển thị cho bạn danh sách các chủ đề đã được cài đặt:

Themes

bạn có thể nhấp vào một hoặc di chuyển bằng bàn phím và VS Code sẽ hiển thị cho bạn bản xem trước. Nhấp vào enter để áp dụng chủ đề:

Light Theme

Chủ đề chỉ là phần mở rộng. Bạn có thể cài đặt các chủ đề mới bằng cách đi tới trình quản lý tiện ích mở rộng.

Có lẽ điều tốt nhất cho khả năng khám phá là sử dụngtrang web thị trường.

Chủ đề yêu thích của tôi làAyu, mang đến một phong cách tuyệt vời cho bất kỳ thời điểm nào trong ngày, ban đêm, buổi sáng / buổi tối và buổi chiều.

Tùy biến

Chủ đề chỉ là một tùy chỉnh mà bạn có thể thực hiện.

Các biểu tượng thanh bên được gán cho một tệp cũng là một phần quan trọng trong trải nghiệm người dùng tốt đẹp.

Bạn có thể thay đổi những điều đó bằng cách đi tớiPreferences ➤ File Icon Theme. Ayu đi kèm với chủ đề biểu tượng của riêng nó, hoàn toàn phù hợp với màu chủ đề:

Ayu Light

Tất cả những tùy chỉnh chúng tôi đã thực hiện cho đến nay, chủ đề và chủ đề biểu tượng, được lưu vào tùy chọn của người dùng.

Đi đếnPreferences ➤ Settings(cũng có thể truy cập quaCMD-,) để xem chúng:

Settings

Chế độ xem hiển thị các cài đặt mặc định ở bên trái, để dễ tham khảo và các cài đặt ghi đè ở bên phải. Bạn có thể thấy tên của chủ đề và chủ đề biểu tượng mà chúng tôi đã thiết lập, trongworkbench.colorThemeworkbench.iconTheme.

Tôi đã phóng to bằng cách sử dụngCMD-+và cài đặt này cũng đã được lưu vàowindow.zoomLevel, vì vậy, lần sau VS Code khởi động, nó sẽ ghi nhớ lựa chọn phóng to của tôi.

Bạn có thể quyết định áp dụng một số cài đặt trên toàn cầu, trongThiết lập người dùnghoặc liên quan đến không gian làm việc, trongCài đặt không gian làm việc.

Hầu hết các lần cài đặt đó được tự động thêm bởi tiện ích mở rộng hoặc bởi chính VS Code, nhưng trong một số trường hợp, bạn sẽ trực tiếp chỉnh sửa chúng tại nơi này.

Tùy chọn cấu hình đẹp

VS Code có rất nhiều lựa chọn. Mọi thứ đều có thể cấu hình cao, và đôi khi thật khó để hiểu tất cả.

Bạn có thể mở tệp JSON cấu hình bằng bảng lệnh và chọnOpen Settings (JSON).

Một số tùy chọn cấu hình tốt mà tôi đã đặt trong mã của mình:

Lựa chọn Sự miêu tả
"editor.minimap.enabled": false Xóa bản đồ nhỏ, được hiển thị ở bên phải của trình chỉnh sửa
"explorer.confirmDelete": false Ngừng yêu cầu tôi xác nhận khi tôi muốn xóa tệp (tôi có quyền kiểm soát nguồn!)
"explorer.confirmDragAndDrop": false Tắt xác nhận để kéo và thả
"editor.formatOnSave": true Định dạng mã tự động khi tôi lưu nó
"editor.formatOnPaste": true Định dạng mã tự động khi tôi dán mã vào mã của mình
"javascript.format.enable": true Bật định dạng cho mã JavaScript
"files.trimTrailingWhitespace": true Cắt bỏ khoảng trắng trong tệp
"editor.multiCursorModifier": "alt" Khi nhấp vào phím Alt và nhấp bằng chuột, tôi có thể chọn nhiều dòng
"editor.detectIndentation": true Thích ứng với thụt lề tệp, hữu ích khi chỉnh sửa mã của người khác
"editor.quickSuggestionsDelay": 0 Hiển thị đề xuất mã ngay lập tức, không phải sau vài giây

Phông chữ tốt nhất để viết mã

tôi thíchMã Fira. Nó miễn phí và có một số chữ ghép lập trình rất đẹp, biến đổi các cấu trúc phổ biến như!===>đến các biểu tượng đẹp hơn:

Fira code

Kích hoạt nó bằng cách cài đặt phông chữ và thêm phông chữ này vào cấu hình của bạn:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true`

Không gian làm việc

Tất cả cài đặt Người dùng có thể bị ghi đè trong cài đặt Không gian làm việc. Họ được ưu tiên hơn. Chúng hữu ích, chẳng hạn như khi bạn sử dụng một dự án có quy tắc linting khác với tất cả các dự án khác mà bạn sử dụng và bạn không muốn chỉnh sửa cài đặt yêu thích của mình chỉ cho nó.

Bạn tạo không gian làm việc từ một dự án hiện có bằng cách nhấp vàoFile ➤ Save Workspace as...thực đơn.

Thư mục hiện đang mở sẽ được bật làm thư mục chính của không gian làm việc.

Lần tới khi bạn mở mã VS hoặc bạn chuyển đổi dự án, thay vì mở một thư mục, bạn mở một không gian làm việc và điều đó sẽ tự động mở thư mục chứa mã của bạn và nó sẽ ghi nhớ tất cả các cài đặt bạn đặt cụ thể cho không gian làm việc đó.

Ngoài việc có cài đặt cấp không gian làm việc, bạn có thể tắt tiện ích mở rộng cho một không gian làm việc cụ thể.

Bạn chỉ có thể làm việc với các thư mục cho đến khi bạn có một lý do cụ thể để muốn có một không gian làm việc.

Một lý do chính đáng là khả năng có nhiều thư mục gốc riêng biệt. Bạn có thể dùngFile ➤ Add Folder to Workspaceđể thêm một thư mục gốc mới, thư mục này có thể nằm ở bất kỳ đâu trong hệ thống tệp, nhưng sẽ được hiển thị cùng với thư mục hiện có khác mà bạn đã có.

Chỉnh sửa

IntelliSense

Khi bạn chỉnh sửa bằng một trong các ngôn ngữ được hỗ trợ (JavaScript, JSON, HTML, CSS, Less, Sass, C # vàTypeScript) VS Code có IntelliSense, một công nghệ gợi ý về việc tự động hoàn thành các chức năng và thông số khi bạn nhập chúng.

Định dạng mã

Hai lệnh tiện dụng (Format DocumentFormat Selection) có sẵn trên Bảng lệnh để tự động định dạng mã. VS Code theo mặc định hỗ trợ định dạng tự động cho HTML, JavaScript, TypeScript và JSON.

Lỗi và cảnh báo

Khi bạn mở một tệp, bạn sẽ thấy ở bên phải một thanh có một số màu. Những màu đó chỉ ra một số vấn đề trong mã của bạn. Ví dụ, đây là những gì tôi thấy ngay bây giờ:

Warnings

Đó là al cảnh báo hoặc lỗi. Bạn có thể cố gắng tìm chúng trong mã, nơi bạn thấy các phần được gạch chân màu đỏ hoặc bạn cũng có thể nhấnCMD-Shift-M(hoặc chọnView ➤ Problems)

View problems

Các phím tắt bàn phím

Tôi đã chỉ cho bạn rất nhiều phím tắt cho đến nay.

Việc ghi nhớ tất cả chúng bắt đầu trở nên phức tạp, nhưng chúng là một công cụ hỗ trợ năng suất tốt. Tôi khuyên bạn nên in bảng gian lận phím tắt chính thức, đểMac,Linuxcác cửa sổ.

Keymaps

Nếu bạn đã quen với các phím tắt từ các trình soạn thảo khác, có thể do bạn đã làm việc với một trình soạn thảo trong một thời gian dài nên bạn có thể sử dụng sơ đồ bàn phím.

Nhóm VS Code cung cấp sơ đồ bàn phím cho các trình soạn thảo phổ biến nhất hiện nay: vim, Sublime Text, Atom, IntelliJ, Eclipse và hơn thế nữa. Chúng có sẵn dưới dạng plugin. Bằng cách mởPreferences ➤ Keymaps Extensionsthực đơn.

Đoạn mã

Đoạn trích rất hay.

Đối với mọi ngôn ngữ bạn có thể đang phát triển, có các tiện ích mở rộng cung cấp các đoạn mã tạo sẵn để bạn sử dụng.

Đối với JavaScript / React, một trong những phổ biến làĐoạn mã VS Code ES7 React / Redux / React-Native / JS

Bạn chỉ cần gõrfe, nhấn TAB và điều này xuất hiện trong trình chỉnh sửa của bạn:

import React from 'react'

const $1 = props => { return <div>$0</div> }

export default $1

có rất nhiều phím tắt và chúng tiết kiệm rất nhiều thời gian. Không chỉ từ cách gõ, mà còn từ việc tra cứu cú pháp chính xác.

Bạn cũng có thể xác định đoạn trích của riêng mình. Nhấp chuộtPreferences ➤ User Snippetsvà làm theo hướng dẫn để tạo tệp đoạn trích của riêng bạn.

Phần mở rộng trưng bày

  • GitLens: hình dung ai đã thực hiện thay đổi cuối cùng đối với một dòng mã của bạn và điều này xảy ra khi nào
  • Lịch sử Gittrực quan hóa và tìm kiếm lịch sử Git
  • CSS Peekcho phép bạn xem và chỉnh sửa các định nghĩa CSS bằng cách kiểm tra lớp của một phần tử HTML. Rất tiện dụng.
  • Người chạy mãcho phép bạn chạy các đoạn mã mà bạn chọn trong trình chỉnh sửa và hơn thế nữa. Hỗ trợ nhiều ngôn ngữ.
  • Trình gỡ lỗi cho Chromecho phép bạn gỡ lỗi mã JavaScript đang chạy trong trình duyệt bằng trình gỡ lỗi mã VS.
  • Bộ chỉnh màu cặp giá đỡthuận tiện cho việc hình dung phần cuối của dấu ngoặc trong mã của bạn.
  • Indent-Rainbowtô màu các mức thụt lề của mã của bạn.
  • Đẹp hơnkiểm tra của tôiHướng dẫn đẹp hơn
  • ESLintkiểm tra của tôiHướng dẫn ESLint
  • IntelliSense cho CSStính năng tự động hoàn thành được cải thiện cho CSS dựa trên các định nghĩa không gian làm việc của bạn
  • npmcho phépnpmcác chức năng tiện ích từ bảng lệnh
  • Tự động đóng thẻtự động đóng các thẻ HTML / JSX / *
  • Tự động đổi tên thẻtự động đổi tên thẻ đóng khi bạn thay đổi thẻ mở và ngược lại

Lệnh VS Code CLI

Mở bảng lệnh và tìm kiếminstall 'code' command in PATHchỉ huy.

Nhấn enter vàcodelệnh sẽ có sẵn trên toàn cầu trong dòng lệnh của bạn.

Điều này rất hữu ích để khởi động trình chỉnh sửa và mở một cửa sổ mới với nội dung của thư mục hiện tại, vớicode ..

code -nsẽ tạo một cửa sổ mới.

Một điều hữu ích mà không phải lúc nào cũng biết là VS Code có thể nhanh chóng hiển thị sự khác biệt giữa hai tệp, vớicode --diff file1.js file2.js.

Giải quyết các vấn đề CPU sử dụng cao

Tôi đã gặp phải vấn đề sử dụng CPU cao và quạt quay, với một dự án có nhiều tệp trongnode_modules. Tôi đã thêm cấu hình này và mọi thứ trông bình thường trở lại:

  "files.exclude": {
    "/.git": true,
    "/.DS_Store": true,
    "/node_modules": true,
    "/node_modules/": true
  },
  "search.exclude": {
    "/node_modules": true
  },
  "files.watcherExclude": {
    "/node_modules/": true
  },

Các hướng dẫn khác dành cho devtools: