![]() ![]() Productivity Tips -Become a VS Code power user with these productivity tips.From the Integrated Terminal, type node app.js.Create New Terminal ( ⌃⇧` (Windows, Linux Ctrl+Shift+`)).Split Terminal ( ⌘\ (Windows, Linux Ctrl+Shift+5)).View > Terminal ( ⌃` (Windows, Linux Ctrl+`)).Format Document command ( ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)).IntelliSense provides suggestions as you type.Create a simple "Hello world" console application called app.js.File > New File ( ⌘N (Windows, Linux Ctrl+N)).From a terminal or command prompt, type node -version.Install the Node.js runtime to execute JavaScript code.View > Explorer ( ⇧⌘E (Windows, Linux Ctrl+Shift+E)).Use File Explorer to view the folder's files and subfolders.Pick another video from the list: Introductory Videos Video outline Here's the next video we recommend: Productivity Tips For example, on Ubuntu, you may need to install ubuntu-restricted-extras to get the necessary codecs to play the videos. Linux users: Make sure you have the correct multimedia codecs installed for your Linux distribution. After viewing this overview, read on in the Related Resources section to see more features. In this Visual Studio Code tutorial, we cover how to edit and run a small piece of code, including the features outlined below. Configure IntelliSense for cross-compiling.Emmet has new things that VS Code could use, like expansion previews. Point being: Emmet in VS Code would probably be better if it wasn’t just jacked in but integrated from the official packages. Did you know even though VS Code has Emmet baked right in, there is no communication between Emmet’s creator and the VS Code team? I’ve tried to facilitate that connection in the past, but failed.There are a bunch of rules it checks for. This lints your HTML for accessibility problems right in the editor. I don’t really feel like getting all into that it was just interesting to see a tool like this work with HTML. This looks like a pretty commercial product with features that push you toward paid plans for teams. ![]() Check out it guessing at some attributes: The point of it is that it does fancy AI-powered autocomplete suggestions, even in HTML. I heard about this one from Kyle Simpson who I think was doing some paid consulting with them or something. I like how you make snippets right from existing files. I gotta imagine there are lots of snippet plugins, but this is the only one I’ve tried and it works fine. I’m generally for as much autoformatting as possible. I actually got Prettier for HTML working just for this blog post so I think I’ll keep it for a while and see if I like it. There are even settings for it under HTML Whitespace Sensitivity, but it could never be perfect. ), but I could see it rubbing people the wrong way. You can always fix it with a comment for Prettier to leave it alone (e.g. It can be configured to only auto close after you’ve typed the on purpose like that (no whitespace) because you’re going to set all the list items inline, Prettier will break them onto their own lines, inserting whitespace, and changing the layout of what you intend. This extension shows you UI about what HTML is being closed:Īs soon as you type the > in an HTML element, like the last bracket in, the closing tag is automatically created for you. The whole idea is that rather than you leaving comments in your HTML to indicate what HTML element it is closing (a somewhat common practice, especially for partials that close elements that might not be opened in the same document). I heard about this one from Stefan Judis who blogged about it the other day and inspired this post idea. It does “HTML Expansions” like this, which I use pretty much every day of my life: HTML End Tag Labels You should know about it though because it’s very useful. I’d start with Emmet here, even thought it’s not technically an extension 1 for VS Code. These are just a handful that I’ve tried and liked to some degree. Maybe some of them don’t appeal to you, solve a problem you don’t have, or feel like more clutter than you need. Let’s look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |