Visual Studio 2017 keyboard shortcuts. Created Date: 3/8/2017 1:08:16 PM.
CTRL+Q for Quick Launch. CTRL+Q opens the quick launch so you can search an indexed list of. PyCharm Cheat Sheet. Python 3 Cheat Sheet. React.js cheatsheet. ReStructuredText Syntax. Regular Expressions. Regex cheatsheet. SQL Connection strings. Visual Studio Code. Keyboard shortcuts for Windows - Visual Studio Code. Keyboard shortcuts for macOS - Visual Studio Code.
Workspaces
VS Code has a concept of workspaces — usually, a workspace is just the root folder of your project. ⌃ + r will bring up a list that let’s you quickly switch between recent files, but the list also includes workspaces. This means ⌃ + r functions as a quick way to switch between projects — press it, type some characters of the project name, and hit enter. The list is split into recent workspaces and recent files.
A workspace starts with you opening a folder in VS Code, but workspaces are not limited to a single root folder. You can add multiple folders to a workspace, for example if your project involves working on a client and a server component simultaneously. In this case, ⌃ + r won’t remember this workspace unless you explicitly save it in a file. VS Code will prompt you to do this as you close the workspace.
If you change settings for your current workspace in VS Code, the settings will usually be saved inside the .vscode folder. With a multiple-folder workspace, you can still have folder-specific settings in .vscode, but you can also have settings that apply to the whole workspace in the .code-workspace file — this is the file VS Code prompts you to save as you close a multi-folder workspace.
Cheat Sheet for Visual Studio Code
We've created a handy cheat sheet with keyboard shortcuts and some tips & tricks for VS Code. Download it for free!
Formatting
Automatic code formatting is listed here, but it could just as well have been in the article on editing. The reason is that auto-formatting replaces quite a few editing operations — instead of wrangling with editing shortcuts to get your code lined up, correctly wrapped and looking good, you just input your code without regard for formatting, hit a keyboard shortcut to format the file, and you’re good.
VS Code has commands for formatting the active file and the selected text, and built-in formatters for JavaScript, TypeScript, JSON and HTML. Extensions can add formatters for these and other languages. The first time you choose to format a file, if you have multiple formatters for that file type installed, VS Code will ask you which formatter to use, and remember your choice for the future. If you later change your mind or if you install a new formatter you want to use for that file type, you can change the default formatter. This is done by running the command “Preferences: Configure Language Specific Settings…”, and selecting the relevant language. Here, you will find a setting called editor.defaultFormatter — you can either change this to what you want, using the available smart suggestions, or remove the setting altogether, and the next time you try to format a file, VS Code will ask you which formatter to use.
There are some potential pitfalls here. A small example may serve to point out one I personally came across. I like to use the Prettier formatter (through an extension) for JavaScript and CSS, while using the built-in formatter for HTML. This can be achieved by selecting the formatter per language in the way mentioned above. Formatters can also have preferences of their own, so for example, I set the option html.format.wrapAttributes to preserve-aligned to make the built-in HTML formatter preserve alignment of HTML attributes. The Prettier formatter allows configuration as well. However, I also occasionally work with Vue.js, in which you author .vue files including HTML, JavaScript and CSS in a single file. I’ve installed the Vetur extension for Vue.js, and configured this to be the default formatter for Vue.js single-file components. Now, Vetur doesn’t actually format the files itself, it just calls out to other formatters for the different sections of the .vue file. Vetur has its own options for which formatter to call for the various types of code. So, for example, in my settings, I have this:
This tells Vetur to use the default VS Code HTML formatter for the HTML sections of .vue files, and sets the same value for the “wrap attributes” option as I did for normal HTML files above (confusingly, through a different property name). The option for the default HTML formatter doesn’t automatically get picked up by Vetur. This is an example where getting formatting to behave as expected gets a bit complicated, but in the end, it’s possible to achieve the desired result.
Terminal
Along the bottom of the VS Code interface, there is a panel that can be toggled on and off with ⌘ + j. This panel contains tabs called “problems”, “output”, “debug console” and “terminal”. In addition to toggling the panel on and off, you can focus on the terminal specifically using the keyboard shortcut ⌘ + `, after which the same shortcut will toggle the panel on and off.
By default, the built-in terminal starts up in the workspace root directory. This, along with other things including the shell used, can be configured. ⌃ + ⇧ + ` will start a new terminal. You can shift between the open terminals using the dropdown in the upper-right corner of the panel, or by setting up keyboard shortcuts for this. The terminal can be split as well, so you can have two shells available side-by-side. Finally, you can bind a keyboard shortcut to the command “View: Toggle Maximized Panel”, giving you a quick way to temporarily maximize the panel when doing more involved work.
In some cases, perhaps when you’re working on a shell script or checking build commands in a README, it’s useful to know that there’s a command to “Run Selected Text in Active Terminal”. There’s also a command to “Run Active File in Active Terminal”.
Having one or more terminals a keyboard shortcut away frequently comes in handy. It can be very useful for things like deployment and build commands, package management, running development servers or watchers… although for some of these purposes, the tasks support in VS Code, which we’ll get to next, can be used as well.
Tasks
In many programming projects, there are various tasks to be run. Building the project, deploying it, watching files for changes, running tests and generating documentation are examples of tasks that might play a part in a project. These tasks are often managed by tools like Rake for Ruby or gulp for web projects.
VS Code can detect tasks for a few of these tools, like gulp and npm out of the box. In addition, extensions can add support for autodetecting tasks from other tools. By running the command “Tasks: Configure Default Build Task”, you can choose one of the detected tasks as the default build task, and then run your build task using the keyboard shortcut ⌘ + ⇧ + b. Pressing ⌘ + ⇧ + b or running the command “Tasks: Run Build Task” without having configured a default build task will let you choose among the tasks VS Code is aware of. Similarly, you can configure a default test task. The choice of default task is saved in a file called tasks.json in the .vscode folder in your workspace.
If the task auto-detection doesn’t cut it, you can also configure custom tasks in the tasks.json file, running a custom shell command for example. A custom task can be set as the default build command.
In addition to build and test tasks, the command “Tasks: Run Task” lets you select a task to run. Finally, tasks can be run by pressing ⌘ + p for 'Quick Open', typing “task”, a space, and then the beginning of the name of the task or tool.
Final Words
This has been a quick look at some of the tooling support of VS Code. Generally, there’s a lot of configuration available for each of the systems covered here, and if you need more detail, the VS Code documentation is a good place to start. In addition, there are a lot of systems in VS Code not covered here: version control, debugging, extensions and more. You can find information on these, too, in the official documentation as well as in other places. For our part, we hope you learned something from these articles, and that you got some useful information you can bring into your own workflow.
Cheat Sheet for Visual Studio Code
We've created a handy cheat sheet with keyboard shortcuts and some tips & tricks for VS Code. Download it for free!
Here, design samples of various effects to text are posted.
Headline (Heading) Style DesignCSSThe headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.
Using
In this example, Picturefill is added for IE.
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.
Flex is the value of the CSS display property.
It is a standard button design of Bootstrap Framework.
Hover.cssCSSHover.css is a style-sheet collection of hover effects.
Button.cssCSSButton.css is collection of CSS3 button animations.
Bootstrap CardCSSIt is a standard Card design of Bootstrap Framework.
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.
Lettering.jsjQueryLettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.
Textillate.jsjQueryTextillate.js is a jQuery plugin that adds In / Out animation effects to text.
FitText.jsjQueryFitText.js is jQuery plugin that fits the font size according to the width of the parent element.
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.
YouTube EmbedIntroduction of various embedment methods of YouTube.
FitVids.jsjQueryFitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.
xZoomjQueryxZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.
Instagram.css is a stylesheet set that filters photos like instagram.
Moment.js is a javascript that processes and displays date and time.
Bootstrap Material DatePickerjQueryBootstrap Material DatePicker is jQuery data picker plugin using Moment.js.
Multifilter is jQuery Table Filtering Plugin.
Flex TableCSSResponsive table using 'display: flex;'.
Not supported for rowspan.
Responsive table using 'display: grid;'.
Not supported for rowspan.
It is a standard Table design of Bootstrap Framework.
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.
Select2 #1. Basic SettingjQuerySelect2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.
jQuery Searcher is jQuery search/filtering plugin that supports various markups.
It is a standard Carousel of Bootstrap Framework.
FlexSlider #1. Single SliderjQueryFlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
GreedyNavjQueryGreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.
GridTabjQueryGridTab is a lightweight jQuery plugin to create grid based responsive tabs.
jQuery.NiceScrolljQueryjQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.
metisMenujQuerymetisMenu is a jQuery plugin that expands vertical and vertical menus.
fullPage.js #1. basic fullscreen scrollingjQueryfullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
Textillate.jsjQueryTextillate.js is a jQuery plugin that adds In / Out animation effects to text.
ScrollajQueryScrolla is jQuery scroll animation plugin.
Hover.cssCSSHover.css is a style-sheet collection of hover effects.
Animate.cssCSSAnimate.css is a style-sheet collection of animation effects.
jQuery Easing PluginjQueryjQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..
jQuery.mb.YTPlayer is jQuery Background player plugin.
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.
- Social
It is a standard Carousel of Bootstrap Framework.
Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.
Bootstrap ButtonCSSIt is a standard button design of Bootstrap Framework.
Bootstrap TableCSSIt is a standard Table design of Bootstrap Framework.
Visual Studio Cheat Sheet Pdf
HTML5 Cheat Sheet by Make A Website Hub
CSS3 Cheat SheetCSS3 Cheat Sheet by Smashing Magazine
Visual Studio Code Keyboard ShortcutsThis is the Visual Studio Code default keyboard shortcut list.
GreenSock Cheat SheetCheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.
Visual Studio Keyboard Shortcuts Cheat Sheet
On this page you can search for codes collectively.
Design NewsVisual Studio Cheat Sheet 2017
It is a news feed about design.