[Kách Hay] Từ nay bạn có thể debug JavaScript trên Visual Studio Code mà không cần extension mới nhất 2023

Từ nay bạn có thể debug JavaScript trên Visual Studio Code mà không cần extension – Kách Hay .Com đã tổng hợp thông tin từ nhiều nguồn, giúp bạn có góc nhìn đa chiều hơn. Nào chúng ta bắt đầu thôi

gấubeiten

trình gỡ lỗi

Các tính năng chính của Visual Studio Code là một công việc tuyệt vời Gỡ lỗi-Unterstützung. Der integrierte Debugger von VS Code hilft, Ihre Bearbeitungs-, Kompilierungs- und Debug-Schleife zu beschleunigen.

Debugger-Erweiterungen

VS Code verfügt über eine integrierte Debugging-Unterstützung für die Node.js – Laufzeit und kann JavaScript, TypeScript oder jede andere Sprache debuggen, die in JavaScript transpiliert wird.

Để gỡ lỗi các ngôn ngữ và thời gian chạy khác (bao gồm PHP, Ruby, Go, C#, Python, C++, PowerShell và nhiều ngôn ngữ khác), hãy tìm phần mở rộng Trình gỡ lỗi trong VS Code Marketplace hoặc chọn Cài đặt Trình gỡ lỗi bổ sung trong menu Chạy cấp cao nhất.

Dưới đây là một số tiện ích mở rộng phổ biến bao gồm hỗ trợ gỡ lỗi:

con trăn

75,5 triệu

ms-trăn

IntelliSense (Pylance), Linting, Debugging (multi-threaded, remote), Jupyter Notebooks, code formatting, refactoring, unit tests, and more.

C/C++

41,9 Mio

ms-vscode

C/C++ IntelliSense, debugging, and code browsing.

C#

19,7 Mio

ms-dotnettools

C# for Visual Studio Code (powered by OmniSharp).

Debugger für Java

19.4M

vscjava

A lightweight Java debugger for Visual Studio Code

Tip: The extensions shown above are dynamically queried. Select an extension tile above to read the description and reviews to decide which extension is best for you.

Start debugging

The following documentation is based on the built-in Node.js debugger, but most of the concepts and features are applicable to other debuggers as well.

It is helpful to first create a sample Node.js application before reading about debugging. You can follow the Node.js walkthrough to install Node.js and create a simple “Hello World” JavaScript application (app.js). Once you have a simple application set up, this page will take you through VS Code debugging features.

Run and Debug view

To bring up the Run and Debug view, select the Run and Debug icon in the Activity Bar on the side of VS Code. You can also use the keyboard shortcut Ctrl+Shift+D.

The Run and Debug view displays all information related to running and debugging and has a top bar with debugging commands and configuration settings.

If running and debugging is not yet configured (no launch.json has been created), VS Code shows the Run start view.

Run menu

The top-level Run menu has the most common run and debug commands:

Launch configurations

To run or debug a simple app in VS Code, select Run and Debug on the Debug start view or press F5 and VS Code will try to run your currently active file.

However, for most debugging scenarios, creating a launch configuration file is beneficial because it allows you to configure and save debugging setup details. VS Code keeps debugging configuration information in a launch.json file located in a .vscode folder in your workspace (project root folder) or in your user settings or workspace settings.

Để tạo tệp launch.json, hãy nhấp vào liên kết tạo tệp launch.json trong chế độ xem Bắt đầu chạy.

Mã VS sẽ cố gắng tự động phát hiện môi trường gỡ lỗi của bạn, nhưng nếu điều này không thành công, bạn sẽ phải chọn nó theo cách thủ công:

Đây là cấu hình khởi chạy được tạo để gỡ lỗi Node.js:

{ “version”: “0.2.0”, “configurations”: [ { “type”: “node”, “request”: “launch”, “name”: “Launch Program”, “skipFiles”: [“<node_internals >/**”], “chương trình”: “${workspaceFolder}\\app.js” } ] }

Nếu quay lại chế độ xem File Explorer (Ctrl+Shift+E), bạn sẽ thấy VS Code đã tạo thư mục .vscode và thêm tệp launch.json vào không gian làm việc của bạn.

Note: You can debug a simple application even if you don’t have a folder open in VS Code, but it is not possible to manage launch configurations and set up advanced debugging. The VS Code Status Bar is purple if you do not have a folder open.

Note that the attributes available in launch configurations vary from debugger to debugger. You can use IntelliSense suggestions (Ctrl+Space) to find out which attributes exist for a specific debugger. Hover help is also available for all attributes.

Do not assume that an attribute that is available for one debugger automatically works for other debuggers too. If you see green squiggles in your launch configuration, hover over them to learn what the problem is and try to fix them before launching a debug session.

Review all automatically generated values and make sure that they make sense for your project and debugging environment.

Launch versus attach configurations

In VS Code, there are two core debugging modes, Launch and Attach, which handle two different workflows and segments of developers. Depending on your workflow, it can be confusing to know what type of configuration is appropriate for your project.

If you come from a browser Developer Tools background, you might not be used to “launching from your tool,” since your browser instance is already open. When you open DevTools, you are simply attaching DevTools to your open browser tab. On the other hand, if you come from a server or desktop background, it’s quite normal to have your editor launch your process for you, and your editor automatically attaches its debugger to the newly launched process.

The best way to explain the difference between launch and attach is to think of a launch configuration as a recipe for how to start your app in debug mode before VS Code attaches to it, while an attach configuration is a recipe for how to connect VS Code’s debugger to an app or process that’s already running.

VS Code debuggers typically support launching a program in debug mode or attaching to an already running program in debug mode. Depending on the request (attach or launch), different attributes are required, and VS Code’s launch.json validation and suggestions should help with that.

Add a new configuration

To add a new configuration to an existing launch.json, use one of the following techniques:

• Use IntelliSense if your cursor is located inside the configurations array.
• Press the Add Configuration button to invoke snippet IntelliSense at the start of the array.
• Choose Add Configuration option in the Run menu.

VS Code also supports compound launch configurations for starting multiple configurations at the same time; for more details, please read this section.

In order to start a debug session, first select the configuration named Launch Program using the Configuration dropdown in the Run and Debug view. Once you have your launch configuration set, start your debug session with F5.

Alternatively, you can run your configuration through the Command Palette (Ctrl+Shift+P) by filtering on Debug: Select and Start Debugging or typing ‘debug ‘ and selecting the configuration you want to debug.

As soon as a debugging session starts, the DEBUG CONSOLE panel is displayed and shows debugging output, and the Status Bar changes color (orange for default color themes):

In addition, the debug status appears in the Status Bar showing the active debug configuration. By selecting the debug status, a user can change the active launch configuration and start debugging without needing to open the Run and Debug view.

Debug actions

Once a debug session starts, the Debug toolbar will appear on the top of the editor.

Action	Explanation
Continue / Pause F5	Continue: Resume normal program/script execution (up to the next breakpoint). Pause: Inspect code executing at the current line and debug line-by-line.
Step Over F10	Execute the next method as a single command without inspecting or following its component steps.
Step Into F11	Enter the next method to follow its execution line-by-line.
Step Out Shift+F11	When inside a method or subroutine, return to the earlier execution context by completing remaining lines of the current method as though it were a single command.
Restart Ctrl+Shift+F5	Terminate the current program execution and start debugging again using the current run configuration.
Stop Shift+F5	Terminate the current program execution.

Tip: Use the setting debug.toolBarLocation to control the location of the debug toolbar. It can be the default floating, docked to the Run and Debug view, or hidden. A floating debug toolbar can be dragged horizontally and also down to the editor area.

Run mode

In addition to debugging a program, VS Code supports running the program. The Debug: Run (Start Without Debugging) action is triggered with Ctrl+F5 and uses the currently selected launch configuration. Many of the launch configuration attributes are supported in ‘Run’ mode. VS Code maintains a debug session while the program is running, and pressing the Stop button terminates the program.

Tip: The Run action is always available, but not all debugger extensions support ‘Run’. In this case, ‘Run’ will be the same as ‘Debug’.

Breakpoints

Breakpoints can be toggled by clicking on the editor margin or using F9 on the current line. Finer breakpoint control (enable/disable/reapply) can be done in the Run and Debug view’s BREAKPOINTS section.

• Breakpoints in the editor margin are normally shown as red filled circles.
• Disabled breakpoints have a filled gray circle.
• When a debugging session starts, breakpoints that cannot be registered with the debugger change to a gray hollow circle. The same might happen if the source is edited while a debug session without live-edit support is running.

If the debugger supports breaking on different kinds of errors or exceptions, those will also be available in the BREAKPOINTS view.

The Reapply All Breakpoints command sets all breakpoints again to their original location. This is helpful if your debug environment is “lazy” and “misplaces” breakpoints in source code that has not yet been executed.

Optionally, breakpoints can be shown in the editor’s overview ruler by enabling the setting debug.showBreakpointsInOverviewRuler:

Logpoints

A Logpoint is a variant of a breakpoint that does not “break” into the debugger but instead logs a message to the console. Logpoints are especially useful for injecting logging while debugging production servers that cannot be paused or stopped.

A Logpoint is represented by a “diamond” shaped icon. Log messages are plain text but can include expressions to be evaluated within curly braces (‘{}’).

Just like regular breakpoints, Logpoints can be enabled or disabled and can also be controlled by a condition and/or hit count.

Note: Logpoints are supported by VS Code’s built-in Node.js debugger, but can be implemented by other debug extensions. The Python and Java extensions, for example, support Logpoints.

Data inspection

Variables can be inspected in the VARIABLES section of the Run and Debug view or by hovering over their source in the editor. Variable values and expression evaluation are relative to the selected stack frame in the CALL STACK section.

Variable values can be modified with the Set Value action from the variable’s context menu. Additionally, you can use the Copy Value action to copy the variable’s value, or Copy as Expression action to copy an expression to access the variable.

Variables and expressions can also be evaluated and watched in the Run and Debug view’s WATCH section.

Variable names and values can be filtered by typing while the focus is on the VARIABLES section.

Launch.json attributes

There are many launch.json attributes to help support different debuggers and debugging scenarios. As mentioned above, you can use IntelliSense (Ctrl+Space) to see the list of available attributes once you have specified a value for the type attribute.

The following attributes are mandatory for every launch configuration:

• type – the type of debugger to use for this launch configuration. Every installed debug extension introduces a type: node for the built-in Node debugger, for example, or php and go for the PHP and Go extensions.
• request – the request type of this launch configuration. Currently, launch and attach are supported.
• name – the reader-friendly name to appear in the Debug launch configuration dropdown.

Here are some optional attributes available to all launch configurations:

• presentation – using the order, group, and hidden attributes in the presentation object, you can sort, group, and hide configurations and compounds in the Debug configuration dropdown and in the Debug quick pick.
• preLaunchTask – to launch a task before the start of a debug session, set this attribute to the label of a task specified in tasks.json (in the workspace’s .vscode folder). Or, this can be set to ${defaultBuildTask} to use your default build task.
• postDebugTask – to launch a task at the very end of a debug session, set this attribute to the name of a task specified in tasks.json (in the workspace’s .vscode folder).
• internalConsoleOptions – this attribute controls the visibility of the Debug Console panel during a debugging session.
• debugServer – for debug extension authors only: this attribute allows you to connect to a specified port instead of launching the debug adapter.
• serverReadyAction – if you want to open a URL in a web browser whenever the program under debugging outputs a specific message to the debug console or integrated terminal. For details see section Automatically open a URI when debugging a server program below.

Many debuggers support some of the following attributes:

• program – executable or file to run when launching the debugger
• args – arguments passed to the program to debug
• env – environment variables (the value null can be used to “undefine” a variable)
• envFile – path to dotenv file with environment variables
• cwd – current working directory for finding dependencies and other files
• port – port when attaching to a running process
• stopOnEntry – break immediately when the program launches
• console – what kind of console to use, for example, internalConsole, integratedTerminal, or externalTerminal

Variable substitution

VS Code makes commonly used paths and other values available as variables and supports variable substitution inside strings in launch.json. This means that you do not have to use absolute paths in debug configurations. For example, ${workspaceFolder} gives the root path of a workspace folder, ${file} the file open in the active editor, and ${env:Name} the environment variable ‘Name’. You can see a full list of predefined variables in the Variables Reference or by invoking IntelliSense inside the launch.json string attributes.

{ “type”: “node”, “request”: “launch”, “name”: “Launch Program”, “program”: “${workspaceFolder}/app.js”, “cwd”: “${workspaceFolder} “, “args”: [“${env:USERNAME}”] } Thuộc tính dành riêng cho nền tảng

Launch.json hỗ trợ xác định các giá trị (ví dụ: các đối số được truyền cho chương trình) phụ thuộc vào hệ điều hành mà trình gỡ lỗi đang chạy. Để làm như vậy, hãy đặt một ký tự dành riêng cho nền tảng vào tệp launch.json và chỉ định các thuộc tính tương ứng bên trong ký tự đó.

Dưới đây là một ví dụ chuyển “args” cho chương trình theo cách khác trên Windows:

{ “version”: “0.2.0”, “configurations”: [ { “type”: “node”, “request”: “launch”, “name”: “Launch Program”, “program”: “${workspaceFolder }/node_modules/gulp/bin/gulpfile.js”, “args”: [“myFolder/path/app.js”], “windows”: { “args”: [“myFolder\\path\\app.js” ] } } ] }

Các thuộc tính điều hành hợp lệ là “windows” cho Windows, “linux” cho Linux và “osx” cho macOS. Các thuộc tính được xác định trong phạm vi cụ thể của hệ điều hành sẽ ghi đè các thuộc tính được xác định trong phạm vi toàn cầu.

Xin lưu ý rằng thuộc tính loại không thể được đặt bên trong phần dành riêng cho nền tảng, vì loại gián tiếp xác định nền tảng trong các tình huống gỡ lỗi từ xa và điều đó sẽ dẫn đến sự phụ thuộc theo chu kỳ.

Trong ví dụ bên dưới, việc gỡ lỗi chương trình luôn dừng ở mục nhập ngoại trừ trên macOS:

{ “version”: “0.2.0”, “configurations”: [ { “type”: “node”, “request”: “launch”, “name”: “Launch Program”, “program”: “${workspaceFolder }/node_modules/gulp/bin/gulpfile.js”, “stopOnEntry”: true, “osx”: { “stopOnEntry”: false } } ] } Cấu hình khởi chạy toàn cầu

Mã VS hỗ trợ thêm đối tượng “khởi chạy” bên trong cài đặt Người dùng của bạn. Sau đó, cấu hình “khởi chạy” này sẽ được chia sẻ trên các không gian làm việc của bạn. Ví dụ:

“launch”: { “version”: “0.2.0”, “configurations”: [{ “type”: “node”, “request”: “launch”, “name”: “Launch Program”, “program”: “${file}” }] } Chủ đề điểm dừng nâng cao

Điểm dừng có điều kiện

Tính năng gỡ lỗi mạnh mẽ của Mã VS là khả năng đặt điều kiện dựa trên biểu thức, số lần truy cập hoặc kết hợp cả hai.

• Điều kiện của biểu thức : Điểm dừng sẽ bị tấn công bất cứ khi nào biểu thức được đánh giá là đúng.
• Hit count: The ‘hit count’ controls how many times a breakpoint needs to be hit before it will ‘break’ execution. Whether a ‘hit count’ is respected and the exact syntax of the expression vary among debugger extensions.

You can add a condition and/or hit count when creating a source breakpoint (with the Add Conditional Breakpoint action) or when modifying an existing one (with the Edit Condition action). In both cases, an inline text box with a dropdown menu opens where you can enter expressions:

Condition and hit count editing support is also supported for function and exception breakpoints. You can initiate condition editing from the context menu or the new inline Edit Condition action.

An example of condition editing in the BREAKPOINTS view:

If a debugger does not support conditional breakpoints, the Add Conditional Breakpoint and Edit Condition actions will be missing.

Inline breakpoints

Inline breakpoints will only be hit when the execution reaches the column associated with the inline breakpoint. This is particularly useful when debugging minified code which contains multiple statements in a single line.

An inline breakpoint can be set using Shift+F9 or through the context menu during a debug session. Inline breakpoints are shown inline in the editor.

Inline breakpoints can also have conditions. Editing multiple breakpoints on a line is possible through the context menu in the editor’s left margin.

Function breakpoints

Instead of placing breakpoints directly in source code, a debugger can support creating breakpoints by specifying a function name. This is useful in situations where source is not available but a function name is known.

A function breakpoint is created by pressing the + button in the BREAKPOINTS section header and entering the function name. Function breakpoints are shown with a red triangle in the BREAKPOINTS section.

Data breakpoints

If a debugger supports data breakpoints, they can be set from the VARIABLES view and will get hit when the value of the underlying variable changes. Data breakpoints are shown with a red hexagon in the BREAKPOINTS section.

Debug Console REPL

Expressions can be evaluated with the Debug Console REPL (Read-Eval-Print Loop) feature. To open the Debug Console, use the Debug Console action at the top of the Debug pane or use the View: Debug Console command (Ctrl+Shift+Y). Expressions are evaluated after you press Enter and the Debug Console REPL shows suggestions as you type. If you need to enter multiple lines, use Shift+Enter between the lines and then send all lines for evaluation with Enter. Debug Console input uses the mode of the active editor, which means that the Debug Console input supports syntax coloring, indentation, auto closing of quotes, and other language features.

Note: You must be in a running debug session to use the Debug Console REPL.

Redirect input/output to/from the debug target

Redirecting input/output is debugger/runtime specific, so VS Code does not have a built-in solution that works for all debuggers.

Here are two approaches you might want to consider:

1. Launch the program to debug (“debug target”) manually in a terminal or command prompt and redirect input/output as needed. Make sure to pass the appropriate command line options to the debug target so that a debugger can attach to it. Create and run an “attach” debug configuration that attaches to the debug target.

2. If the debugger extension you are using can run the debug target in VS Code’s Integrated Terminal (or an external terminal), you can try to pass the shell redirect syntax (for example, “<” or “>”) as arguments.

Here’s an example launch.json configuration:

{ “name”: “khởi chạy chương trình đọc tệp từ stdin”, “type”: “node”, “request”: “launch”, “program”: “program.js”, “console”: “integratedTerminal”, “args”: [“<“, “in.txt”] }

Cách tiếp cận này yêu cầu cú pháp “<” được chuyển qua tiện ích mở rộng trình gỡ lỗi và kết thúc ở trạng thái không sửa đổi trong Thiết bị đầu cuối tích hợp.

Gỡ lỗi đa mục tiêu

Đối với các tình huống phức tạp liên quan đến nhiều quy trình (ví dụ: máy khách và máy chủ), Mã VS hỗ trợ gỡ lỗi đa mục tiêu.

Sử dụng gỡ lỗi đa mục tiêu rất đơn giản: sau khi bạn bắt đầu phiên gỡ lỗi đầu tiên, bạn có thể khởi chạy một phiên khác. Ngay khi phiên thứ hai bắt đầu và chạy, VS Code UI chuyển sang chế độ đa mục tiêu:

• The individual sessions now show up as top-level elements in the CALL STACK view.
• The debug toolbar shows the currently active session (and all other sessions are available in a dropdown menu).
• Debug actions (for example, all actions in the debug toolbar) are performed on the active session. The active session can be changed either by using the dropdown menu in the debug toolbar or by selecting a different element in the CALL STACK view.

Compound launch configurations

An alternative way to start multiple debug sessions is by using a compound launch configuration. A compound launch configuration lists the names of two or more launch configurations that should be launched in parallel. Optionally a preLaunchTask can be specified that is run before the individual debug sessions are started. The boolean flag stopAll controls whether manually terminating one session will stop all of the compound sessions.

{ “version”: “0.2.0”, “configurations”: [ { “type”: “node”, “request”: “launch”, “name”: “Server”, “program”: “${workspaceFolder} /server.js” }, { “type”: “node”, “request”: “launch”, “name”: “Client”, “program”: “${workspaceFolder}/client.js” } ], ” hợp chất”: [ { “tên”: “Máy chủ/Máy khách”, “cấu hình”: [“Máy chủ”, “Máy khách”], “preLaunchTask”: “${defaultBuildTask}”, “stopAll”: true } ] }

Cấu hình khởi chạy hỗn hợp được hiển thị trong menu thả xuống cấu hình khởi chạy.

gỡ lỗi từ xa

VS Code does not itself support remote debugging: this is a feature of the debug extension you are using, and you should consult the extension’s page in the Marketplace for support and details.

There is, however, one exception: the Node.js debugger included in VS Code supports remote debugging. See the Node.js Debugging topic to learn how to configure this.

Automatically open a URI when debugging a server program

Developing a web program typically requires opening a specific URL in a web browser in order to hit the server code in the debugger. VS Code has a built-in feature “serverReadyAction” to automate this task.

Here is an example of a simple Node.js Express application:

var express = require(‘express’); ứng dụng var = express(); app.get(‘/’, function(req, res) { res.send(‘Xin chào thế giới!’); }); app.listen(3000, function() { console.log(‘Ví dụ ứng dụng nghe trên cổng 3000!’); });

Trước tiên, ứng dụng này sẽ cài đặt trình xử lý “Xin chào thế giới” cho URL “/” và sau đó bắt đầu lắng nghe các kết nối HTTP trên cổng 3000. Cổng này được thông báo trong Bảng điều khiển gỡ lỗi và thông thường, nhà phát triển sẽ nhập http://localhost :3000 vào ứng dụng trình duyệt của họ.

Tính năng serverReadyAction cho phép thêm thuộc tính có cấu trúc serverReadyAction vào bất kỳ cấu hình khởi chạy nào và chọn một “hành động” sẽ được thực hiện:

{ “type”: “node”, “request”: “launch”, “name”: “Launch Program”, “program”: “${workspaceFolder}/app.js”, “serverReadyAction”: { “pattern”: “nghe trên cổng ([0-9]+)”, “uriFormat”: “http://localhost:%s”, “action”: “openExternally” } }

Ở đây, thuộc tính mẫu mô tả biểu thức chính quy để khớp với chuỗi đầu ra của chương trình thông báo cổng. Mẫu cho số cổng được đặt trong dấu ngoặc đơn để nó có sẵn dưới dạng nhóm chụp biểu thức chính quy. Trong ví dụ này, chúng tôi chỉ trích xuất số cổng, nhưng cũng có thể trích xuất toàn bộ URI.

The uriFormat property describes how the port number is turned into a URI. The first %s is substituted by the first capture group of the matching pattern.

The resulting URI is then opened outside of VS Code (“externally”) with the standard application configured for the URI’s scheme.

Trigger Debugging via Edge or Chrome

Alternatively, the action can be set to debugWithEdge or debugWithChrome. In this mode, a webRoot property can be added that is passed to the Chrome or Edge debug session.

To simplify things a bit, most properties are optional and we use the following fallback values:

• pattern: “listening on.* (https?://\\S+|[0-9]+)” which matches the commonly used messages “listening on port 3000” or “Now listening on: https://localhost:5001”.
• uriFormat: “http://localhost:%s”
• webRoot: “${workspaceFolder}”

Triggering an Arbitrary Launch Config

In some cases, you may need to configure additional options for the browser debug session–or use a different debugger entirely. You can do this by setting action to startDebugging with a name property set to the name of the launch configuration to start when the pattern is matched.

The named launch configuration must be in the same file or folder as the one with the serverReadyAction.

Here the serverReadyAction feature in action:

Next steps

To learn about VS Code’s Node.js debugging support, take a look at:

• Node.js – Describes the Node.js debugger, which is included in VS Code.
• TypeScript – The Node.js debugger also supports TypeScript debugging.

To see tutorials on the basics of Node.js debugging, check out these videos:

• Intro Video – Debugging – Showcases the basics of debugging.
• Getting started with Node.js debugging – Shows how to attach a debugger to a running Node.js process.

To learn about debugging support for other programming languages via VS Code extensions:

• C++
• Python
• Java

To learn about VS Code’s task running support, go to:

• Tasks – Describes how to run tasks with Gulp, Grunt, and Jake and how to show errors and warnings.

To write your own debugger extension, visit:

• Debugger Extension – Uses a mock sample to illustrate the steps required to create a VS Code debug extension.

Common questions

What are the supported debugging scenarios?

Gỡ lỗi các ứng dụng dựa trên Node.js được hỗ trợ trên Linux, macOS và Windows ngay lập tức với Mã VS. Nhiều tình huống khác được hỗ trợ bởi các tiện ích mở rộng Mã VS có sẵn trên Thị trường.

Tôi không thấy bất kỳ cấu hình khởi chạy nào trong danh sách thả xuống của chế độ xem Chạy và Gỡ lỗi. Chuyện gì thế?

Vấn đề phổ biến nhất là bạn đã không thiết lập launch.json hoặc có lỗi cú pháp trong tệp đó. Ngoài ra, bạn có thể cần mở một thư mục vì tính năng gỡ lỗi không có thư mục không hỗ trợ cấu hình khởi chạy.

Tài liệu này có hữu ích không?

Có , trang này hữu ích Không , trang này không hữu ích

7/12/2022

Nguyễn Mạnh Tùng @tungnm205

Theo dõi

685 26 24

Đã đăng vào ngày 24 tháng 8 năm 2017 2:52 SA 10 phút đọc

31.2K

2

2

8 extension Visual Studio Code hữu ích cho Front-end

• Report
• Add to series of me

Trong quá trình sử dụng và trải nghiệm Visual Studio Code, tôi đã tìm kiếm một loạt các tiện ích mở rộng VS Code liên quan đến phát triển front-end và liệt kê những tiện ích tôi tìm thấy trực quan, dễ sử dụng và thuận tiện nhất. Đây không phải là danh sách cuối cùng của tất cả. Dành thời gian để tự khám phá thị trường và xem những gì nó có thể cung cấp cho bạn, đặc biệt là kể từ khi nhiều phần mở rộng tuyệt vời vẫn chưa có.

1. HTML SnippetsSnippets

Nếu bạn muốn thường xuyên viết mã HTML trong Visual Studio Code, đoạn mã HTML Snippets có thể trở thành một công cụ tiện dụng, vì nó hỗ trợ thêm cho HTML. Mặc dù Mã VS có hỗ trợ cơ bản cho HTML, chẳng hạn như tô màu cú pháp, đoạn mã HTML Snippets biết nhiều hơn nữa. Có lẽ tính năng hữu ích nhất của tiện ích mở rộng này là khi bạn bắt đầu nhập tên của một thẻ HTML (không có dấu ngoặc góc bắt đầu), Đoạn mã HTML nhanh chóng hiển thị danh sách các tùy chọn có sẵn với một thông tin ngắn về từng loại. Bạn nhấp vào phần tử bạn cần, các đoạn mã HTML thêm thẻ HTML5 đầy đủ với các thuộc tính phổ biến nhất của nó. Ví dụ: nếu bạn muốn thêm một liên kết (anchor tag) vào tài liệu của bạn, chỉ cần gõ a vào VS Code, chọn tùy chọn bên phải trong hộp popup và các đoạn mã HTML sẽ chèn <a href=””> < / a> vào trình biên tập của bạn mà không gặp rắc rối. Tác giả của tiện ích mở rộng này cũng chú ý đến việc loại bỏ các yếu tố không được dùng nữa, vì vậy nếu bạn muốn sử dụng một thẻ HTML mà bạn không thể tìm thấy trong danh sách bật lên, bạn nên kiểm tra xem nó có hợp lệ hay không.

2. HTML CSS Class Completion

HTML CSS Class Completion có thể là một tiện ích hữu ích nếu bạn cần sử dụng nhiều lớp CSS trong dự án của mình. Nó thường xảy ra với chúng tôi các nhà phát triển, rằng chúng tôi không hoàn toàn chắc chắn trong tên chính xác của một lớp, nhưng nó chỉ ngồi ở phía sau của tâm trí của chúng tôi như kiến ​​thức thụ động. Phần mở rộng thông minh này cung cấp giải pháp cho vấn đề này vì nó tìm nạp tên của tất cả các lớp CSS trong không gian làm việc hiện tại và hiển thị một danh sách về chúng. Giả sử bạn muốn tạo một trang web sử dụng Zurb Foundation, và bạn muốn sử dụng lưới nhỏ. Bạn không nhớ cách các lớp được đặt tên đúng, nhưng bạn biết chúng có tên ngữ nghĩa. Với HTML CSS Class Completion, bạn chỉ cần bắt đầu nhập từ nhỏ, và các tùy chọn có sẵn xuất hiện trên màn hình cùng một lúc, vì vậy bạn có thể dễ dàng chọn một trong những bạn cần.

3. View in Browser

View in Browser là một phần mở rộng đơn giản nhưng mạnh mẽ cho Visual Studio Code. Nó có thể tạo điều kiện phát triển front-end bằng cách cho phép bạn có một cái nhìn nhanh vào kết quả của công việc của bạn trong trình duyệt trong khi mã hóa. Bạn có thể mở tệp HTML của mình trong trình duyệt mặc định trực tiếp từ VS Code bằng cách nhấn phím tắt CTRL + F1. Lưu ý rằng Chế độ xem trong Trình duyệt chỉ hỗ trợ HTML, vì vậy nếu bạn muốn xem trang web của mình, bạn cần phải mở tệp HTML. Bạn không thể trực tiếp truy cập trình duyệt từ tệp CSS hoặc JavaScript

4. Debugger for Chrome

Debugger for Chrome được Microsoft tự xây dựng và hiện là phần mở rộng Visual Studio Code được tải xuống nhiều. Debugger for Chrome giúp gỡ lỗi JavaScript trong Google Chrome mà không cần phải rời khỏi trình chỉnh sửa mã. Điều này có nghĩa rằng bạn không cần phải làm việc với transpiled JavaScript của trình duyệt nhìn thấy, nhưng bạn có thể thực hiện việc gỡ lỗi ngay từ các tập tin nguồn gốc. Xem demo này để xem nó hoạt động như thế nào. Phần mở rộng này có tất cả các tính năng cần thiết của trình gỡ rối thích hợp, chẳng hạn như thiết lập điểm dừng, xem biến đổi, bước, bảng điều khiển gỡ lỗi hữu ích và nhiều thứ khác.

5. JSHint

Mã mở rộng JSHint của Visual Studio JSP tích hợp lót JavaScript JSHint phổ biến vào trình chỉnh sửa mã, do đó bạn có thể được thông báo về các lỗi của bạn ngay khi bạn thực hiện chúng. Theo mặc định, phần mở rộng JSHint sử dụng các tùy chọn mặc định của linter mà bạn có thể tùy chỉnh với sự trợ giúp của một tệp tin cấu hình. Việc sử dụng tiện ích mở rộng này khá đơn giản, vì JSHint đánh dấu các lỗi có màu đỏ và các thông báo có gạch chân màu xanh lá cây. Nếu bạn muốn biết thêm thông tin về các vấn đề, chỉ cần di chuột qua các phần được gạch chân, và JSHint sẽ nổi một nhãn với mô tả về vấn đề cùng một lúc.

6. jQuery Code Snippets

jQuery Code Snippets có thể tăng tốc độ phát triển front-end trong Visual Studio Code vì nó cho phép bạn nhanh chóng viết jQuery mà không có lỗi cú pháp cơ bản. Đoạn mã của jQuery hiện có khoảng 130 đoạn mã có sẵn mà bạn có thể gọi bằng cách nhập đúng cách sử dụng.

Tất cả các đoạn mã jQuery nhưng bắt đầu với tiền tố jq. Một ngoại lệ là chức năng kích hoạt chức năng chèn một chức năng vô danh vào trình soạn thảo. Tiện ích mở rộng tiện ích mở rộng này là một trợ giúp thuận tiện khi bạn không hoàn toàn chắc chắn về cú pháp thích hợp và muốn dành thời gian kiểm tra tài liệu. Nó cũng làm cho nó dễ dàng để nhanh chóng di chuyển qua các tùy chọn có sẵn.

7. Người cúi đầu

Phần mở rộng của Bower VS Code có thể làm cho quá trình phát triển web của bạn trở nên trực quan hơn bằng cách tích hợp bộ nhớ quản lý gói Bower vào Visual Studio.

Phần mở rộng Bower dẫn bạn qua việc tạo tệp bower.json của dự án và bạn cũng có thể cài đặt, gỡ cài đặt, tìm kiếm, cập nhật gau, quản lý bộ nhớ ìc . đầy đủ tính năng sách ). Bạn có thể truy cập lệnh liên quan đến bower bằng cách khởi động Kommandalpalette bằng cách nhấn f1, nhập “bower” vào thập phân fl àn àn. àn ( àn ( ) ( ) ( ) ( ) , ( ) .

7.Git-Verlauf

Lịch sử Git cho phép theo dõi các thay đổi của dự án Git bên trong Visual Studio Code. Phần mở rộng này đặc biệt hữu ích khi bạn muốn đóng góp cho một dự án github lớn hơn, và cần phải m ột cách để nhanh chóng kiểm tra những ổ đĩa của Thầy lái xe. ổ ổn định tri à tri à cầng Thầy hướng dẫn lái xe vào ổ của người lái xe. Ổ đĩa ổ đĩa, với cài đặt mở rộng Lịch sử Git, bạn có thể xem lịch sử của toàn bộ tệp hoặc một dòng công cụ có thể bên trong nó. Bạn cũng có thể so sánh các phiên bản trước của cùng một tệp.Bạn có thể truy cập các lệnh liên quan đến Lịch sử Git nếu bạn nhập từ “Git” vào Palette Command (F1), chọn “Git” bên trong danh sách thả xuống và cuối cùng chọn lệnh mà bạn cần. Lưu ý rằng bạn cần phải mở tệp mà bạn muốn xem lịch sử trước khi bạn có thể thực hiện bất kỳ hành động nào trên bất kỳ hành động nào.

Nguồn tham khảo: hongkiat

Alle Rechte vorbehalten

• Report
• Add to series of me

---

Video [Kách Hay] Từ nay bạn có thể debug JavaScript trên Visual Studio Code mà không cần extension mới nhất 2023