LEARNING OUTCOME 1:

“VISUAL STUDIO CODE”

SUBJECT:

WEB APPLICATION

TEACHER:

ING. DANIEL ERNESTO RUIZ ANZALDÚA

STUDENT:

NIDIA NICOLLE GUERRERO HERNÁNDEZ

CD. REYNOSA, TAMAULIPAS SEPTEMBER 2023

 Table of contents

1. Introduction ........................................................................................ 3
1.1 What is an IDE? ............................................................................. 4
2. Installation and features ..................................................................... 5
2.1 How to install VSCode in Windows 11? ...................................... 5
2.2 Some keyboard shortcuts........................................................... 8
2.2.1 Shortcuts for searching and navigating ............................. 8
2.1.2 Shortcuts for editing and refactoring ................................ 8
2.1.3 Shortcuts for debugging and testing ................................. 9
2.1.4 The most common shortcuts for use in the IDE .............. 10
2.1.5 Shortcuts for file management ........................................ 11
2.3 Home page ............................................................................... 12
2.4 Terminal, Debugging, Output, and Problems ........................... 17
2.4.1 Terminal .......................................................................... 17
2.4.2 Debugging ....................................................................... 18
2.4.3 Output ............................................................................. 19
2.4.4 Problems ......................................................................... 21
2.5 Some Extensions ...................................................................... 22
3. Conclusion ................................................................................ 26
4. Bibliography ............................................................................. 27
 1. Introduction
Visual Studio Code is a source-code editor that can
be used with a variety of programming languages,
including C, C#, C++, Fortran, Go, Java, JavaScript,
Node.js, Python, Rust, and Julia. It is based on the
Electron framework, which is used to develop
Node.js web applications that run on the Blink
layout engine. Visual Studio Code employs the
same editor component (codenamed "Monaco") used in Azure DevOps
(formerly called Visual Studio Online and Visual Studio Team Services).

Out of the box, Visual Studio Code includes basic support for most
common programming languages. This basic support includes syntax
highlighting, bracket matching, code folding, and configurable snippets.
Visual Studio Code also ships with IntelliSense for JavaScript, TypeScript,
JSON, CSS, and HTML, as well as debugging support for Node.js. Support
for additional languages can be provided by freely available extensions
on the VS Code Marketplace.

Visual Studio Code was first announced on April 29, 2015, by Microsoft
at the 2015 Build conference. A preview build was released shortly
thereafter. On November 18, 2015, the source of Visual Studio Code was
released under the MIT License and made available on GitHub. Extension
support was also announced. On April 14, 2016, Visual Studio Code
graduated from the public preview stage and was released to the Web.
Microsoft released most of Visual Studio Code's source code on GitHub
under the permissive MIT License, while the binary releases by Microsoft
are freeware, and include proprietary code.
1.1 What is an IDE?
An IDE, or Integrated Development Environment, enables programmers
to consolidate the various aspects of writing a computer program. IDEs
increase programmer productivity by combining common activities of
writing software into a single application: editing source code, building
executables, and debugging. Some features of the IDEs are:

• Editing Source Code: Writing code is an important part of

programming. We start with a blank file, write a few lines of code,
and a program is born! IDEs facilitate this process with features like
syntax highlighting and autocomplete.
• Syntax Highlighting: An IDE that knows the syntax of your language
can provide visual cues. Keywords, words that have special meaning
like class in Java, are highlighted with distinct colors.
• Autocomplete: When the IDE knows your programming language,
it can anticipate what you are going to type next! We have seen
statements with System.out.println() quite a bit so far. In an IDE, we
might see System as an autocomplete option after only typing Sy.
This saves keystrokes so the programmer can focus on logic in their
code.
• Building Executables: Java is a compiled language. Before programs
run, the source code of a .java file must be transformed into an
executable .class by the compiler. Once compiled, the program can
be run from the terminal. This compilation process is necessary for
every program, so why not have the IDE do it for us? IDEs provide
automated build processes for languages, so the act of compiling
and executing code is abstracted away, like in Codecademy lessons.
• Debugging: No programmer avoids writing bugs and programs with
errors. When a program does not run correctly, IDEs provide
debugging tools that allow programmers to examine different
variables and inspect their code in a deliberate way. IDEs also
provide hints while coding to prevent errors before compilation.
 2. Installation and features
2.1 How to install VSCode in Windows 11?
• Download the Visual Studio Code installer for Windows.
• Once it is downloaded, run the installer (VSCodeUserSetup-x64-
1.82.2.exe). This will only take a minute.
• The setup will be open, and you must accept the License
Agreement:

• Choose where do you want VSCode be installed and where is the

Start Menu be located:
• Select additional tasks and continue with the installation:

• Wait until the installation is complete:

• Launch Visual Studio Code:

• Customize your IDE:

• This is the first screen you see when you launch the VSCode:
2.2 Some keyboard shortcuts

As one of the most popular code editors available today, VS Code offers
a plethora of powerful features and tools that can significantly
streamline the coding process. One of the most valuable features of VS
Code is its extensive set of keyboard shortcuts that allow developers to
perform common tasks quickly and efficiently.
2.2.1 Shortcuts for searching and navigating.
• Ctrl + Q: Displays Visual Studio Search
• Ctrl + T: Displays the Go To All tool
• Ctrl + -: Navigates backward between opened documents in the
current session
• Ctrl + Shift + -: Navigates forward between opened documents in the
current session
• F12: Navigates to a class definition
• Alt + F12: Allows you to view and edit the code of a class in a pop-up
window, from the code file you are writing.
• Ctrl + F12: Navigates to the implementation of a member in a class
• Ctrl + Shift + F12: Moves to the next error line when the error list
window is open and more than one error is listed
• F8: Navigates forward in the list of results of the current window
• Shift + F8: Navigates backward in the list of results of the current
window

2.1.2 Shortcuts for editing and refactoring

• Alt + Enter: Displays quick actions
• Ctrl + K, Ctrl + I: Obtains information about a member of a class
• Ctrl + K, Ctrl + C: Comments multiple selected lines in the source code
• Ctrl + K, Ctrl + U: Uncomments multiple selected lines in the source
code
• Ctrl + Shift + L: Deletes selected lines
• Ctrl + Shift + V: Displays and allows pasting the contents from the
buffer ring (it refers to the history of elements that have been
previously copied)
• Ctrl + F: Finds a specific text in the code
• Ctrl + A: Selects all the lines in the current file
• Ctrl + S: Saves the pending changes in the current file
• Ctrl + Shift + S: Saves the pending changes in all the opened files
• Ctrl + Shift + .: Zooms into the current file
• Ctrl + Shift + ,: Zooms out from the current file
• Ctrl + Up: Moves selected lines up in a code file
• Ctrl + Down: Moves selected lines down in a code file
• Ctrl + K, Ctrl + D: Applies the style rules to the entire document
• Ctrl + K, Ctrl + F: Applies the style rules only in the selected lines in the
document
• Ctrl + K, Ctrl + S: Used to encapsulate the code between common
clauses, such as cycles (while, for, and so on), control statements (if,
switch, and so on), or code regions (#region).
• Ctrl + R: Renames a member
• Ctrl + R, Ctrl + E: Creates a property for a field of a class
• Ctrl + R, Ctrl + G: Removes unused using statements in a class and sorts
them alphabetically
• Ctrl + R, Ctrl + M: Creates a method from the selected code
• Ctrl + X: Cut line (empty selection)
• Ctrl + /: Toggle line comment
• Ctrl + Home: Go to beginning of file
2.1.3 Shortcuts for debugging and testing
• F5: Starts the application in debug mode
• Ctrl + F5: Starts the application without debug mode
• Shift + F5: Stops the application when it is running.
• Ctrl + Shift + F5: Stops the application execution, rebuilds the project,
and creates a new debugging session
• F9: Places or removes a breakpoint
• F10: Skips the execution of code when debugging
• F11: Debugs source code line by line
• Shift + F11: Steps out of the execution of the method
• Ctrl + R, Ctrl + A: Starts unit test execution in debug mode
• Ctrl + R, A: Starts unit test execution without debug mode

2.1.4 The most common shortcuts for use in the IDE

• Ctrl + [ + S: If we have a file open, this shortcut allows us to quickly
select it in the Solution Explorer window.
• Ctrl + Alt + L: Opens the Solution Explorer window
• Ctrl + Alt + O: Opens the Output window.
• Ctrl + \, E: Opens the Error List window
• Ctrl + \, Ctrl + M: Opens the Team Explorer window.
• Ctrl + Alt + B: Opens the Breakpoints window.
• F4: Opens the Properties window.
• Alt + F6: Allows you to scroll back between windows on the panels
that are open.
• Shift + Alt + F6: Allows you to scroll forward between windows on the
panels that are open.
• Shift + Esc: Allows you to close the current tool window
• Ctrl + Alt + Pg Up: Allows scrolling up between open documents even
when it is not the same session.
• Ctrl + Alt + Pg Dn: Allows scrolling down between open documents
even when it is not the same session.
• Ctrl + Tab: Displays a special window with the open documents and
selects the most recent one.
• Ctrl + Shift + Tab: Displays a special window with the open documents
and selects the least recent one.
• Shift + Alt + Enter: Allows you to place the Visual Studio environment
at full screen, allowing you to concentrate on the current document.
Use the same shortcut to get out of full-screen mode
• Ctrl + K + K: Creates a bookmark in the line where we are positioned.
If there is already a bookmark on that line, it will be deleted.
• Ctrl + K + N: Allows you to scroll forward through the different
bookmarks that are part of a project.
• Ctrl + K + P: Allows you to scroll backward through the different
bookmarks that are part of a project.
• Ctrl + P: Quick Open, Go to File…
• Ctrl + Shift + N: New window/instance
• Ctrl + Shift + W: Close window/instance
• Ctrl + ,: User Settings
• Ctrl +: Show integrated terminal
• Ctrl + Shift +: Create a new terminal

2.1.5 Shortcuts for file management

• Ctrl + N: Create a new file
• Ctrl + O: Open a file
• Ctrl + S: Save a file
• Ctrl + Shift + S: Save all open files
• Ctrl + P: Open the Quick Open dialog to quickly search and open a file
• Ctrl + Tab: Switch between open files
• Ctrl + W: Close the current file
• Ctrl + Shift + T: Reopen the last closed file
• Ctrl + Shift + N: Create a new folder
• Ctrl + Shift + E: Show/hide the Explorer panel, which displays the file
and folder structure of your project
• Ctrl+ K Enter: Keep preview mode editor open
2.3 Home page

Menu

Minimap
Editor

Activities
Bar
Panel

Primary Side Bar Status Bar

At its heart, Visual Studio Code is a code editor. Like many other code
editors, VS Code adopts a common user interface and layout of an
explorer on the left, showing all the files and folders you have access to,
and an editor on the right, showing the content of the files you have
opened.

VS Code comes with a simple and intuitive layout that maximizes the
space provided for the editor while leaving ample room to browse and
access the full context of your folder or project. The UI is divided into five
fundamental areas:

• Editor - The main area to edit your files. You can open as many
editors as you like side by side vertically and horizontally.

• Primary Side Bar - Contains different views like the Explorer to assist
you while working on your project.

• Status Bar - Information about the opened project and the files you
edit.

• Activity Bar - Located on the far left-hand side, this lets you switch
between views and gives you additional context-specific indicators,
like the number of outgoing changes when Git is enabled.

• Panel - An additional space for views below the editor region. By

default, it houses output, debug information, errors and warnings,
and an integrated terminal. Panel can also be moved to the left or
right for more vertical space.

Each time you start VS Code, it opens in the same state it was in when
you last closed it. The folder, layout, and opened files are preserved.
Open files in each editor are displayed with tabbed headers (Tabs) at the
top of the editor region. To learn more about tabbed headers, see the
Tabs section below.

Minimap
A Minimap (code outline) gives you a high-level overview of your source
code, which is useful for quick navigation and code understanding. A
file's minimap is shown on the right side of the editor. You can click or
drag the shaded area to quickly jump to different sections of your file.

Breadcrumbs
The editor has a navigation bar above its contents called Breadcrumbs.
It shows the current location and allows you to quickly navigate between
folders, files, and symbols.
Breadcrumbs always show the file path and if the current file type has
language support for symbols, the symbol path up to the cursor position.
You can disable breadcrumbs with the View > Show Breadcrumbs toggle
command. For more information about the breadcrumbs feature, such
as how to customize their appearance, see the Breadcrumbs section of
the Code Navigation article.

Explorer

Explorer is used to browse, open, and manage all the files and folders in
your project. VS Code is file and folder based - you can get started
immediately by opening a file or folder in VS Code. After opening a folder
in VS Code, the contents of the folder are shown in Explorer. You can do
many things from here:

• Create, delete, and rename files and folders.

• Move files and folders with drag and drop.
• Use the context menu to explore all options.

Multi-selection

You can select multiple files in the File Explorer and OPEN EDITORS view
to run actions (Delete, Drag and Drop, Open to the Side) on multiple
items. Use the Ctrl/Cmd key with click to select individual files
and Shift + click to select a range. If you select two items, you can
now use the context menu Compare Selected command to quickly diff
two files.
Note: In earlier VS Code releases, clicking with the Ctrl/Cmd key
pressed would open a file in a new Editor Group to the side. If you would
still like this behavior, you can use
the workbench.list.multiSelectModifier setting to change
multi-selection to use the Alt key.
Outline view

The Outline view is a separate section in the bottom of the File Explorer.
When expanded, it will show the symbol tree of the currently active
editor. The Outline view has different Sort By modes, optional cursor
tracking, and supports the usual open gestures. It also includes an input
box which finds or filters symbols as you type. Errors and warnings are
also shown in the Outline view, letting you briefly see a problem's
location.

Activity Bar

The Activity Bar on the left lets you quickly switch between Views. You
can also reorder Views by dragging and dropping them on the Activity
Bar or remove a View entirely (right click Hide from Activity Bar).
2.4 Terminal, Debugging, Output, and Problems
2.4.1 Terminal
Visual Studio Code includes a full featured integrated terminal that starts
at the root of your workspace. It provides integration with the editor to
support features like links and error detection. The integrated terminal
can run commands such as mkdir and git just like a standalone terminal.

You can open a terminal as follows:

• From the menu, use the Terminal > New Terminal or View > Terminal
menu commands.
• From the Command Palette (Ctrl+Shift+P), use the View: Toggle
Terminal command.
• In the Explorer, you can use the Open in Integrated Terminal context
menu command to open a new terminal from a folder.
• To toggle the terminal panel, use the Ctrl+` keyboard shortcut.
• To create a new terminal, use the Ctrl+Shift+` keyboard shortcut.

VS Code's terminal has additional functionality called shell integration

that tracks where commands are run with decorations on the left of a
command and in the scrollbar:
 2.4.2 Debugging
Debugging is a core feature of Visual Studio Code. In this tutorial, we will
show you how to run and debug a program in VS Code. We will take a
tour of the Run and Debug view, explore some debugging features, and
end by setting a breakpoint.

Breakpoints can be toggled by clicking on the editor margin. Finer

breakpoint control (enable/disable/reapply) can be done in the Debug
view BREAKPOINTS section.

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 code that has not yet been
executed. (For details see below under Node Debugging: Breakpoint
Validation)
Once a debug session starts, the Debug actions pane will appear on the
top of the editor.

• Continue / Pause kb(workbench.action.debug.continue)

• Step Over kb(workbench.action.debug.stepOver)
• Step Into kb(workbench.action.debug.stepInto)
• Step Out kb(workbench.action.debug.stepOut)
• Restart kb(workbench.action.debug.restart)
• Stop kb(workbench.action.debug.stop)

2.4.3 Output

The Output window displays status messages for various features of the
integrated development environment (IDE). To open the Output
window, from the menu bar, choose View>Output or press Ctrl+Alt+O.

Toolbar
The following controls are displayed in the Output window toolbar.

Show results from

Displays one or more panes of results to view. There may be several
panes of information, depending on which IDE tools the output window
has used to deliver messages to the user.
Find message in code
Moves the insertion point in the code editor to the line containing the
selected compilation error.

Go to previous message
Changes the focus of the output window to the previous compilation
error and moves the insertion point in the code editor to the line
containing that compilation error.

Go to the next message

Changes the focus of the output window to the next compilation error
and moves the insertion point in the code editor to the line containing
that compilation error.

Clear All
Deletes all text in the Output pane.

Toggle line wrap

Toggles the automatic line wrap feature on and off in the Output pane.
When automatic line wrap is on, long input text that extends beyond the
display area is displayed on the next line.

Output panel
The output pane selected in the Show results from list displays the
output from the specified source.
 2.4.4 Problems

You can click on the summary or press Ctrl+Shift+M to display the

PROBLEMS panel with a list of all current errors. If you open a file that
has errors or warnings, they will be rendered in line with the text and in
the overview ruler. This is to inform about all problems in the workspace,
otherwise the user might think that there are no problems at all. Since
this is one of the filters, we show the filtered count in the right.

The are some functions in the Problems Panel, these are:

• More filters: In this section, the problems will appear filtered by:

• Collapse All: Collapse All is Fold All in Visual Studio Code. Press Ctrl
+ K + S for All Settings. Assign a key which you want for Fold All. By
default, it is Ctrl + K + 0.
• View As Table: Show all the errors in a table.
• Minimize/Maximize Panel Size.
• Close Panel.
2.5 Some Extensions
These extensions unlock the true potential of VS Code, elevating it to a
whole new level of functionality and productivity. Here are some of
them, classified as:

To Improve productivity

Let us start by introducing some general extensions that improve

productivity and provide a better user experience in VSCode.

1. Prettier: It is a widely adopted code formatter that imposes a

consistent code style on all your projects. It supports multiple
programming languages and automatically formats your code
according to predefined rules, improving readability and reducing
style-related conflicts.
2. Remote SSH: Allows you to work on remote servers or virtual
machines using the secure SSH protocol. It provides a seamless
development experience by allowing you to edit files, execute
commands and debug applications directly from your local instance
of VS Code in remote environments.
3. Live Share: Enables real-time collaboration with other developers
by allowing you to share your development environment. It allows
you to share editing, debugging and terminal sessions, fostering
effective teamwork and enabling seamless pair programming.
4. Better Comments: Add color-coded comments to your code,
making it easier to distinguish between several types of comments.
You can use different prefixes to highlight important notes, TODOs,
warnings, etc.
5. CodeSnap: Simplifies the process of taking screenshots of code. It
captures your code snippets and generates an image file that you
 can easily share with others, making it ideal for documentation,
tutorials and sharing code on social media platforms.
6. Code Runner: Provides a convenient way to quickly execute code
snippets or entire files in various programming languages from
within Visual Studio Code. Eliminates the need to switch between
the code editor and a standalone terminal, allowing you to test and
run code instantly.
7. Path Intellisense: Simplifies file path entry by offering intelligent
auto-completion for file paths in your code. Eliminates typos and
ensures accuracy when referencing files or modules within your
project.
8. vscode-icons: Brings a touch of visual polish to your programming
workspace by replacing the default file icons with a diverse
collection of attractive and intuitive icons.
9. Night Owl: It is a visually stunning theme for VS Code that provides
a soothing and eye-pleasing color palette for your code editor.

To Increase productivity (web deveploping)

Web development is a constantly evolving field, and developers are

constantly looking for tools and technologies that can improve their
productivity. Here are some extensions that will help you increase your
productivity:

1. Live Server: This is a fantastic extension that allows you to create a

local development server with real-time reloading. It allows you to
preview your HTML, CSS, and JavaScript changes in real time, saving
you the hassle of manually refreshing the browser.
2. Auto Rename Tag: It is a handy extension that automatically
renames HTML or XML tags when you modify the opening or closing
tag. It saves you time and ensures consistency when working with
markup languages.
 3. SVG Preview: It is a useful extension for web developers working
with scalable vector graphics (SVG). It provides a real-time preview
of SVG files directly in the editor, allowing you to see the changes
you make in real time.
4. HTML CSS Support: Provides enhanced CSS support within HTML
files. Offers smart suggestions and auto-completion for CSS
properties, ensuring faster and more accurate programming.
5. IntelliSense for CSS class names: Provides smart suggestions and
auto-completion for CSS class names. Parses your CSS files and
provides a list of available class names, making it easy to select the
appropriate class name without errors and typos.
6. CSS Peek: It is a powerful extension that enhances CSS development
by allowing you to look at the associated CSS styles directly from the
HTML or JavaScript code. By simply hovering over a class or CSS ID,
CSS Peek displays the corresponding styles in a window, eliminating
the need to switch between files. CSS Peek is essential when
working with large code bases or intricate CSS dependencies.
7. GitLens: It is a powerful extension that integrates Git capabilities
directly into your editor. With GitLens, you can explore code
authorship, review commit history, and get valuable information
about code changes with line-by-line authoring annotations.

To increase productivity (javascript developing)

There are numerous VS Code extensions available for Python that can
significantly improve your productivity as a developer. Here are five of
the most popular ones:

1. Python: It is a widely adopted linter that helps you detect bugs,

enforce programming standards, and improve code quality in
JavaScript and TypeScript.
2. Pylance: It offers a collection of handy code snippets that can save
you time and effort when writing JavaScript code.
 3. Jupyter: It is a real-time notepad for JavaScript that provides real-
time execution information and results as you write. This extension
can significantly speed up your development workflow.
4. Django: It saves you time and effort by providing intelligent auto-
completion for npm package imports. It suggests package names as
you type, making it easy to import dependencies into your project.
5. Flask Snippets: Provides real-time information about the size of
imported JavaScript or TypeScript modules. Displays the import
size directly in the editor, helping you optimize package size and
identify potential performance bottlenecks.

With its extensive extensions and customizable features, VS Code is a

versatile code editor suitable for your web projects. Whether it is an
application, a database or a website, hosting and managing any of them
becomes simple with Kinsta.
 3. Conclusion
In conclusion, Visual Studio Code (VSCode) is a popular and (able to do
many different things well) code editor that has become a staple tool for
developers. Its history traces back to its initial release in 2015, and it has
since gained a huge user base due to its powerful features and ease of
use.

One of its (excellent quality) features is its long/big keyboard shortcut

support, allowing users to travel safely through and edit code (in a way
that produces a lot with truly little waste). Also, VSCode provides a clear
and customizable output (connecting point/way of interacting with
something), making it easy to view code execution results and error
messages.

Developers often find value in the built-in (finding and correcting

mistakes in) console and terminal, (making faster and more efficient) the
development process by providing a brought together (as one)
(surrounding conditions) for coding, running, and (finding and correcting
mistakes in) computer programs. What is more, the huge community of
extensions allows users to custom-design VSCode to their specific needs,
improving ability to do things and working well and getting a lot done
across different programming languages and development workflows.

While VSCode is a highly regarded code editor, users may meet

occasional issues or conflicts with extensions. However, its active
development community and frequent updates help face/deal with
these problems, securing/making sure that it remains a top choice for
developers across the globe.
 4. Bibliography
• Sentre, T. (2023b). One hundred crucial keyboard shortcuts for VS code users.
DEV Community. https://dev.to/devland/100-crucial-keyboard-shortcuts-for-
vs-code-users-4474

• Colaboradores de Wikipedia. (2023). Visual Studio Code. Wikipedia, La

Enciclopedia Libre. https://es.wikipedia.org/wiki/Visual_Studio_Code

• Integrated terminal in Visual Studio code. (2021, November 3).

https://code.visualstudio.com/docs/terminal/basics

• Debugging - vscode-docs. (n.d.). https://vscode-

docs.readthedocs.io/en/stable/editor/debugging/

• TerryGLee. (2023, June 19). Ventana de salida - Visual Studio (Windows).

Microsoft Learn. https://learn.microsoft.com/es-
es/visualstudio/ide/reference/output-window?view=vs-2022

• Olawanle, J. (2023). Las 30 Mejores Extensiones de VS Code para Mejorar la

Experiencia de Programación. Kinsta®.
https://kinsta.com/es/blog/extensiones-vscode/

• Visual Studio Code User Interface. (2021, November 3).

https://code.visualstudio.com/docs/getstarted/userinterface