- VSCode Visual Studio Code for Faster Web Development
- VSCode Visual Studio Code for Beginners
- VSCode Visual Studio Code Basics
- VSCode Visual Studio Code Essentials
Let us learn the essentials of the VSCode Visual Studio Code. This course/tutorial will help to learn important features, tips and tricks widely used and pretty useful for day-to-day faster web development.
Add topics to categorize your repository and make it more discoverable:
- vscode
- vscode-extension
- vscode-theme
- vscode-snippets
- vs-code
- visual-studio-code
- visual-studio-code-extension
- visual-studio-code-theme
- vs-code-shortcuts
- visual-studio-code-shortcuts
- vscode-web-development
- vscode-visual-studio-beginners
- vscode-visual-studio-basics
- vscode-visual-studio-essentials
- vscode-emmet
- vscode-multicursor
- vscode-prettier
- vscode-debugger
- vscode-tips-tricks
- vscode-command-palette-navigation
Hi All, I'm Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional, I wanna welcome you to the VSCode Visual Studio Code for Faster Web Development.
VSCode Visual Studio Code is one of the most powerful IDE (Integrated Development Environment) developed and maintained by Microsoft Corporation. It works extremely well with almost all programming languages like C# (C-Sharp), Java, Python, JavaScript and so on. VSCode Visual Studio Code is loaded with various rich features and functionalities.
Let us learn the essentials of the VSCode Visual Studio Code. This course/tutorial will help to learn important features, tips and tricks widely used and pretty useful for day-to-day faster web development.
This tutorial explains the fundamental/essential concepts to make the best use of the VSCode Visual Studio Code to work faster. Here will go through and learn some important capabilities of the VSCode Visual Studio Code.
Welcome to the new tutorial series on VSCode Visual Studio Code.
In this introductory VSCode Visual Studio Code module will have a look and learn:
- What is Visual Studio Code?
- Features of Visual Studio Code
- Why do we need a Visual Studio Code?
- How to install the Visual Studio Code?
- Basic Operations in Visual Studio Code
- Command-Line, Command Palette Navigation
- File Encoding Support in Visual Studio Code
- Shortcuts in Visual Studio Code
- Customization in Visual Studio Code with Themes and Icon Themes
This Course/Tutorial is ideal for:
- Freshers
- Intermediates
- Beginner Programmers
- Any Developer/Designer
- Web Designers and Developers, Front-End/UI Designers and Developers
After completing/attending/finishing this Course/Tutorial, participants should be able to:
- Understand What, Why and How to use VSCode Visual Studio Code
- Install/Setup VSCode Visual Studio Code
- Acquainted with various features of VSCode Visual Studio Code
- Use VSCode Visual Studio Code from Command Line
- Practice/Apply shortcuts of VSCode Visual Studio Code
- Customize VSCode Visual Studio Code with Color and Icon Themes
- Install and use various extensions available in Visual Studio Code, which makes programmers life easier
- HTML5
- CSS3
- JavaScript
- Basics of any programming language
- Basic web development knowledge is useful but not required
- Introduction to VSCode Visual Studio Code
- Features of VSCode Visual Studio Code
- 2.1. Code Editor
- 2.2. Debugger
- 2.3. Designer (Visual Studio)
- 2.4. Other Tools (Visual Studio))
- 2.5. Customizable and Extensibility
- Getting started with VSCode Visual Studio Code
- 3.1. How to install VSCode Visual Studio Code?
- 3.2. User Interface-Interface Overview
- 3.2.1. Activity Bar
- 3.2.2. Side Bar
- 3.2.3. Editor Groups
- 3.2.4. Various Panels
- 3.2.5. Status Bar
- 3.3. Basic Operations in VSCode Visual Studio Code
- 3.4. File Encoding Support in VSCode Visual Studio Code
- Accessing Visual Code from Command Line | Additional Command Line Arguments
- Command Palette and Navigation
- Editing Tips and Tricks
- Intellisense and Code Autocomplete
- Shortcuts in Visual Studio Code | 8. Shortcut Keys in Visual Studio Code | 8. Keyboard Shortcut in Visual Studio Code
- Customization with Themes
- Favorite and Popular Extensions
- VSCode Resources
Visual Studio is an Advanced Integrated Development Enterprise exclusively developed by Microsoft Corporation in the year 2000. It is actively used to develop Computer Programs, Websites, Web-Desktop Applications, Mobile Applications, Games and much more.
VSCode Visual Studio Code is an awesome, open-source, lightweight but powerful source code editor that runs and is available cross-platform for Desktop for Windows, macOS, and Linux. It supports around 50+ programming languages to code and compile - Visual Basic, C, C++, C# (C-Sharp), Java, JavaScript have named a few important and popular languages supported well.
It Optimises your web development workflow using VSCode's most powerful features and extensions. As per the Stackoverflow Developer survey 2018/2019, VSCode Visual Studio Code is the most popular Developer/Development Environment Tool across the globe.
| Year | History |
|---|---|
April 29, 2015 |
Visual Studio Code was announced on April 29, 2015, by Microsoft at the 2015 Build conference |
November 18, 2015 |
On November 18, 2015, Visual Studio Code was released under the MIT License and its source code posted to GitHub |
April 14, 2016 |
On April 14, 2016, Visual Studio Code graduated the public preview stage and was released to web |
Here are the main reasons to use Visual Studio:
- Light Weight
- Fast
- Lightning-fast source code editor
- Open-Source (Free)
- Cross-Platform (Install and Use on any OS Operating System)
- Simplicity (simple to use)
- Powerful developer tooling/Tools
- Multi-Cursor
- IntelliSense and/or code completion
- Debugging
- Extensible
VSCode Visual Studio Code helps us to be instantly productive with:
- Syntax highlighting
- Bracket-matching
- Auto-indentation
- Box-selection
- Snippets
- Intuitive keyboard shortcuts
- Easy customization and community-contributed keyboard shortcut mappings and many more
Let us have a look at some of the important features of VSCode Visual Studio Code:
- Code Editor
- Debugger
- Designer (Visual Studio)
- Other Tools (Visual Studio)
- Customizable and Extensibility
- VSCode Visual Studio Code have best world-class code editor which supports multiple languages and functionalities (latest versions support for hundreds of languages)
- It enables bookmarks in code to incorporate with navigation
- With normal code typing, it also provides incremental Search, multiple item clipboard and task list features
- The VSCode Visual Studio Code debugger works as Machine Level Debugger as well as Source Level Debugger
- VSCode Visual Studio Code includes an interactive debugger, so you can step through source code, inspect variables, view call stacks, and execute commands in the console
- WPF Designer (Windows Presentation Foundation)
- WFD Designer (Windows Form Designer)
- Web Designer - Web Page Design with Drag and Drop facility
- Class Designer - Class and Class Member with UML modeling
- Mapping/Data Designer - Database, Data Table Schema
- Server Explorer
- Object Browser
- Data Explorer
- Solution Explorer
- Customize every feature to your liking and install any number of third-party extensions
- VSCode Visual Studio Code includes a public extensibility model that lets developers build/create and use own extensions, and richly customize their edit-build-debug experience
- Check Themes:
View Menu-> Command Palette -> >Theme
or- Use the shortcut key:
COMMAND + SHIFT + P->>Theme
- Check Extensions:
- Click on Extensions Icon available at left hand side Activity Bar
or - Use the shortcut key:
COMMAND + SHIFT + X
- Click on Extensions Icon available at left hand side Activity Bar
- Download the appropriate/respective VSCode Visual Studio Code binary installer as per your OS Operating System from website URL: https://code.visualstudio.com/download
- Double click on the executable file and simply follow the instruction to Setup/Install
VSCode Visual Studio Code is a high-end visual text/code editor. VSCode adopts a common user interface and layout of an explorer on the left side - with files and folders to access, and an editor on the right side - shows the content of opened files.
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 VSCode Visual Studio Code default User Interface is divided into 5 areas/parts/region:
NOTE: One can control the VSCode Visual Studio Code appearance from the
View Menu
- Located on the far top left-hand side
- Access it from
View Menu -> Appearance -> Show Activity Bar - Helps/Lets switch between different views/activity and shows additional context-specific indicators like
search files, files folder explorer, Git, etc.(Clicking on different icons opens respective views as given below):- Search (
COMMAND + SHIFT + F) - Explore (
COMMAND + SHIFT + E) - Source Control (
CONTROL + SHIFT + G) - Debug and Run (
COMMAND + SHIFT + D) - Extensions (
COMMAND + SHIFT + X)
- Search (
- Reside/Located at the left top side just after the Activity Bar
- Side Bar consists of various view and different small panels for the respective options chosen from Activity Bar
- It Contains different views like the Search options, Explorer, etc. to assist while working on your project
- Access it from
View Menu -> Appearance -> Show Side Bar
or - By clicking on the icons from Activity Bar (event by pressing the shortcut keys for Search (
COMMAND + SHIFT + F), Explore (COMMAND + SHIFT + E) and so on...)
or - Use the shortcut key to toggle Side Bar:
COMMAND + B
- Reside at the center/middle of the screen (On the Right side just after the Side Bar)
- Its the main Editor Area where we do programing/coding or typing
- The main area to edit all the files/code/program, One can open editors side by side vertically and horizontally
- Access it from
View Menu -> Appearance -> Show Editor Area
- Reside just below the Editor Groups
- Access is from Menu option:
View -> OutputorView -> Debug ConsoleorView -> TerminalorView -> Problems - One can simply pull it up by dragging from bottom of the screen at status bar
- Use the shortcut key to toggle Panels:
COMMAND + J - It displays different panels like:
- Problems (
COMMAND + SHIFT + M) - Output (
COMMAND + SHIFT + U) - Terminal (`CONTROL + ``)
- Debug Console (
COMMAND + SHIFT + Y)
- Problems (
- Reside at the bottom center/middle or bottom right of the screen
- Status Bar provides information about the Line Number, Space Indentation, Character Encoding, EOL sequence, File type-Language code, Provide feedback if any, Notifications, etc.
- Information about the opened project and the files currently working/editing
- Access it from
View Menu -> Appearance -> Show Status Bar
The Basic Operations in VSCode Visual Studio Code are:
- Create a New Project
- Run the Project
- Set Breakpoints
- Execute an existing Project
We can set the file encoding either globally or based on workspace by using files.encoding setting in User Settings or Workspace Settings.
Some commonly used and popular encodings are: UTF-8, UTF-16, RTF, Western Windows, Western ISO, CP, GB
As and when we install VSCode Visual Studio Code, it is added to system environment variables path and so we can launch/open VSCode from the command prompt (Command window or Terminal or DOS/Unix/Linux Command Prompt) by using command: code or code -n or code .
| Command | Use Description / Command Details |
|---|---|
code |
Opens the VSCode instance from last session we used/left-off |
code -n |
Opens the fresh VSCode instance, without any project or file folder structure |
code . |
Opens the VSCode instance from current/specific folder-directory |
code --goto fileName:lineNum:columnNum |
Open specific file with row/line number and cursor column location. Example: code --goto details.js:10:20 |
code -r: --reuse-window |
Reuse/Open the last ie. already used/opened window |
command to get VSCode Visual Studio Code help:
code -helporcode --help
One can also get VSCode help from:
Help menu -> Choose Welcome or other required option
From Command Palette (COMMAND + SHIFT + P) or View Menu -> Command palette we can access all the functionalities of VSCode Visual Studio Code including the keyboard shortcuts for widely performed tasks and most common operations.
One can execute editor command, Open required files, Search for required utilities-symbols, etc. all using the one and same interactive window, the Command Palette.
COMMAND + P:
- The shortcut key
COMMAND + Pis used to open desired file or navigate to any file from workspace - Open Single File:
- (Just type partial name -> Down Arrow -> choose file to work)
- Open multiple files at a time:
- (Just type partial name -> use Right Arrow, it will keep opening files for you)
(COMMAND + P) + (COMMAND + P): Toggle between two files we want to work (Jumps or Toggle between last/previous and current file)
CTRL + SHIFT + TAB: Toggle/Switch between currently opened files
(COMMAND + P) @ / or (COMMAND + SHIFT + O): The@ symbolinside Nativation Panel is used to jump to specific/particular method-function/.class or #Id/HTML element-tag/Heading-Header Section in .JS/.CSS.HTML/.MD file respectively
(COMMAND + P) @: / or (COMMAND + SHIFT + O:): The: symbolwith @ is used to group the sysmbols by category/type i.e.(COMMAND + P) @:in .JS file will segregate the class, constructor and function which provides lots of ease to navigate search and use required method
(COMMAND + P) # / or (COMMAND + T): The# symbolinside Nativation Panel is used to jump to or open .JS from workspace file which contains the specific/particular method-function
F12 / or FN + F12 / or COMMAND + CLICK: Go to Definition.F12 / or FN + F12 / or COMMAND + CLICKis used to jump to/Go to method-function Definition from where its originated
(COMMAND + P) : / or CTRL + G: Go to Specific line. VSCode Visual Studio Code denotes the line number range we can go/jump/visit to current open file
(COMMAND + P) ?: Show help of various commands available in Nativation Panel
(COMMAND + P) > / or (COMMAND + SHIFT + P):
- Shows various commands available in Nativation Panel Editor with shortcut keys available if any
(COMMAND + P) >: is the central part ie. heart of the Nativation Panel Editor with almost every task and function available(COMMAND + P) >Themesor(COMMAND + K + T): to switch between different themes
Any time if you want to change/edit at multiple locations/places at one go the key ALT + CLICK can help you.
ALT + CLICK can be used to place Multi-Cursor and do the necessary changes once at all the places...no need to implement the changes one after another.
If you want to select specific/particular word through-out the document COMMAND + D is the key for you.
- Place the cursor on the word you want to search or edit through-out the document/file, press
COMMAND + Dtill the cursor reaches the end of the document/file. - Once the complete selection is done, change or edit the word - it will reflect through-out selection in one go
ALT + SHIFT + CLICK is used to make rectangular Column wise selection and make the necessary changes at one go
COMMAND + U - To go to last cursor position
(COMMAND + K) + (COMMAND + Q) - To go to last edit position
COMMAND + C: By default VSCode Visual Studio Code copy current whole/complete line (No need to select line, the copy criteria is current active line on which cursor is placed or blinking)ALT + SHIFT + UP ARROW: Copy the current line and Paste just aboveALT + SHIFT + DOWN ARROW: Copy the current line and Paste just below
ALT + UP ARROW: Moves the current line to above/up positionALT + DOWN ARROW: Moves the current line to below/down position
COMMAND + K + F: Format the code as per programming language technical specification (extension - Prettier)
As and when we type something if VSCode Visual Studio Code knows the word/phrase/keyword it offers word completion and Intellisense (shortcut key: CTRL + SPACEBAR key)
- While working with HTML and CSS
Emmetplugin is very helpful, which helps to type markup and style properties quickly
- Type
Emmetrelated statements as given below and pressTAB
div.container>h1+pwill expand to:
<div class="container">
<h1></h1>
<p></p>
</div>- Just press
CTRL + SPACEBAR keyto get help/IntelliSense of the property or - Start the first letter of property and choose from the list
Emmetshortcuts or properties will help to write and complete CSS things faster and makes life easier- Type
Emmetrelated CSS properties likebgcand pressTABit will expand tobackground-colorlike that one can simply use any CSS properties with Emmet
- When we hover on JSON key-value, it shows details about the same
CTRL + SPACEBAR keyhelps to get the name of popular key or property or keywords related to JSON
COMMAND + SHIFT + Vis used to preview the output of .MD (Markdown) file
- Hover on any class member or property or variable, it shows its type with the accepted value
Here are some of the important and widely used actions with shortcut key:
- press
(COMMAND + K) + (COMMAND + S)to get keyboard shortcut list COMMAND + SHIFT + P-> shortcut -> Help: Keyboard Shortcut Reference
COMMAND + P >Theme
COMMAND + P >Theme-> Color ThemeCOMMAND + SHIFT + P->>Theme-> Color ThemeCOMMAND + K + Tor(COMMAND + K) ((COMMAND + T)-> Color Theme`- From Menu Bar:
Code Menu -> Preferences -> Color Theme
COMMAND + P >Theme-> File Icon ThemeCOMMAND + SHIFT + P >Theme-> File Icon Theme
Seti (Visual Studio Theme)is default and looks awesome
Choose
Install Additional File Icon Themeto install new customized icon theme namedMaterial Icon Theme, it makes editor and icon more fancy and engaging
- Emmet
- Emmet is a plugin for text editors that helps you write HTML and CSS faster and efficiently
- Prettier
- Prettier is a solid/hardcore code formatter
- ESLint
- ESLint is a powerful and popular linting tool, which helps you spot errors in your code and fix them as you write and which helps you follow common best-practices
- Git / Gitlens
- Source Control
- Numbered Bookmarks
- Mark lines and jumps to them
- Angular 6 Snippets
- To get Angular code snippets free
- Angular v6 Snippets
- To get Angular code snippets free
Reference: https://code.visualstudio.com/docs
Reference: Visual Studio Code -> Welcome Screen
Reference: Visual Studio Code -> Help Menu