Những thủ thuật trong bài viết này sẽ giúp cho bạn sử dụng Visual Studio để code phần mềm được thông minh, gọn gàng và sạch sẽ hơn. Thông qua bài viết này, bạn sẽ được làm quen với các tính năng chỉnh sửa, kiểm soát mã nguồn mạnh mẽ và thông minh, cùng những phím tắt hữu ích. Để có cái nhìn tổng quan về chủ đề này bạn hãy tham khảo thêm bài viết hướng dẫn bắt đầu và hướng dẫn sử dụng.

Nếu bạn chưa có Visual Studio Code hãy tải tại đây

  •  Cơ bản

Màn hình giới thiệu của Visual Studio

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Phía dưới cùng bên phải của màn hình giới thiệu có liên kết tới trang giúp bạn có thể tương tác và thử các tính năng cơ bản của Visual Studio. Help > Interactive Playground

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

  • Thủ thuật với – Command Palette

Màn hình chứa bảng lệnh có sẵn mà bạn cần

Phím tắt: Ctrl + Shift + P

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

  • Default keyboard shortcuts (phím tắt mặc định)

Tất cả lệnh nằm trong Command Palette đều có sự liên kết ràng buộc với key (nếu nó tồn tại). Nếu bạn quên một lệnh nào đó, có thể dùng Command Palette để tìm lệnh bạn cần.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

  • Bảng tổng hợp phím tắt trong Visual Studio

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Tải tại đây

  • Mẹo – mở nhanh tệp tin (Quick Open)

Phím tắt: Ctrl + P

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Tips: Gõ ? để xem các lệnh đề xuất.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Gõ các lệnh edit và term sau khoảng trắng sẽ hiển thị một danh sách được thả xuống

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Điều hướng giữa các tệp được mở gần đây

Lặp lại phím tắt Quick Open để xoay vòng nhanh giữa các tệp được mở gần đây.

Mở nhiều file từ Quick Open

Bạn có thể mở nhiều file từ Quick Open bằng cách nhấn phím mũi tên bên phải. Thao tác này sẽ mở file được chọn trong nền và bạn có thể tiếp tục chọn file từ Quick Open.

Điều hướng giữa các Folder được mở gần đây và không gian làm việc(workspaces)

Open Recent

Phím tắt: Ctrl+R

Màn hình chọn nhanh (Quick Pick) thả xuống với danh sách File > Open Recent với các Folder và Workspaces được mở gần đây.

  • Code

Code VS (Visual Studio) có giao diện dòng lệnh mạnh mẽ (CLI) cho phép bạn tùy chỉnh cách khởi chạy trình chỉnh sửa để hỗ trợ các tình huống khác nhau.

  • Đảm bảo Code binary của VS nằm trên đường dẫn của bạn để chỉ cần nhập ‘code’ khởi chạy Code VS. Xem các chủ đề thiết lập cụ thể của nền tảng nếu Code VS được thêm vào đường dẫn môi trường khi cài đặt. (Running VS Code on LinuxmacOSWindows)
# open code with current directory

code .

# open the current directory in the most recently used code window

code -r .

# create a new window

code -n

# change the language

code --locale=es

# open diff editor

code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>

code --goto package.json:10:5

# see help options

code --help

# disable all extensions

code --disable-extensions .

Folder .vscode

Các file cụ thể của workspaces nằm trong một .vscode folder root.

Ví dụ: tasks.json đối với Task Runner và launch.json cho debugger.

Status Bar

Lỗi và cảnh báo

Phím tắt: Ctrl + Shift + M

Nhanh chóng nhảy đến phần cảnh báo và lỗi bên trong project

Chuyển qua lại các lỗi với F8 hoặc Shift + F8

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Bạn có thể lọc các vấn đề theo loại (‘errors’, ‘warnings’) hoặc khớp văn bản.

  • Thủ thuật – Change language mode (Chế độ thay đổi ngôn ngữ)

Phím tắt: Ctrl + KM

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Nếu bạn muốn duy trì ngôn ngữ mới cho file đó, bạn có thể sử dụng lệnh Configure File Association for liên kết để mở rộng file hiện tại với ngôn ngữ đã được cài.

  • Customization

Có rất nhiều điều bạn có thể làm để tùy chỉnh code VS.

Thay đổi theme

  • Thay đổi phím tắt
  • Điều chỉnh cài đặt
  • Thêm xác thực JSON
  • Tạo đoạn trích
  • Cài đặt tiện ích mở rộng

Thay đổi theme

Phím tắt: Ctrl + K hoặc Ctrl + T

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Bạn có thể cài đặt thêm các chủ đề từ phần mở rộng của VS Marketplace.

Ngoài ra, bạn có thể cài đặt và thay đổi chủ đề của icon file của mình

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Keymaps

Bạn đã quen với các phím tắt từ một trình soạn thảo khác? Bạn có thể cài đặt tiện ích mở rộng Keymap mang các phím tắt từ trình chỉnh sửa yêu thích của bạn sang VS. Preferences > Keymap Extensions để xem danh sách hiện tại trên Marketplace. Một số phần mở rộng phổ biến:

Tùy chỉnh phím tắt của bạn

Phím tắt: Ctrl + K Ctrl + S

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Bạn có thể tìm kiếm các phím tắt và thêm các tổ hợp phím của riêng bạn vào file keybindings.json.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Xem thêm Key Bindings for Visual Studio Code

Điều chỉnh cài đặt của bạn

Theo mặc định, VS hiển thị trình chỉnh sửa Settings, bạn có thể tìm thấy các cài đặt được liệt kê bên dưới trong thanh tìm kiếm, nhưng vẫn có thể chỉnh sửa settings.json file bên dưới bằng cách sử dụng lệnh Open Settings (JSON) hoặc bằng cách thay đổi trình chỉnh sửa cài đặt mặc định của mình bằng cài đặt workbench.settings.editor.

Mở User setting settings.json

Phím tắt: Ctrl +,

Thay đổi phông chữ của các thành phần UI khác nhau

// Main editor

"editor.fontSize": 18,

// Terminal panel

"terminal.integrated.fontSize": 14,

// Output panel

"[Log]": {

    "editor.fontSize": 15

}

Thay đổi mức thu phỏng

"window.zoomLevel": 5

Phông chữ

"editor.fontFamily": "Fira Code",

"editor.fontLigatures": true

Tips: Bạn sẽ cần cài đặt phông chữ hỗ trợ chữ ghép chứ. FiraCode là phông chữ phổ biến trong nhóm VS Code

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Auto Save

"files.autoSave": "afterDelay"

Bạn cũng có thể chuyển Auto Save từ menu cấp cao nhất với File > Auto Save.

Format on save

"editor.formatOnSave": true

Format on paste

"editor.formatOnPaste": true

Change the size of Tab characters

"editor.tabSize": 4

Spaces or Tabs

"editor.insertSpaces": true

Render whitespace

"editor.renderWhitespace": "all"

Các ký tự Whitespaces được hiển thị theo mặc định trong lựa chọn văn bản

Ignore files/folders (bỏ qua các file/folder)

Xóa các file/folder khỏi cửa sổ soạn thảo

"files.exclude": {

    "somefolder/": true,

    "somefile": true

}

Xóa các file/folder khỏi kết quả tìm kiếm

"search.exclude": {

    "someFolder/": true,

    "somefile": true

}

Và nhiều tùy chỉnh khác

Cài đặt ngôn ngữ cụ thể

Đối với các cài đặt mà bạn chỉ muốn cho các ngôn ngữ cụ thể, bạn có thể cài đặt theo mã định danh ngôn ngữ. Bạn có thể tìm thấy danh sách các id ngôn ngữ thường được sử dụng trong tham chiếu Định danh ngôn ngữ.

"[languageid]": {

}

Tips: Bạn cũng có thể tạo cài đặt cụ thể cho ngôn ngữ bằng lệnh Configure Language Specific Settings.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Thêm xác thực JSON

Được bật theo mặc định cho nhiều loại tệp. Tạo lược đồ và xác nhận của riêng bạn trong settings.json

"json.schemas": [

    {

        "fileMatch": [

            "/bower.json"

        ],

        "url": "https://json.schemastore.org/bower"

    }

]

hoặc cho một lược đồ được xác định trong không gian làm việc của bạn

"json.schemas": [

    {

        "fileMatch": [

            "/foo.json"

        ],

        "url": "./myschema.json"

    }

]

hoặc một lược đồ tùy chỉnh

"json.schemas": [

    {

        "fileMatch": [

            "/.myconfig"

        ],

        "schema": {

            "type": "object",

            "properties": {

                "name" : {

                    "type": "string",

                    "description": "The name of the entry"

                }

            }

        }

    },

Xem thêm tài liệu JSON

Tiện ích mở rộng

Phím tắt: Ctrl + Shift + X

Tìm extensions

  1. In the VS Code Marketplace.

  2. Tìm kiếm bên trong VS Code trong giao diện Extensions.
  3. Lời khuyên tiện ích mở rộng
  4. Danh sách cộng động: awesome-vscode

Cài đặt tiện ích mở rộng

Trong chế độ xem Extensions, bạn có thể tìm kiếm thông qua thanh tìm kiếm hoặc nhấp vào nút More Actions (…) để lọc và sắp xếp số lượt cài đặt.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Extensions được gợi ý

Trong giao diện Extensions, nhấp vào Show Recommended Extensions trong More Actions (…)

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Tạo extension của riêng bạn

Bạn có quan tâm đến việc tạo phần mở rộng của riêng bạn? Bạn có thể tìm hiểu các thực hiện trong Extension API documentation, và tài liệu đặc biệt documentation on contribution points.

  • configuration
  • commands
  • keybindings
  • languages
  • debuggers
  • grammars
  • themes
  • snippets
  • jsonValidation

Files và folders

Tích hợp thiết bị đầu cuối

Phím tắt: Ctrl + `

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Đọc thêm:

Thanh bên

Phím tắt: Ctrl + B

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Chuyển đổi Panel

Phím tắt: Ctrl + J

Zen Mode

Phím tắt: Ctrl + KZ

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Nhấn Esc 2 lần để thoát Zen Mode

Chỉnh sửa Side by side

Phím tắt: Ctrl+\

Bạn cũng có thể ké/thả các nhóm editor giữa các nhóm.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Chuyển đổi giữa các editor

Phím tắt: Ctrl + 1, Ctrl + 2, Ctrl + 3

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Di chuyển cửa sổ Explorer

Phím tắt: Ctrl + Shift + E

Mở hoặc tạo tệp

Phím tắt: Windows (Ctrl + click) macOS (Cmd + click)

Bạn có thể nhanh chóng mở tệp hoặc hình ảnh, tạo tệp mới bằng cách di chuyển con trỏ đến liên kết tệp và sử dụng Ctrl + click

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Đóng folder đang mở

Phím tắt: Ctrl + F4

Lịch sử điều hướng

  • Navigate entire history: Ctrl+Tab
  • Navigate back: Alt+Left
  • Navigate forward: Alt+Right

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Liên kết tệp tin

Tạo các liên kết ngôn ngữ cho các tệp không được phát hiện chính xác. Ví dụ: nhiều tệp cấu hình có phần mở rộng tập tùy chỉnh thực sự là JSON

"files.associations": {

    ".database": "json"

}

Ngăn chặn viết lỗi

VS code sẽ hiển thị cho bạn một thông báo lỗi khi bạn cố lưu một tệp không thể lưu được vì nó đã thay đổi trên ổ đĩa. Khối VS code lưu tệp để ngăn các thay đổi ghi đè đã được thực hiện bên ngoài trình chỉnh sửa.

Để giải quyết xung đột, nhấp vào hành động Compare trong thông báo lỗi để mở trình chỉnh sửa khác biệt sẽ hiển thị cho bạn nội dung của tệp trên đĩa (bên trái) so với nội dung trong VS code (bên phải)

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Sử dụng các hành động trong thanh công cụ biên tập để giải quyết xung đột. Bạn có thể  Accept các thay đổi của mình và do đó ghi đè mọi thay đổi trên ổ đĩa hoặc Revert  về phiên bản trên ổ đĩa. Revert có nghĩa là những thay đổi của bạn sẽ bị mất.

Lưu ý: Tệp sẽ vẫn bị lỗi và không thể lưu cho đến khi bạn chọn một trong hai hành động để giải quyết xung đột.

Editing hacks

Dưới đây là một lựa chọn các tính năng phổ biến để chỉnh sửa Code. Nếu các phím tắt không phù hợp với bạn, hãy xem xét việc cài đặt extension cho trình chỉnh sửa cũ của bạn.

Tips: Bạn có thể thấy các extension key map được đề xuất trong chế độ xem extension với Ctrl + K Ctrl + M để lọc tìm kiếm @recommended:keymaps.

Lựa chọn nhiều con trỏ

Để thêm con trỏ vào các vị trí tùy ý, chọn một vị trí bằng chuột và sử dụng Alt + Click (Option + click macOS).

Để đặt con trỏ ở trên hoặc dưới vị trí hiện tại, hãy sử dụng:

Phím tắt: Ctrl + Alt + Up hoặc Ctrl + Alt + Down

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Bạn có thể thêm con trỏ bổ sung cho tất cả các lần xuất hiện của các lựa chọn hiện tại với phím tắt Ctrl + Shift + L.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Lưu ý: Bạn cũng có thể thay đổi công cụ sửa đổi thành Ctrl / Cmd để áp dụng nhiều con trỏ với editor.multiCursorModifier setting . Xem Công cụ Multi-cursor Modifier để biết chi tiết.

Nếu bạn không muốn thêm tất cả các lần xuất hiện của lựa chọn hiện tại, bạn có thể sử dụng Ctrl + D thay thế. Điều này chỉ chọn lần xuất hiện tiếp theo sau lần bạn chọn để bạn có thể thêm từng lựa chọn một.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Column (box) selection

Bạn có thể chọn các khối văn bản bằng cách giữ Shift + Alt (Shift + Option trên macOS) trong khi bạn kéo chuột. Một con trỏ riêng sẽ được thêm vào cuối mỗi dòng được chọn.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Bạn cũng có thể sử dụng phím tắt để kích hoạt lựa chọn cột.

{

  "editor.rulers": [20, 40, 60]

}

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Vertical rulers

Nhấn phím Alt cho phép cuộn nhanh trong trình chỉnh sửa và Explorers. Theo mặc định, cuộn nhanh sử dụng hệ số nhân tốc độ 5X nhưng bạn có thể điều khiển hệ số nhân với cài đặt Editor: Fast Scroll Sens Sens (editor.fastScrollSensitivity)

Sao chép dòng lên / xuống 

Phím tắt: Shift + Alt + Up hoặc Shift + Alt + Down

Các lệnh Sao chép dòng lên / xuống không bị ràng buộc trên Linux vì các tổ hợp phím mặc định của VS sẽ xung đột với các tổ hợp phím của Ubuntu, xem thêm tại đây . Bạn vẫn có thể đặt các lệnh editor.action.copyLinesUpAction và editor.action.copyLinesDownAction các phím tắt ưa thích của riêng bạn.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Di chuyển dòng lên và xuống

Phím tắt: Alt + Up hoặc Alt + Down

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Shrink / expand selection

Phím tắt: Shift + Alt + Left hoặc Shift + Alt + Right

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Bạn tìm hiểu thêm tại đây

Go to Symbol in File

Phím tắt: Ctrl + Shift + O

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Bạn có thể nhóm các biểu tượng theo loại bằng cách thêm dấu hai chấm, @:.

Go to Symbol in Workspace

Phím tắt: Ctrl + T

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Outline view

Khung nhìn Outline trong File Explorer (mặc định được thu gọn ở phía dưới) hiển thị cho bạn các ký hiệu của file hiện đang mở.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Điều hướng đến một dòng cụ thể

Phím tắt: Ctrl + G

Hoàn tác vị trí con trỏ

Phím tắt: Ctrl + U

Cắt khoảng trắng dấu

Phím tắt: Ctrl + K Ctrl + X

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Chuyển đổi lệnh văn bản

Bạn có thể thay đổi văn bản đã chọn thành chữ hoa, chữ thường và trường hợp tiêu đề bằng các lệnh Transform từ Command Palette.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Định dạng mã

Mã nguồn được chọn hiện tại: Ctrl + K Ctrl + F

Toàn bộ định dạng tài liệu: Shift + Alt + F

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Code formatting

Phím tắt: Ctrl + Shift + [ và Ctrl + Shift + ]

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Bạn cũng có thể fold / unfold tất cả các vùng trong trình chỉnh sửa bằng Fold All (Ctrl + K Ctrl + 0) và Unfold All (Ctrl + K Ctrl + J).

Chọn dòng hiện tại

Phím tắt: Ctrl + L

Điều hướng đến đầu và cuối tệp

Phím tắt: Ctrl + Home  Ctrl + End

Mở xem trước Markdown

Trong tệp Markdown, sử dụng

Phím tắt: Ctrl + Shift + V

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Chỉnh sửa và xem trước Markdown

Trong tệp Markdown, sử dụng

Phím tắt: Ctrl + K V

Bản xem trước và trình chỉnh sửa sẽ đồng bộ hóa với cuộn của bạn trong cả hai chế độ xem.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

IntelliSense

Ctrl + Space để kích hoạt Suggestions widget.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Bạn có thể xem các phương thức có sẵn, gợi ý tham số, tài liệu ngắn, v.v.

Peek

Chọn một biểu tượng sau đó nhập Alt + F12 . Ngoài ra, bạn có thể sử dụng menu ngữ cảnh.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Go to Definition

Chọn một biểu tượng sau đó nhập F12 . Ngoài ra, bạn có thể sử dụng menu ngữ cảnh hoặc Ctrl + click (Cmd + click macOS).

Bạn có thể quay lại vị trí trước đó bằng lệnh Go > Back hoặc Alt + Left

Go to References

Chọn một biểu tượng sau đó nhập Shift + F12. Ngoài ra, bạn có thể sử dụng menu ngữ cảnh.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Thủ thuật – Rename Symbol

Chọn một biểu tượng rồi nhấn F2. Bạn cũng có thể sử dụng menu ngữ cảnh để thao tác.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Thủ thuật – tìm kiếm và sửa đổi

Bên cạnh việc tìm kiếm và thay thế các biểu thức, bạn cũng có thể tìm kiếm và sử dụng lại các phần của những gì đã khớp, sử dụng các biểu thức thông thường với các nhóm capturing. Bật biểu thức chính quy trong hộp tìm kiếm bằng cách nhấp vào nút Use Regular Expression .* (Alt + R) và sau đó viết biểu thức chính quy và sử dụng dấu ngoặc đơn để xác định nhóm. Sau đó bạn có thể tái sử dụng các nội dung phù hợp trong mỗi nhóm bằng cách sử dụng $1, $2 vv trong Replace field.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

.eslintrc.json

Cài đặt Extension ESLint . Cấu hình linting theo cách bạn muốn. Tham khảo ESLint specification để biết chi tiết về các quy tắc và tùy chọn linting..

Đây là cấu hình để sử dụng ES6.

{

  "env": {

    "browser": true,

    "commonjs": true,

    "es6": true,

    "node": true

  },

  "parserOptions": {

    "ecmaVersion": 6,

    "sourceType": "module",

    "ecmaFeatures": {

      "jsx": true,

      "classes": true,

      "defaultParams": true

    }

  },

  "rules": {

    "no-const-assign": 1,

    "no-extra-semi": 0,

    "semi": 0,

    "no-fallthrough": 0,

    "no-empty": 0,

    "no-mixed-spaces-and-tabs": 0,

    "no-redeclare": 0,

    "no-this-before-super": 1,

    "no-undef": 1,

    "no-unreachable": 1,

    "no-use-before-define": 0,

    "constructor-super": 1,

    "curly": 0,

    "eqeqeq": 0,

    "func-names": 0,

    "valid-typeof": 1

  }

}

Gói .json

Xem IntelliSense cho package.json tệp của bạn.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Cú pháp Emmet

Support for Emmet syntax

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Snippets

Tạo snipptes tùy chỉnh

File > Preferences > User Snippets (Code > Preferences > User Snippets trên macOS), chọn ngôn ngữ và tạo snippet.

"create component": {

    "prefix": "component",

    "body": [

        "class $1 extends React.Component {",

        "",

        "\trender() {",

        "\t\treturn ($2);",

        "\t}",

        "",

        "}"

    ]

},

Xem thêm tại đây.

Diff

Chọn tệp để mở từ khung Source Control.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Thủ thuật tích hợp Git

Phím tắt: Ctrl + Shift + G

Tích hợp Git đi kèm với VS Code “out-of-the-box”. Bạn có thể cài đặt các nhà cung cấp SCM khác từ Marketplace. Phần này mô tả tích hợp Git nhưng phần lớn giao diện người dùng và cử chỉ được chia sẻ bởi các nhà cung cấp SCM khác.

Khác biệt

Từ khung nhìn Source Control, chọn mở một tệp để khác.

Hoặc, nhấp vào nút Open changes ở góc trên bên phải để tìm tệp mở hiện tại.

Thủ thuật chuyển đổi Inline View

Chế độ xem mặc định cho diffs là chế độ xem side by side .

Chuyển đổi Inline View bằng cách nhấp vào nút More Action(…) ở trên cùng bên phải và chọn Toggle Inline View.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Nếu bạn thích chế độ Inline View, bạn có thể đặt “diffEditor.renderSideBySide”: false.

Thủ thuật xem lại khung

Điều hướng qua các khác biệt với F7 và Shift + F7. Điều này sẽ trình bày chúng trong một định dạng patch thống nhất. Các dòng có thể được điều hướng bằng các phím mũi tên và nhấn Enter sẽ nhảy trở lại trong trình chỉnh sửa khác và dòng đã chọn.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Thủ thuật – chỉnh sửa các thay đổi đang chờ xử lý

Bạn có thể chỉnh sửa trực tiếp trong các thay đổi đang chờ xử lý của chế độ diff view.

Branches

Dễ dàng chuyển đổi giữa các nhánh Git thông qua Status Bar.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Staging

Thủ thuật – thay đổi Staging File

Di chuột qua số lượng tệp và nhấp vào nút dấu cộng.

Nhấp vào nút trừ để thay đổi giai đoạn.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Stage selected

Stage selected một phần của fle bằng cách chọn file đó (sử dụng phím mũi tên Lên) sau đó chọn Stage Selected Ranges từ Command Palette. 

Undo last commit

Nhấp vào nút (…) và sau đó chọn Undo last commit để hoàn tác commit trước đó. Các thay đổi được thêm vào phần Staged Changes.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

See Git output

VS Code giúp dễ dàng xem các lệnh Git đang thực sự chạy. Điều này hữu ích khi học Git hoặc gỡ lỗi một vấn đề kiểm soát nguồn khó khăn.

Sử dụng lệnh Toggle Output (Ctrl + Shift + U) và chọn Git trong trình đơn thả xuống.

Gutter indicators

Xem diff decorations trong màn hình biên tập. Xem thêm tại đây để biết thêm chi tiết.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Thủ thuật – giải quyết vấn đề xung đột

Trong quá trình hợp nhất, hãy chuyển đến chế độ xem Source Control (Ctrl + Shift + G) và thực hiện các thay đổi trong chế độ xem khác.

Bạn có thể giải quyết xung đột hợp nhất với CodeLens nội tuyến cho phép bạn Accept Current Change, Accept Incoming Change, Accept Both Changes, and Compare Changes.

Đặt VS Code làm công cụ hợp nhất mặc định

git config --global merge.tool vscode

git config --global mergetool.vscode.cmd 'code --wait $MERGED'

 

Đặt VS Code làm diff tool mặc định

git config --global diff.tool vscode

git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'

Debugging

Cấu hình trình Debugging

Mở Command Palette (Ctrl + Shift + P) và chọn Debug: Open launch.json, sẽ nhắc bạn chọn môi trường phù hợp với dự án của bạn (Node.js, Python, C ++, v.v.). Điều này sẽ tạo ra một launch.json file. Hỗ trợ Node.js được tích hợp sẵn và các môi trường khác yêu cầu cài đặt các phần mở rộng ngôn ngữ phù hợp. Xem thêm tại đây để biết thêm chi tiết.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Breakpoints and stepping through

Đặt breakpoints bên cạnh số dòng. Điều hướng về phía trước Debug widget.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Kiểm tra dữ liệu

Kiểm tra các biến trong bảng Run và trong Panel control.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Inline values

Bạn có thể đặt “debug.inlineValues”: true để xem các giá trị biến trong inline debugger. Tính năng này có thể tốn thời gian và có thể làm chậm công việc, do đó mặc định tính năng này bị tắt.

Logpoints

Logpoints hoạt động giống như các điểm dừng nhưng thay vì tạm dừng debugger khi chúng bị tấn công, chúng sẽ ghi thông báo vào panel control. Thủ thuật này đặc biệt hữu ích cho việc ghi nhật ký trong khi gỡ lỗi các máy chủ không thể sửa đổi hoặc tạm dừng.

Thêm một Logpoints bằng lệnh Add Logpoint bên trái trình soạn thảo và nó sẽ được hiển thị dưới dạng biểu tượng hình “diamond”. Log messages là văn bản thuần túy nhưng có thể bao gồm các biểu thức được đánh giá trong dấu ngoặc nhọn (‘{}’).

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Task runner

Auto detect tasks

Chọn Terminal từ menu cấp cao nhất, chạy lệnh Configure Tasks, sau đó chọn loại tác vụ bạn muốn chạy. Điều này sẽ tạo ra một tasks.json tập tin với nội dung như sau. Xem tài liệu để biết thêm chi tiết.

{

  // See https://go.microsoft.com/fwlink/?LinkId=733558

  // for the documentation about the tasks.json format

  "version": "2.0.0",

  "tasks": [

    {

      "type": "npm",

      "script": "install",

      "group": {

        "kind": "build",

        "isDefault": true

      }

    }

  ]

}

Đôi khi có vấn đề với thế hệ tự động. Kiểm tra các tài liệu để làm cho mọi thứ hoạt động đúng.

Thủ thuật – chạy các tác vụ từ menu Terminal

Chọn Terminal từ menu cấp cao nhất, chạy lệnh Run Task và chọn tác vụ bạn muốn chạy. Chấm dứt tác vụ đang chạy bằng cách chạy lệnh Terminate Task

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Xác định các phím tắt cho các tác vụ

Bạn có thể xác định một phím tắt cho bất kỳ tác vụ. Từ Command Palette (Ctrl + Shift + P), chọn Preferences: Open Keyboard Shortcuts File , liên kết phím tắt mong muốn với workbench.action.tasks.runTask lệnh và xác định Task là args.

Ví dụ: để liên kết Ctrl + H với Run tests tác vụ, hãy thêm vào như sau:

{

"key": "ctrl+h",

"command": "workbench.action.tasks.runTask",

"args": "Run tests"

}

Chạy npm scripts dưới dạng tasks from the explorer

Với cài đặt npm.enableScriptExplorer, bạn có thể kích hoạt Explorer hiển thị các tập lệnh được xác định trong workspace của bạn.

Nguồn: Visual Studio Code

Nguồn: Visual Studio Code

Từ Explorer, bạn có thể mở một script trong trình soạn thảo, chạy nó như một tác vụ và khởi chạy nó với trình gỡ lỗi nút (khi tập lệnh xác định tùy chọn gỡ lỗi như thế nào –inspect-brk). Hành động mặc định khi nhấp là để mở tập lệnh. Để chạy tập lệnh chỉ bằng một cú nhấp chuột, hãy đặt npm.scriptExplorerAction thành “run”. Sử dụng cài đặt npm.exclude để loại trừ các tập lệnh trong package.json các tệp có trong các thư mục cụ thể.

Với cài đặt npm.enableRunFromFolder, bạn có thể kích hoạt để chạy các tập lệnh npm từ menu ngữ cảnh của Explorer cho một thư mục. Cài đặt cho phép lệnh NPM Script in Folder… khi thư mục được chọn. Lệnh hiển thị danh sách Quick Pick các tập lệnh npm có trong thư mục này và bạn có thể chọn tập lệnh sẽ được thực thi dưới dạng task.

Portable mode (Chế độ di động)

VS Code có Portable mode cho phép bạn giữ các cài đặt và dữ liệu ở cùng vị trí với cài đặt của bạn, ví dụ: trên ổ USB.

Insiders builds (bản thử nghiệm)

Nhóm Visual Studio Code sử dụng phiên bản Insiders để kiểm tra các tính năng mới nhất và sửa lỗi của VS Code. Bạn cũng có thể sử dụng phiên bản Insiders builds cách tải xuống tại đây .

  • Dành cho người dùng sớm: các bản insiders có các thay đổi để người dùng và người viết được dùng thử
  • Bản dựng thường xuyên: Bản cập nhật mỗi ngày với các tính năng sửa lỗi mới nhất.
  • Cài đặt song song: Người dùng nội bộ cài đặt bên cạnh bản ổn định cho phép bạn sử dụng độc lập.

Nguồn: Visial Studio Code