Exercise files for a sample website to follow along with
Installing VS Code
You need to run installer for the platform when the app downloads
Have to authenticate
The VS Code UI
Left-hand side of the app, is the vertical list of icons called the view bar
The top icon switches to the explorer view , and you can also select this view by typing control.
This view displays the files and folders for the current project along with any currently open editors.
See status bar shows information about the current project and the files that are open in the workspace
The application menus contain many of the most common editing, and workspace commands, but there are other ways of accessing them.
One way is by using the command palette.
You can execute editor commands, open files, search for symbols, and much more.
Zen mode Let's see focus on Justified that you're working on. Everything in the UI disappears, except for the file thats been working on.
Basic Editing
Visual Studio code is a powerful text editing applications, and it can be used to edit all kinds of text paste files
Since programs are usually built out of individual lines of codes, these commands take lines into account as well. One of the most common ways of making code easier to read is to use indentation.
The integrated terminal
Visual Studio code has a integrated terminal.
Having a terminal go to the editor is great because you don't have to change to another application window in order to execute terminal commands.
To be at the terminal you can either select integrated terminal from your view menu or you can type control backtick and that's the same on both platforms.
Integrated Source Control
VS code leverages your existing installation of git.
To end stage the file you can right-click and shoes on stage or click little icon
You can perform other git operations using this context menu at the top of the sidebar when you are in git view.
You can sink, you can push your changes, commit your changes, Etc
Having git integrated directly into the editor is a really great time saver.
Configuring preferences
One of the best features of visual code is how extensible and configurable it is.
You can install extensions to modify and enhance the capabilities of the app.
You can change keyboard shortcuts, and you can create your own smart code Snippets.
To open the app preferences, the editor on the right hand side is where you place your custom values for the settings you want to change.
Setting keyboard shortcuts
VS Code Has a large number of predefined keyboard shortcuts.
And many of the commands that are most likely used as a shortcut assigned.
In the preferences menu just choose keyboard shortcuts, this will bring up a key bindings.json file.
Each shortcut consists of three things: key property, common property, when property.
Using extensions
VS Code has a rich ecosystem of extensions that makes and process of finding, installing, and managing extensions very easy.
Marketplace.visualstudio.com and then select visual code tab.
Each extension has a small gear icon next to it. You can disable or uninstall.
Essential extensions
Some extensions use different languages.
Jquery snippets extension
Beautify extensions formats source code.
VS Code Doesn't come with a built-in development web server
There is a good one available called express it hosts your workspace using the express web server. after you install it and reload you can use the command palette to start the server.
Do stop the server I need to execute the stop server command.
When working with rest API, it's helpful to have a tool I can quickly execute in test HTTP calls and display responses.
REST API
Working with snippets
Code supports Snippets, would you can think of as smart fragments of code that can be inserted by typing just a few characters.
This makes it easy to enter common code patterns with last typing.
The app ships was several Snippets already built in but you can also Define your own.
Script.js which is in the scripts folder.
There are placeholders for the function name, the parameters, and the body of the function.
Under the preferences menu Choose the item labeled user Snippets.
Snippets are defined using Json.
Color and icon themes
Everything from how many spaces to use to indent with, to which font to use for coding, and even the colors to use for various symbols in the source code are uniquely suited to each developer.
To choose a color scheme, look under the preferences menu here in the code menu, and again if you're on Windows or Linux the preferences menu will be under the file name.
Files, folder, and projects
VS Code Doesn't need to create a special project filed to keep track of things.
Preview mode is a useful tool because it reuses the same tab as you click around on different files and it doesn't open multiple tabs.
If you're browsing the source code your editor workspace doesn't get polluted with too many open tabs.
If you double-click the file or make an edit change to one of the files that's in preview mode tab then that tab gets dedicated to that file and remains persistent in the top bar.
During development it's useful to quickly locate the folder that contains a particular file or subfolder and open it in the OS file browser. you can do this by right-clicking the item in the sidebar and choosing review in folder.
Side by side edition
A common scenario when editing source code is that you often want to edit one part of a file while keeping another part of the file and view or you want to view two different files at the same time so you can refer to one while editing the other.
VS Code make this easy by allowing you to open editor side-by-side for either the same file or multiple different files.
To work on the same file in side-by-side mode you can just type command backslash or control backslash.
You can also click the split editor icon in the tab strip or right-click the file name in the Explorer list and choose open to the side
IntelliSense
Completion code hinting or IntelliSense, there is no doubt that this feature is one of the best Innovations in the editors Bass.
Vscode intelli sense supports JavaScript, typescript, Json, HTML, CSS, Less, and SAS, right out of the box.
You can increase that list by installing language service extensions from the visual studio Marketplace.
Finding and replacing
Searching through code is fairly straightforward. You simply type command F
You can use the enter key to advance to the results and her which will wrap around back to the beginning
You can also initiate a search by placing the cursor within a piece of text or by highlighting a selection of text before typing command F
If you want to perform a find and replace operation within the current file on the little arrow in the find controls
Editor features
Exit that will remember the content of a unsaved files.
if I start the app up again you can see that I get my entitled document back with everything that I've typed enter the hot exit feature is something that you can configure in the settings.
Autosave will save a contents of your files after a short delay and again, you can configure this in the settings.
Format on Save defile can be automatically formatted using whatever custom formatter installed for the language
Web code editing
During development you will want to quickly comment and uncomment code to try out various things or help narrow down bugs
In a vscode you can quickly comment sections of Code by using the toggle comment command.
Vscode have the ability to automate some of the tedium of entering these comments
Mark down is a simplified file formats for creating HTML documents using some simple syntax
If we go back to the editor type and Emmett snippet that lets me insert some structured content very quickly. the nav structure has a nav tag an unordered list and repeating list items with links inside them.
