Mẹo Và Thủ Thuật Visual Studio Code

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

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

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.

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

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

Đ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

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.

# 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 --goto package.json:10:5 # see help options code --help # disable all extensions code --disable-extensions .

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.

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

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ữ)

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.

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

Keymaps

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

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

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.

Đ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

"editor.fontSize": 18, "terminal.integrated.fontSize": 14, "[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 Auto Save

"files.autoSave": "afterDelay"

Format on save

"editor.formatOnSave": true

Format on paste

"editor.formatOnPaste": true

Change the size of Tab characters 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.

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", } } } },

Tiện ích mở rộng

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

Tìm extensions

Tìm kiếm bên trong VS Code trong giao diện Extensions.

Lời khuyên tiện ích mở rộng

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.

Extensions được gợi ý

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

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.

Files và folders

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

Thanh bên

Phím tắt: Ctrl + B

Chuyển đổi Panel

Phím tắt: Ctrl + J

Zen Mode

Phím tắt: Ctrl + KZ

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.

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

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

Di chuyển cửa sổ Explorer

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

Mở hoặc tạo tệp

Đóng folder đang mở

Phím tắt: Ctrl + F4

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

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)

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.

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ỏ

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

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.

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.

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.

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] }

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

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

Shrink / expand selection Go to Symbol in File

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

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

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ở.

Đ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

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.

Đị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

Code formatting

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 Mở xem trước Markdown

Trong tệp Markdown, sử dụng

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

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.

IntelliSense

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

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.

Go to Definition 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.

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.

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 .* 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.

.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.

Cú pháp Emmet

Support for Emmet syntax

Snippets

Tạo snipptes tùy chỉnh

"create component": { "prefix": "component", "body": [ "class $1 extends React.Component {", "", "trender() {", "ttreturn ($2);", "t}", "", "}" ] },

Diff

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

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.

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.

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.

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.

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.

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

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

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 chúng tôi vscode git config --global chúng tôi 'code --wait $MERGED'

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

git config --global chúng tôi vscode git config --global chúng tôi 'code --wait --diff $LOCAL $REMOTE'

Debugging

Cấu hình trình Debugging

Breakpoints and stepping through

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

Kiểm tra dữ liệu

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

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 (‘{}’).

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.

{ "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

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.

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)

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.

Visual Studio Code Tips And Tricks

“Tips and Tricks” lets you jump right in and learn how to be productive with Visual Studio Code. You’ll become familiar with its powerful editing, code intelligence, and source code control features and learn useful keyboard shortcuts. This topic goes pretty fast and provides a broad overview, so be sure to look at the other in-depth topics in Getting Started and the User Guide to learn more.

If you don’t have Visual Studio Code installed, go to the Download page. You can find platform specific setup instructions at Running VS Code on Linux, macOS, and Windows.

Prefer a video? You can watch a recent Microsoft Build talk Visual Studio Code tips and tricks, which describes 20 tips and tricks for working productively with VS Code.

Basics Getting started Command Palette

Access all available commands based on your current context.

Default keyboard shortcuts

All of the commands are in the Command Palette with the associated key binding (if it exists). If you forget a keyboard shortcut, use the Command Palette to help you out.

Keyboard reference sheets

Download the keyboard shortcut reference sheet for your platform ( macOS, Windows, Linux).

Quick Open

Quickly open files.

Tip: Type ? to view commands suggestions.

Typing commands such as edt and term followed by a space will bring up dropdown lists.

Repeat the Quick Open keyboard shortcut to cycle quickly between recently opened files.

Open multiple files from Quick Open

You can open multiple files from Quick Open by pressing the Right arrow key. This will open the currently selected file in the background and you can continue selecting files from Quick Open.

Open Recent

Command line

VS Code has a powerful command line interface (CLI) which allows you to customize how the editor is launched to support various scenarios.

Make sure the VS Code binary is on your path so you can simply type ‘code’ to launch VS Code. See the platform specific setup topics if VS Code is added to your environment path during installation ( Running VS Code on Linux, macOS, Windows).

.vscode folder

Workspace specific files are in a .vscode folder at the root. For example, tasks.json for the Task Runner and launch.json for the debugger.

Status Bar Errors and warnings

Quickly jump to errors and warnings in the project.

You can filter problems either by type (‘errors’, ‘warnings’) or text matching.

Change language mode

If you want to persist the new language mode for that file type, you can use the Configure File Association for command to associate the current file extension with an installed language.

Customization

There are many things you can do to customize VS Code.

Change your theme

Change your keyboard shortcuts

Tune your settings

Add JSON validation

Create snippets

Install extensions

Change your theme

You can install more themes from the VS Code extension Marketplace.

Additionally, you can install and change your File Icon themes.

Keymaps Customize your keyboard shortcuts

You can search for shortcuts and add your own keybindings to the keybindings.json file.

See more in Key Bindings for Visual Studio Code.

Tune your settings

By default VS Code shows the Settings editor, you can find settings listed below in a search bar, but you can still edit the underlying settings.json file by using the Open Settings (JSON) command or by changing your default settings editor with the workbench.settings.editor setting.

Open User Settings settings.json

Change the font size of various UI elements

Change the zoom level

Font ligatures

Tip: You will need to have a font installed that supports font ligatures. FiraCode is a popular font on the VS Code team.

Auto Save

Format on save

Format on paste

Change the size of Tab characters

Spaces or Tabs

Render whitespace

Whitespace characters are rendered by default in text selection.

Ignore files / folders

Removes these files / folders from your editor window.

Remove these files / folders from search results.

And many, many other customizations.

Language specific settings

You can scope the settings that you only want for specific languages by the language identifier. You can find a list of commonly used language ids in the Language Identifiers reference.

Tip: You can also create language specific settings with the Configure Language Specific Settings command.

Add JSON validation

Enabled by default for many file types. Create your own schema and validation in settings.json

or for a schema defined in your workspace

or a custom schema

See more in the JSON documentation.

Extensions Find extensions

In the VS Code Marketplace.

Search inside VS Code in the Extensions view.

View extension recommendations

Community curated extension lists, such as awesome-vscode.

Install extensions Extension recommendations Creating my own extension

Are you interested in creating your own extension? You can learn how to do this in the Extension API documentation, specifically check out the documentation on contribution points.

Files and folders Integrated Terminal

Further reading:

Toggle Panel Zen mode

Enter distraction free Zen mode.

Press Esc twice to exit Zen Mode.

Side by side editing

You can also drag and drop editors to create new editor groups and move editors between groups.

Switch between editors Move to Explorer window Create or open a file Close the currently opened folder File associations

Create language associations for files that aren’t detected correctly. For example, many configuration files with custom file extensions are actually JSON.

Preventing dirty writes

VS Code will show you an error message when you try to save a file that cannot be saved because it has changed on disk. VS Code blocks saving the file to prevent overwriting changes that have been made outside of the editor.

Use the actions in the editor toolbar to resolve the save conflict. You can either Accept your changes and thereby overwriting any changes on disk, or Revert to the version on disk. Reverting means that your changes will be lost.

Note: The file will remain dirty and cannot be saved until you pick one of the two actions to resolve the conflict.

Editing hacks

Here is a selection of common features for editing code. If the keyboard shortcuts aren’t comfortable for you, consider installing a keymap extension for your old editor.

Tip: You can see recommended keymap extensions in the Extensions view with ⌘K ⌘M (Windows, Linux Ctrl+K Ctrl+M) which filters the search to @recommended:keymaps.

Multi cursor selection

To set cursors above or below the current position use:

Keyboard Shortcut: or

Note: You can also change the modifier to Ctrl/Cmd for applying multiple cursors with the editor.multiCursorModifier setting . See Multi-cursor Modifier for details.

Column (box) selection

You can select blocks of text by holding Shift+Alt (Shift+Option on macOS) while you drag your mouse. A separate cursor will be added to the end of each selected line.

You can also use keyboard shortcuts to trigger column selection.

Vertical rulers

You can add vertical column rulers to the editor with the editor.rulers setting, which takes an array of column character positions where you’d like vertical rulers.

Pressing the Alt key enables fast scrolling in the editor and Explorers. By default, fast scrolling uses a 5X speed multiplier but you can control the multiplier with the Editor: Fast Scroll Sensitivity ( editor.fastScrollSensitivity) setting.

Copy line up / down

Keyboard Shortcut: or

The commands Copy Line Up/Down are unbound on Linux because the VS Code default keybindings would conflict with Ubuntu keybindings, see Issue #509. You can still set the commands editor.action.copyLinesUpAction and editor.action.copyLinesDownAction to your own preferred keyboard shortcuts.

Move line up and down Shrink / expand selection

You can learn more in the Basic Editing documentation.

Go to Symbol in File

You can group the symbols by kind by adding a colon, @:.

Go to Symbol in Workspace Outline view

The Outline view in the File Explorer (default collapsed at the bottom) shows you the symbols of the currently open file.

You can sort by symbol name, category, and position in the file and allows quick navigation to symbol locations.

Undo cursor position Trim trailing whitespace Transform text commands

You can change selected text to uppercase, lowercase, and title case with the Transform commands from the Command Palette.

Code formatting Code folding

You can also fold/unfold all regions in the editor with Fold All (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) and Unfold All (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)).

Select current line Open Markdown preview

In a Markdown file, use

Side by side Markdown edit and preview

In a Markdown file, use

The preview and editor will synchronize with your scrolling in either view.

IntelliSense

You can view available methods, parameter hints, short documentation, etc.

Peek Go to Definition

You can also see the type definition if you press Ctrl (Cmd on macOS) when you are hovering over the type.

Go to References Find All References view Rename Symbol

Select a symbol then type . Alternatively, you can use the context menu.

Search and modify .eslintrc.json

Install the ESLint extension. Configure your linter however you’d like. Consult the ESLint specification for details on its linting rules and options.

Here is configuration to use ES6.

package.json

See IntelliSense for your package.json file.

Emmet syntax

Support for Emmet syntax.

Snippets Create custom snippets

See more details in Creating your own Snippets.

Git integration

Git integration comes with VS Code “out-of-the-box”. You can install other SCM providers from the extension Marketplace. This section describes the Git integration but much of the UI and gestures are shared by other SCM providers.

Diffs

From the Source Control view, select a file to open the diff.

Views

The default view for diffs is the side by side view.

If you prefer the inline view, you can set "diffEditor.renderSideBySide": false.

Review pane Edit pending changes

You can make edits directly in the pending changes of the diff view.

Branches

Easily switch between Git branches via the Status Bar.

Staging

Stage selected

Stage a portion of a file by selecting that file (using the arrows) and then choosing Stage Selected Ranges from the Command Palette.

Undo last commit See Git output

VS Code makes it easy to see what Git commands are actually running. This is helpful when learning Git or debugging a difficult source control issue.

Use the Toggle Output command () and select Git in the drop-down.

Gutter indicators

View diff decorations in editor. See documentation for more details.

Resolve merge conflicts

During a merge, go to the Source Control view (⌃⇧G (Windows, Linux Ctrl+Shift+G)) and make changes in the diff view.

You can resolve merge conflicts with the inline CodeLens which lets you Accept Current Change, Accept Incoming Change, Accept Both Changes, and Compare Changes.

Set VS Code as default merge tool Set VS Code as default diff tool Debugging Configure debugger

Open the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) and select Debug: Open launch.json, which will prompt you to select the environment that matches your project (Node.js, Python, C++, etc). This will generate a launch.json file. chúng tôi support is built-in and other environments require installing the appropriate language extensions. See the debugging documentation for more details.

Breakpoints and stepping through

Place breakpoints next to the line number. Navigate forward with the Debug widget.

Data inspection

Inspect variables in the Run panels and in the console.

Inline values

You can set "debug.inlineValues": true to see variable values inline in the debugger. This feature can be expensive and may slow down stepping, so it is disabled by default.

Logpoints

Logpoints act much like breakpoints but instead of halting the debugger when they are hit, they log a message to the console. Logpoints are especially useful for injecting logging while debugging production servers that cannot be modified or paused.

Add a logpoint with the Add Logpoint command in the left editor gutter and it will be displayed as a “diamond” shaped icon. Log messages are plain text but can include expressions to be evaluated within curly braces (‘{}’).

Task runner Auto detect tasks

Select Terminal from the top-level menu, run the command Configure Tasks, then select the type of task you’d like to run. This will generate a tasks.json file with content like the following. See the Tasks documentation for more details.

There are occasionally issues with auto generation. Check out the documentation for getting things to work properly.

Select Terminal from the top-level menu, run the command Run Task, and select the task you want to run. Terminate the running task by running the command Terminate Task

Define keyboard shortcuts for tasks

You can define a keyboard shortcut for any task. From the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)), select Preferences: Open Keyboard Shortcuts File, bind the desired shortcut to the workbench.action.tasks.runTask command, and define the Task as args.

For example, to bind Ctrl+H to the Run tests task, add the following:

Run npm scripts as tasks from the Explorer

With the setting npm.enableRunFromFolder, you can enable to run npm scripts from the File Explorer’s context menu for a folder. The setting enables the command Run NPM Script in Folder… when a folder is selected. The command shows a Quick Pick list of the npm scripts contained in this folder and you can select the script to be executed as a task.

Portable mode

VS Code has a Portable mode which lets you keep settings and data in the same location as your installation, for example, on a USB drive.

Insiders builds

The Visual Studio Code team uses the Insiders version to test the latest features and bug fixes of VS Code. You can also use the Insiders version by downloading it here.

For Early Adopters – Insiders has the most recent code changes for users and extension authors to try out.

Frequent Builds – New builds every day with the latest bug fixes and features.

Side-by-side install – Insiders installs next to the Stable build allowing you to use either independently.

Top 5 Thủ Thuật Tuyệt Vời Khi Sử Dụng Visual Studio Code

Microsoft vừa cho ra mắt công cụ Visual Studio Code phiên bản đầu tiên 1.0.0. Tôi đã sử dụng công cụ này một thời gian khi vẫn còn Beta, và đến nay, tôi khá ấn tượng với những gì công cụ này mang lại.

Visual Studio Code (VSC) rất nhanh và nhẹ, và nếu bạn đã từng dùng qua SublimeText or Atom, bạn sẽ thấy quen thuộc ngay lập tức. VSC có kèm theo command palette (bảng lệnh), multiple cursor selection (lựa chọn đa con trỏ), snippets, và code auto-completion (tự hoàn thành) – những tính năng đã khá quen thuộc với nhiều người.

Khi code, sẽ có lúc bạn quên bén đi một hàm cụ thể, hàm được định nghĩa đầu tiên ở đâu, và các thông số cần thiết.

Với Peek, bạn có thể lựa chọn một hàm rồi nhấn Shift + F12. Một inline window sẽ hiện ra cho thấy định nghĩa hoàn chỉnh của hàm. Tính năng hiện đang hoạt động với C, C#, JavaScript, TypeScript, .NET, và một vài ngôn ngữ lập trình khác.

Visual Studio Code có tích hợp Task Runner khá tiện lợi.

Tương tự như dòng lệnh subl trong SublimeText, Visual Studio Code được trang bị một CLI tên code và rất dễ cài đặt.

Trong Windows, CLI sẽ được cài đặt đồng thời song song với ứng dụng. CLI có thể được truy cập thông qua Command Prompt (cmd.exe). Trong OS X, CLI có thể được cài đặt hoặc gỡ bỏ thông qua Command Palette.

Bạn có thể dùng CLI để mở một đường dẫn nhất định đến Visual Studio Code, hoặc mở đường dẫn project hiện tại trong Terninal hoặc Command Prompt trực tếp từ editor.

IntelliSense là sự kết hợp giữa code auto-complete và trí tuệ nhân tạo (AI). Tính năng này cung cấp một loạt các đề nghị cùng với gợi ý hoặc mô tả ngắn khi ta đang viết code. Những gợi ý này được tính toán dựa theo các nhân tố bổi cảnh như ngôn ngữ lập trình, cú pháp, biến, hàm, cũng như các code trong file.

IntelliSense hỗ trợ một số ngôn ngữ lập trình sáng tạo, bao gồm Sass, LESS, TypeScript, và PHP. Bạn cũng có thể cài thêm plugin vào IntelliSense để hổ trợ thêm nhiều ngôn ngữ khác. Đây là một tính năng cải thiện năng suất đáng kể.

Visual Studio Code có Git built-in ngay trong editor. Ở bên trái sidebar, bạn sẽ thấy biểu tượng Git. với icon bạn có thể: khởi chạy Git cũng như thực hiện một vài lệnh Git như commit, pull, push, rebase, publish, và xem các thay đổi trong file.

Thêm đó, nếu bạn thực hiện thay đổi trong Git repository, Visual Studio sẽ hiện chỉ dẫn bằng màu trên lề code editor, chỉ rõ bạn đã thực hiện thay đổi khi nào.

Mặc dù mới ra mắt và vẫn còn nhiều thiếu sót, nhưng với những tính năng tuyệt vời kể trên bạn nên cân nhắc sử dụng và thích ứng dần Visual Studio Code. Hy vọng, với phiên bản mới, công cụ sẽ được cải tiến mạnh mẽ.

Theo Tecktalk

Những Thủ Thuật Sử Dụng Visual Studio Code Mà Dev Nên Biết

Như các bạn đã biết, Visual Studio Code là một text editor khá phổ biến và được rất nhiều dev sử dụng . Cá nhân mình cũng sử dụng từ khi mới bập bẹ tập code , ấy vậy mà còn quá nhiều tiện ích và thủ thuật đơn giản nhưng lại tối ưu kha khá thời gian cũng như công sức . Vậy nên hôm nay mình xin phép tổng hợp một số tricks hay tính năng cần thiết mà developer nên biết để việc code hiệu quả hơn. :v

Zen mode là chế độ giúp bạn tránh phân tâm trong quá trình code, khi bật Zen Mode, tất cả những phần dư thừa như sidebar hay tool box đều được loại bỏ, chỉ để lại màn hình code ở chính giữa giúp bạn tập chung hơn.

Khi bạn làm một việc cần sử dụng đồng thời 2 hoặc nhiều file cùng lúc, hoặc đơn giản muốn kiểm tra sự thay đổi , giống hay khác nhau giữa 2 files thì việc chuyển qua lại các tab khá là phiền nhiễu, mất thời gian, đôi khi còn xảy ra nhầm lẫn.

Visual Code đã giúp ta giải quyết vấn đề này bằng cách cho phép ta chia màn hình thành 2 hoặc nhiều hơn để phục vụ việc multitasking.

Command Palette cho phép bạn truy cập tới các commands của visual code chỉ bằng một vài phím tắt.

Để mở Command Palette , bạn cần gõ tổ hợp phím Ctrl + Shift + P, tiếp đến bạn có thể gõ những keywords cần thiết để tìm kiếm commands danh sách commands.

Đây là tiện ích khá thú vị của Visual Code, cho phép bạn chỉnh sửa giá trị mặc định của editor hoặc một extentions bất kì bạn đã cài đặt.

Đầu tiên truy cập Command Palette như mình đã nói ở trên và chọn Preferences: Open Default Settings (JSON). (đây là setting mặc định của VS)

Tiếp tục truy cập Command Palette và chọn Preferences: Open Settings (JSON) (Đây là phần setting chỉnh sửa ) và kéo tab qua góc phải màn hình để chia đôi màn xem cho dễ.

Như hình trên là mình đã chỉnh sửa setting của php-cs-fixer ( một extention giúp chỉnh sửa convention code php theo đúng chuẩn), cụ thể là :

"php-cs-fixer.onsave": true : tự động chỉnh code cho đúng convention khi save

"php-cs-fixer.formatHtml": true : tùy chọn tự động format code html

… vân vân và mây mây

Phím tắt giúp đỡ ta rất nhiều trong việc lập trình, giảm nhiều thời gian thao tác và tạo cảm giác tiện lợi cho người sử dụng hơn. Đầu tiên, bạn có thể truy cập danh sách các phím tắt bằng cách “sử dụng” phím tắt Ctrl + K + S

Một số phím tắt cần thiết cho developer:

Ctrl + Space : Phím tắt này giúp bạn hoàn thành code một cách nhanh gọn hơn, khi sử dụng, một bảng lựa chọn sẽ hiển thị để giúp bạn hoàn thành mẩu code đang dở, rất thích hợp cho những người mới bắt đầu khi không nhớ hàm hoặc “nhớ mang máng”

Ctrl + ? : Comment dòng code hoặc đoạn code theo ý muốn

Ctrl + Shift + F : Tìm kiếm trên tất cả các files

Ctrl + D : Tìm trong file một đoạn text bất kì và thao tác với chúng

Ctrl + Shift + T : Mở lại những tab đã đóng

Ctrl + Alt + R : Reload lại visual code

Ctrl + Backspace : Xóa từ vừa mới nhập, thật ra đây là tính năng bạn có thể áp dụng ở bất cứ đâu.

Ctrl + Shift + Right/Left Arrow : Bôi đen theo đơn vị là chữ (mặc định là theo kí tự )

Ctrl + Shift + D : Nhân đôi dòng chỉ định

Ctrl + Home : Di chuyển con trỏ chuột tới đầu file

Ctrl + End : di chuyển con trỏ chuột tới cuối file

Alt + Up/Down Arrow : Di chuyển dòng lên hoặc xuống

All Rights Reserved

Góc Tìm Hiểu: Thủ Thuật Dùng Code Hack Facebook Như Thế Nào?

“Làm sao để hack tài khoản Facebook?” là một từ khóa được tìm kiếm nhiều nhất hiện nay. Với số số lượng người dùng khổng lồ lên tới 2 tỷ, FB luôn là một mục tiêu thu hút rất nhiều hacker. Nhiều người nghĩ Facebook trang bị lớp bảo vệ rất chắc chắn nhưng thật sự dù lớp bảo mật này có phức tạp đến mấy thì cũng có nguy cơ bị hack. Trong đó dùng code hack Facebook là một thủ thuật được rất nhiều người áp dụng.

Cách hack Facebook bằng số điện thoại

Bước 1: Trước hết, bạn hết đăng nhập vào tài khoản Facebook cá nhân của mình.

Bước 2: Tìm đến nick Facebook của người nào đó mà bạn muốn hack. Ở bước này, mục tiêu cần hack phải nằm trong danh sách bạn bè với bạn nếu không thì không thể thực hiện được.

Bước 3: Tiếp theo đó bạn vào phần giới thiệu thông tin cá nhân của tài khoản Facebook muốn hack.

Bước 4: Ghi chú lại các thông tin cần thiết, ví dụ như số điện thoại cá nhân, ngày tháng năm sinh,…

Bước 5: Sau khi đã note lại các thông tin cần thiết của tài khoản FB cần hack thì bạn đăng xuất khỏi tài khoản cá nhân. Sau đó bạn thực hiện đăng nhập lại bằng số điện thoại của account cần hack với password là ngày tháng năm sinh vừa mới ghi lại.

Đây được nhiều người trong giới này đánh giá là một cách cực kỳ đơn giản nhưng lại có được một tỷ lệ thành công rất cao. Bởi vì có rất nhiều tài khoản Facebook họ chỉ dùng những thông tin này để bảo mật vì chúng rất là dễ nhớ.

Thủ thuật hack nick Facebook bằng cách “Quên mật khẩu”

Bước 1: Mở trình duyệt Facebook và tìm đến mục “Quên mật khẩu của bạn”.

Bước 2: Một trang mới sẽ hiển thị lên và yêu cầu bạn nhập “Email, Phone, Username hoặc là Full Name”. Ngay ô trống này, cái cần phải nhập đó chính là Facebook bạn muốn hack.

Lưu ý: Ở bước này, bạn có thể chọn vào phần Email, tin nhắn văn bản hoặc cuộc gọi. Tuy nhiên, một yêu cầu là bạn phải có quyền truy cập vào một trong ba phương pháp mà FB đưa ra.

Bước 4: Hệ thống Facebook sẽ gửi đến địa chỉ Email bạn vừa cung cấp một mã bảo vệ. Sau đó bạn nhập mã bảo vệ này vào ô trống.

Bước 5: Một trang mới sẽ hiện lên và yêu cầu bạn nhập một password mới. Sau khi đã nhập 2 lần mới khẩu mới bạn bấm vào “Tiếp tục”.

Thủ thuật hack Facebook qua Email

Bước 2: Thực hiện kiểm tra xem địa chỉ Email bạn vừa lấy còn khả dụng hay không. Việc kiểm tra này được thực hiện bằng cách truy cập đến nhà cung cấp Email sử dụng như Yahoo, Gmail,…Đăng nhập bằng ID Email chính xác còn mật khẩu thì bạn cứ điền bừa.

Bước 3: Nếu như bạn nhận được thông báo rằng “TK không tồn tại” thì sau đó có thể nhận được một password 100% . Còn nếu nó nói thêm là “Tên người dùng và mật khẩu là sai” thì không thể thực hiện cách hack nick Facebook này.

Bước 4: Ở bước này, bạn cần phải tạo một account mới. Trong phần hướng dẫn này, bài viết sẽ sử dụng hệ thống Hotmail những cách thức hoạt động của ứng dụng này cũng tương tự như Gmail hay Yahoo.

Bước 5: Truy cập vào “Quản lý cài đặt TK”. Sau đó bạn đi đến phần “Quán lý bí danh”. Tiếp đó nhập vào ô trống địa chỉ Email của TK bạn muốn hack. Vào lúc này ứng dụng sẽ tự động liên kết với account của bạn mà không cần phải thông qua xác minh vì TK này không tồn tại.

Bước 6: Lý do là vì TK Facebook đã được liên kết nên bạn phải truy cập vào FB và yêu cầu đặt lại password cho tài khoản được liên kết mà bạn đã tạo ở bước 4.

Bước 7: Sau khi đã hoàn tất xong bước 6, bạn sẽ nhận được yêu cầu trong Email là phải đặt lại mật khẩu đã tạo.

Thủ thuật dùng code hack Facebook

Bước 1: Đăng nhập vào tài khoản Facebook cá nhân và tìm đến người mà các bạn cần hack nick. Lưu ý rằng người này phải nằm trong danh sách bạn bè của bạn.

Bước 2: Sau đó đăng xuất Facebook cá nhân và chọn vào mục “Quên mật khẩu”

Bước 3: Copy ID tài khoản mà bạn muốn hack vào ô trống.

Bước 3: Nhấn vào “Đây là tài khoản của tôi”.

Bước 6: Đây chính là code hack Facebook để đăng nhập vào TK mà bạn cần hack.