#i even did it in markdown on visual studio code
Explore tagged Tumblr posts
Text
happy springtime allergies! 🌸
The flowers at this time of year are so lovely! sniff sniff sniff… They’re pretty enough that I’m THIS close to forgetting the pollen up my nose. So it goes. Regardless of springtime allergies or not, it’s Snoozy Devpost time!
If this is your first time seeing us, hey! We’re Snoozy Kazoo, a game dev studio of six guys who make dumb, silly, and fun games. We made the Turnip Boy games, and we’re currently in the midst of working on our latest game, Hobnobbers!
This month, we're getting into our task management workflow to help all you fellow indie devs out there!
What's Snoozy been up to?
Ah…! We’re so, so close to being able to announce something really exciting…! But you have to forgive me. I can’t say anything yet. Keep your eyes peeled — there’s going to be a LOT of exciting Snoozy News™️ come May. Even if I can’t say the big deets yet, I can at least drop this link right overrr here for you merch heads out there…
Cool Makeship Link 👀
Buuuut since we can’t talk about our projects, let’s talk about the next best thing: Project Management! This past month, Snoozy switched from our old task-tracking system to a new system called Codecks. Imagine if you could track your project progress with a deck-building roguelike, and that’s what Codecks is! It’s a nifty little tool specifically made for Indie Game Developers, which we just happen to be.
And to clear the air: no, we are not sponsored in any way by Codecks. Though if Codecks is reading this — we’d totally love to be!
We wanted to share how this system has been working for us, so any aspiring indie devs out there can see if this system is appealing to them and potentially benefit from it!
How it works
What’s made Codecks click for us is how it blends structure with playfulness. It doesn’t just let you organize your work — it encourages you to think about it in terms of clear progress paths, visual layouts, and deck-building metaphors.
We kept falling off of our past task systems because jugging a game’s worth of art, code, design, writing, marketing, and bug-fixing while ALSO needing to come up with constantly updating organization methods is. Hard. Codecks simplifies that process!
Codecks organizes itself into Cards, Decks, and Projects. Cards are tasks (like “Animate a Hob’s death!”), Decks are chunks (animating a Hob would go in our ‘Art’ Deck, but you could split it up further into a ‘3D Animation’ deck while also having a ‘3D Modeling’ Deck), and Projects are, well, projects! (‘Hobnobbers’ is, well, our project!)
What we like
Myyy personal favorite bit of Codecks is how it handles Conversations. Conversations can be had on any card, which makes it really easy to find discussions and notes on particular topics. In the past, we’ve used Discord to talk about ideas, critiques, and problems as they’ve come up. When notes are discussed quickly, they don’t necessarily quality for opening up the whole task itself, which has made remembering clarifications like “Wait, what resolution did this sprite need to be, again?” as simple as pulling up its relevant card.
Other people on the team love the ‘Required Effort’ settings, which allow you to set an amount of effort for each card and then see how much total effort a single person has. Basically, all of us adore the fact that you can use Markdown (which I, Yukon, am currently converting this post into for the Snoozy website haha). There are just a ton of little quality of life features that really feel like this tool was made by indie devs, for indie devs, and it’s really smooth to use!
But I’m just a little guy. Just a Small Man. With Few Dollars?
Codecks is free for up to 5 users on a team! If you’re a solo developer working on a project in your spare time, it’s probably more than suitable for you.
Aaaand that was our non-sponsored shilling of this tool we really like! There’s only so much we can say without going too into the weeds of it, but we hope that giving you a peep into our processes helped you out!
Team Corner!
It’s back a second time! Almost like it’s always going to be here!
This week we’ve got… badadadum, Jake! Our musician and developer!
What are you most excited for in Hobnobbers?
I’m most excited for the physics. Some of my favorite games have really robust physics simulations like Gang Beasts, Motor Town, and BeamNG.drive. I love sandbox games that have fun and unexpected environments to explore in a tactile way.
What’s something you’ve worked on in Hobnobbers recently that you’ve found particularly frustrating?
Audio Volumes and spatialization. In a 3D game, each space needs to sound different, and sometimes dialing that in just right can be a pain. Large open rooms and tiny little tunnels sound different in real life, and they will do the same in Hobnobbers, after lots of tweaking and iteration. Coming from 2D development, this literally opens up a whole new dimension of sound design.
What kinds of feelings do you hope for the Hobnobbers’ music to bring about?
I really want to mix dreamlike folktale and plastic consumerism. I am super inspired by I spy books, grimms fairytales, folk/americana music, and toy instruments for the Hobnobbers musical palette, and the music comes very naturally when the inspirations are so vivid. A lot of Hobnobbers is about simulating something tactile and physical in a digital space, and I hope to channel that into the music.
Yay! Thank you for your time!
Andddd we’re all wrapped up!
As a reminder, feel free to send in questions for us to answer right here on our Tumblr, or join our Discord and ask questions in the “ask-the-devs-❓” channel!
Keep your eyes peeled for this upcoming month in particular — we’ve got a lot of cool announcements coming up!
As per Devposts, see you next month!!
#snoozy kazoo#devpost#gamedev#indie dev#game development#devlog#indie games#turnip boy commits tax evasion#turnip boy robs a bank
16 notes
·
View notes
Text
twitter has a character limit, which is why we’re here
hi there. it's been a lil while, huh.
scrolling through my twitter, i found this (seen below) and i'm in the mood for rambling on and on so woo here we go.
Have you ever
1. skipped class
never with the intent of skipping class. i've missed quite a lot of class in my time, but my brain gets awful sick in the winter, which really inhibits my ability to do "normal human" things. i see a therapist every two weeks.
2. done drugs
nah. addiction plagues my paternal family line, and we're seeing glimpses of it in my brother as well. will i try drugs? maybe weed. anything that can be a one-and-done thing, just to try it. never nicotine. never alcohol.
3. self harmed
nope. i have an irrational fear of the consequences that might come of that specifically, and frankly i'm better off for it. heaven knows i've spent enough time thinking about that for one lifetime.
4. drank
see question two. it's funny that a differentiation between alcohol and everything else exists, imo.
5. shoplifted
i don't think so. i'm really starting to wonder about the demographic that this question set was originally made for.
6. gotten a tattoo
nope! maybe one day. probably a nice little flower, with an inkling of color peeking at the edges of its petals. probably on my back somewhere, so that i'm always a bit surprised when someone points it out. "oh yeah, i have that. cool, huh?"
7. broken up with someone
once. even then, we weren't official. my reasoning was that i wasn't ready, though frankly i think we both weren't. i didn't even know what i wanted. perhaps what i do want is something that maybe not a lot of high-schoolers want - something pragmatic, honest, somewhat more private. or that could be what most people do want. i really don't get out that much.
What's your favorite
8. show
my gut response is over the garden wall. i love, love, love fullmetal alchemist: brotherhood too, though i'm waiting until i have the chance to watch it with a friend of mine to finish it. it's sooooooo intense. don't spoil me, please!
9. movie
i'm not a real movie type of person, so i always default to the movies that i grew up watching whenever this question is asked - the incredibles, the lion king, monsters inc. ...
10. song
you might as well ask, "who's you're favorite child?" there are simply too many. here, if you want to feel out my taste for music, this is my main playlist. feel free to follow that (and me) for more! i get a kick out of having followers on spotify, for some reason. (sidenote: i created a whole new account so that i could change the username, so that account really needs some love again. curse the constant state of toil for consistency i'm in. everywhere the world must know me as birbofathena.)
11. artist
i read a lot of webcomics, so while i can't speak of any historic artists, i do think you should definitely check out ari (and his comic here), owen (and the comic she writes and colors for here), toby (and his comic here), and vi (and her comic here).
12. singer / band
this is an easier question, because i can just take a look at whom i listen to the most. now, i listen to a lot of ambient music, so right off the bat, i can recommend moby, ulrich schnauss, balmorhea, and chihei hatakeyama. speaking about the more "mainstream" artists, i like marina, mgmt, elton john, the 1975, patti page, and tessa violet.
13. memory
lately i've been thinking a lot about how i, as a kid, spent my time laid on the cement by the yard of my first house, watching the bees work on the clover. from one small flower to the next. watching them dig through the petals in search of nectar. it may not be my favorite, but it's what comes to mind.
14. book
i'm reading the poisonwood bible right now, which has been so fantastic. seriously, read it if you haven't yet. aristotle and dante discover the secrets of the universe is another excellent book.
This or that
15. invisibility or the ability to fly
invisibility, because violet is my favorite character from the incredibles. she's so cool. also worth noting: you start flying everywhere, and soon enough you'll find that you've become a living carnival ride.
16. cookies or cake
when done right, cake every time. cookies produce more consistent results though - as far as pleasing me goes - so long as there's chocolate somewhere within. ~~cookies without chocolate are an atrocity.~~ EDIT (10TH MAY '19) - jamie, u ignorant slut. i completely forgot about sugar cookies, in their entirety. forgive me. cookies can live their lives as they please. i know nothing.
17. twitter or facebook
twitter. hell, anything that isn't facebook. facebook's the place that moms go to to eat each other alive. having a facebook account is plain unhealthy.
18. movies or books
depends, really. there're awful movies who have awesome book counterparts, and vice versa. and to be fair, each medium offers things that the other one can't. if you were to ask me though, i'd say books. the feeling that you get when you reach the end of a book is like no other.
19. coke or sprite
this is a lame question, and everyone knows it. the real question on everyone's mind is: coke or pepsi? and i am a pepsi drinker. though the flavored cokes that've been coming out lately are pretty tasty as well. f me up with that strawberry guava, yes please.
20. blind or deaf
anxiety or depresson? brain cancer or pancreatic cancer? alzheimer's or parkinson's? need i say more?
21. tea or coffee
i haven't actually ever tried coffee, though i've been told that i'd like it (due to my liking dark chocolate so much)! i don't really like most teas though; i'll only drink this one herbal tea called bengal spice which is a pseudo-chai tea.
What's your
22. age
i'm 18. i was born 18th february, 2001, at 18:18. whew.
23. sign
pisces sun, capricorn moon, virgo rising
24. height
5′8″ or 173 cm
25. sexual orientation
gay
26. shoe size
9.5 in US mens
27. religion
i don't associate myself with any one religion. i think it's one of those things that's good for some and terrible for others. just do what makes you happy.
28. longest relationship
tbd. the non-relationship described in question 7 went for nearly three weeks.
Opinion on
29. gay rights
i always hear that a lot of homophobic people are lgbt themselves, which is strange to me. though i suppose it's in my nature to be unforgivably confrontational when it comes to inner turmoil, so i'll never really be able to understand homophobic lgbt folk. it goes without saying, then: i support "gay rights," if that's even a differentiation we want to make. i also support "women's rights," "homeowners' rights," and "dogs' rights."
30. second chances
i think for the most part i can empathize with those whom have struggles and missteps i haven't personally experienced. i am a very feeling person. there is an exception to this, but only when one's done something so blatantly wrong - decisions driven by greed or malice.
31. long-distance relationships
tough and complicated. having a relationship through messaging allows both parties to understand how the other thinks - their opinions, their emotions. essentially how their brain functions, because there are few things more idiosyncratic than language, and writing allows one to take full advantage of that. however, having a relationship in-person grants this knowledge, and so much more. (no one said that in-person relationships can't include any messaging, anyway.) we don't speak with just our tongue. what about the silent conversations? what about physical compatibility? like i say, it's tricky, but i think it's more-or-less doable.
32. abortion
i'm pretty pro-choice. if one'd like to offer up their child for adoption, that'd be cool, but no one should feel obligated to do so. whatever you're comfortable with is what i'll support you doing.
33. the death penalty
absolutely not, not ever. it costs more to pull that trigger than it is to sentence someone to life in prison. they must be absolutely sure that they have the guilty before killing them, which takes a long time to decide, and attorneys' time is expensive. and if a mistake is made and an innocent person is killed, boy, do you have one hell of a lawsuit on your hands. not only that, but it is so hypocritical of us to be killing someone... for killing someone. the whole thing doesn't make sense, and i'll tell you why it's still around: people want to kill, kill, kill anything that is bad, bad, bad. dog bites your child? kill that monster. say goodbye to the family pet. people feel so strongly that they've triumphed over evil when they see this drastic result - a carcass underneath their feet. to hell with that.
34. marijuana
i keep saying this: do what you want. marijuana doesn't hurt anything. humans have been doing it ever since we discovered fire. it's absurd that we regulate it now.
35. love
love. it's different for everyone, but for me, it's an enhancement of life. not something necessary, but something that's nice to have. to have someone to bounce ideas off of 24/7. to have someone to turn to in a crisis. to have someone who mourns with you after a loss. indeed, one can face these alone with relative ease, but it's just easier to have someone by your side along the way.
Do you
36. believe in ghosts
yes. old houses might just as well have a mouth, they have so much to say. brand-spanking-new houses are barren, lifeless. i know you know this feeling. ghosts aren't necessarily the malicious, turbulent spirits everyone wants you to believe. they're the vestiges of life, left behind by anyone who's ever felt strong enough to leave them.
37. shower facing the shower head or away from it
away from it, always. who faces the shower head? do they shower with their eyes closed the whole time? just... what?
38. sleep with the door open or closed
i sleep with it closed, though i need to start leaving it open more. it's been getting awfully stuffy.
39. love someone
no. it's not something i'm currently looking for, though my therapist did ask in my last session... i don't know. will it be something i will ever truly look for? i hate the idea of online dating, though that's just my first impression. i just don't know.
40. still watch cartoons
of course. i watch plenty of anime, but if that doesn't count as "cartoons," i also watch and rewatch steven universe, over the garden wall (as mentioned above), and gravity falls.
41. have a boyfriend / girlfriend
nope.
42. like yourself
hell yeah.
#i'm sure this is the most effort anyone's put into this silly question thingy#i even did it in markdown on visual studio code#i'm still so confused... why would anyone in their right mind shower FACING the shower head#twitter
1 note
·
View note
Photo
Visual Studio Code: A Power User’s Guide
In this guide, you’ll learn how to take advantage of Visual Studio Code to supercharge your development workflow.
This article is written for beginners who may be using Visual Studio Code for the first time. VS Code, as it’s commonly known, is considered a "lightweight" code editor. In comparison with full integrated development environment (IDE) editors which occupy gigabytes of disk space, VS Code only uses less than 200MB when installed.
Despite the "lightweight" term, VS Code offers a massive number of features which keep increasing and improving with every new update. For this guide, we'll cover the most popularly used features. Every programmer has their own tool set which they keep updating whenever new workflows are discovered. If you want to learn every tool and feature VS Code has to offer, check out their official documentation. In addition, you may want to keep track of updates for new and improved features.
Prerequisites
In order to follow along this guide, you need to be proficient in at least one programming language and framework. You also need to be conversant with versioning your project code with git. You'll also need to have an account with a remote repository platform such as GitHub. I recommend you setup SSH Keys to connect with your remote repo.
We'll use a minimal Next.js project to demonstrate VS Code features. If you’re new to this, don't worry, as the framework and the language used are not the focus for this guide. The skills taught here can be transferred to any language and framework that you’re working with.
A Bit of History
If you’re new to programming, I recommend you start with a simple text editor such as Windows NotePad. It’s the most basic text editor and doesn't offer any kind of help whatsoever. The main advantage of using it is that it forces you to memorize language syntax and do your own indentation. Once you get comfortable writing code, upgrading to a better text editor such as NotePad++ is the next logical step. It offers a bit of essential coding help with features like syntax colorization, auto indentation and basic autocomplete. It's important when learning programming not to be overwhelmed with too much information and assistance.
Once you’ve gotten used to having a better coding experience, it's time to upgrade. Not so long ago, these were the fully integrated development environments on offer:
Visual Studio IDE
NetBeans
Eclipse
IntelliJ IDEA
These platforms provide the complete development workflow, from coding to testing and deployment. They contain tons of useful features such as analyzing code and highlighting errors. They also contain a ton more features that many developers weren’t using, though they were essential for some teams. As a result, these platforms took a lot of disk space and were slow to start up. Many developers preferred using advance text editors such as emacs and vim to write their code in.
Soon, a new crop of platform independent code editors started appearing. They were lightweight and provided many features that were mostly exclusive to IDEs. I've listed them below in the order they were released:
Sublime Text: July 2013
Atom.io: June 2015
Visual Studio Code: April 2016
Mac developers had access to TextMate which was released in October 2004. The snippets system used by all the above editors originated from TextMate. Having used all of them, I felt that the editor that came after was a significant improvement over the current one. According to a developer survey done by Stack OverFlow in 2019, Visual Studio Code is the most popular code development environment with 50.7% usage. Visual Studio IDE comes second and NotePad++ comes third.
That's enough history and stats for now. Let's delve into how to use Visual Studio Code features.
Setup and Updates
Visual Studio Code package installer is less than 100MB and consumes less than 200MB when fully installed. When you visit the download page, your OS will automatically be detected and the correct download link will be highlighted.
Updating VS Code is very easy. It displays a notification prompt whenever an update has been released. For Windows users, you'll have to click on the notification to download and install the latest version. The download process occurs in the background while you’re working. When it's ready to install, a restart prompt will appear. Clicking this will install the update for you and restart VS Code.
For Ubuntu-based distributions, clicking on the update notification will simply open the website for you to download the latest installer. A much easier way is simply running sudo apt update && sudo apt upgrade -y. This will update all installed Linux packages including VS Code. The reason this works is because VS Code added its repo to your package repo registry during the initial installation. You can find the repo information on this path: /etc/apt/sources.list.d/vscode.list.
User Interface
Let's first get acquainted with the user interface:
Image source
VS Code's user interface is divided into five main areas which you can easily adjust.
Activity Bar: allows you to switch between views: explorer, search, version control, debug and extensions.
Side Bar: contains the active view.
Editor: this is where you edit files and preview markdown files. You can arrange multiple open files side-by-side.
Panel: displays different panels: integrated terminal, output panels for debug information, errors and warnings.
Status: displays information about the currently opened project and file. Also contains buttons for executing version control actions, and enabling/disabling extension features.
There's also the top Menu Bar where you can access the editor's menu system. For Linux users, the default integrated terminal will probably be the Bash shell. For Windows users, it's PowerShell. Fortunately, there’s a shell selector located inside the terminal dropdown that will allow you to choose a different shell. If installed, you can choose any of the following:
Command Prompt
PowerShell
PowerShell Core
Git Bash
WSL Bash
Working with Projects
Unlike full IDEs, VS Code doesn't provide project creation or offer project templates in the traditional way. It simply works with folders. On my Linux development machine, I'm using the following folder pattern to store and manage my projects:
/home/{username}/Projects/{company-name}/{repo-provider}/{project-name}
The Projects folder is what I refer to as to the workspace. As a freelance writer and developer, I separate projects based on which company I'm working for, and which repo I'm using. For personal projects, I store them under my own fictitious "company name". For projects that I experiment with for learning purposes, and which I don't intend to keep for long, I'll just use a name such as play or tuts as a substitute for {repo-provider}.
If you’d like to create a new project and open it in VS Code, you can use the following steps. Open a terminal and execute the following commands:
$ mkdir vscode-demo $ cd vscode-demo # Launch Visual Studio Code $ code .
You can also do this in File Explorer. When you access the mouse context menu, you should be able to open any folder in VS Code.
If you want to create a new project linked to a remote repo, it's easier creating one on the repo site — for example, GitHub or BitBucket.
Take note of all the fields that have been filled in and selected. Next, go to the terminal and execute the following:
# Navigate to workspace/company/repo folder $ cd Projects/sitepoint/github/ # Clone the project to your machine $ git clone [email protected]:{insert-username-here}/vscode-nextjs-demo.git # Open project in VS Code $ cd vscode-nextjs-demo $ code .
Once the editor is up and running, you can launch the integrated terminal using the keyboard shortcut Ctrl+~ (tilde key). Use the following commands to generate package.json and install packages:
# Generate `package.json` file with default settings $ npm init -y # Install package dependencies $ npm install next react react-dom
Next, open package.json and replace the scripts section with this:
"scripts": { "dev": "next", "build": "next build", "start": "next start" }
The entire VS Code window should look like this:
Before we look at the next section, I’d like to mention that VS Code also supports the concept of multi-root workspaces. If you’re working with related projects — front-end, back-end, docs etc. — you can manage them all in a single workspace inside one editor. This will make it easier to keep your source code and documentation in sync.
Version Control with Git
VS Code comes built-in with Git source control manager. It provides a UI interface where you can stage, commit, create new branches and switch to existing ones. Let's commit the changes we just did in our project. On the Activity bar, open the Source Control Panel and locate the Stage All Changes plus button as shown below.
Click on it. Next, enter the commit message “Installed next.js dependencies”, then click the Commit button at the top. It has the checkmark icon. This will commit the new changes. If you look at the status located at the bottom, you'll see various status icons at the left-hand corner. The 0 ↓ means there's nothing to pull from the remote repo. The 1 ↑ means you’ve got one commit you need to push to your remote repo. Clicking on it will display a prompt on the action that will take place. Click OK to pull and push your code. This should sync up your local repo with the remote repo.
To create a new branch or switch to an existing branch, just click the branch name master on the status bar, left bottom corner. This will pop up a branch panel for you to take an action.
Do check out the following extensions for an even better experience with Git:
Git Lens
Git History
Support for a different type of SCM, such as SVN, can be added via installing the relevant SCM extension from the marketplace.
Creating and Running Code
On the Activity Bar, head back to the Explorer Panel and use the New Folder button to create the folder pages at the root of the project. Select this folder and use the New File button to create the file pages/index.js. Copy the following code:
function HomePage() { return <div>Welcome to Next.js!</div>; } export default HomePage;
With the Explorer Panel, you should see a section called NPM Scripts. Expand on this and hover over dev. A run button (play icon) will appear next to it. Click on it and this will launch a Next.js dev server inside the Integrated Terminal.
It should take a few seconds to spin up. Use Ctrl + Click on the URL http://localhost:3000 to open it in your browser. The page should open successfully displaying the “Welcome” message. In the next section, we'll look at how we can change VS Code preferences.
The post Visual Studio Code: A Power User’s Guide appeared first on SitePoint.
by Michael Wanyoike via SitePoint https://ift.tt/2V9DxEo
0 notes
Text
Visual Studio Code: A Power User’s Guide
In this guide, you’ll learn how to take advantage of Visual Studio Code to supercharge your development workflow.
This article is written for beginners who may be using Visual Studio Code for the first time. VS Code, as it’s commonly known, is considered a "lightweight" code editor. In comparison with full integrated development environment (IDE) editors which occupy gigabytes of disk space, VS Code only uses less than 200MB when installed.
Despite the "lightweight" term, VS Code offers a massive number of features which keep increasing and improving with every new update. For this guide, we'll cover the most popularly used features. Every programmer has their own tool set which they keep updating whenever new workflows are discovered. If you want to learn every tool and feature VS Code has to offer, check out their official documentation. In addition, you may want to keep track of updates for new and improved features.
Prerequisites
In order to follow along this guide, you need to be proficient in at least one programming language and framework. You also need to be conversant with versioning your project code with git. You'll also need to have an account with a remote repository platform such as GitHub. I recommend you setup SSH Keys to connect with your remote repo.
We'll use a minimal Next.js project to demonstrate VS Code features. If you’re new to this, don't worry, as the framework and the language used are not the focus for this guide. The skills taught here can be transferred to any language and framework that you’re working with.
A Bit of History
If you’re new to programming, I recommend you start with a simple text editor such as Windows NotePad. It’s the most basic text editor and doesn't offer any kind of help whatsoever. The main advantage of using it is that it forces you to memorize language syntax and do your own indentation. Once you get comfortable writing code, upgrading to a better text editor such as NotePad++ is the next logical step. It offers a bit of essential coding help with features like syntax colorization, auto indentation and basic autocomplete. It's important when learning programming not to be overwhelmed with too much information and assistance.
Once you’ve gotten used to having a better coding experience, it's time to upgrade. Not so long ago, these were the fully integrated development environments on offer:
Visual Studio IDE
NetBeans
Eclipse
IntelliJ IDEA
These platforms provide the complete development workflow, from coding to testing and deployment. They contain tons of useful features such as analyzing code and highlighting errors. They also contain a ton more features that many developers weren’t using, though they were essential for some teams. As a result, these platforms took a lot of disk space and were slow to start up. Many developers preferred using advance text editors such as emacs and vim to write their code in.
Soon, a new crop of platform independent code editors started appearing. They were lightweight and provided many features that were mostly exclusive to IDEs. I've listed them below in the order they were released:
Sublime Text: July 2013
Atom.io: June 2015
Visual Studio Code: April 2016
Mac developers had access to TextMate which was released in October 2004. The snippets system used by all the above editors originated from TextMate. Having used all of them, I felt that the editor that came after was a significant improvement over the current one. According to a developer survey done by Stack OverFlow in 2019, Visual Studio Code is the most popular code development environment with 50.7% usage. Visual Studio IDE comes second and NotePad++ comes third.
That's enough history and stats for now. Let's delve into how to use Visual Studio Code features.
Setup and Updates
Visual Studio Code package installer is less than 100MB and consumes less than 200MB when fully installed. When you visit the download page, your OS will automatically be detected and the correct download link will be highlighted.
Updating VS Code is very easy. It displays a notification prompt whenever an update has been released. For Windows users, you'll have to click on the notification to download and install the latest version. The download process occurs in the background while you’re working. When it's ready to install, a restart prompt will appear. Clicking this will install the update for you and restart VS Code.
For Ubuntu-based distributions, clicking on the update notification will simply open the website for you to download the latest installer. A much easier way is simply running sudo apt update && sudo apt upgrade -y. This will update all installed Linux packages including VS Code. The reason this works is because VS Code added its repo to your package repo registry during the initial installation. You can find the repo information on this path: /etc/apt/sources.list.d/vscode.list.
User Interface
Let's first get acquainted with the user interface:
Image source
VS Code's user interface is divided into five main areas which you can easily adjust.
Activity Bar: allows you to switch between views: explorer, search, version control, debug and extensions.
Side Bar: contains the active view.
Editor: this is where you edit files and preview markdown files. You can arrange multiple open files side-by-side.
Panel: displays different panels: integrated terminal, output panels for debug information, errors and warnings.
Status: displays information about the currently opened project and file. Also contains buttons for executing version control actions, and enabling/disabling extension features.
There's also the top Menu Bar where you can access the editor's menu system. For Linux users, the default integrated terminal will probably be the Bash shell. For Windows users, it's PowerShell. Fortunately, there’s a shell selector located inside the terminal dropdown that will allow you to choose a different shell. If installed, you can choose any of the following:
Command Prompt
PowerShell
PowerShell Core
Git Bash
WSL Bash
Working with Projects
Unlike full IDEs, VS Code doesn't provide project creation or offer project templates in the traditional way. It simply works with folders. On my Linux development machine, I'm using the following folder pattern to store and manage my projects:
/home/{username}/Projects/{company-name}/{repo-provider}/{project-name}
The Projects folder is what I refer to as to the workspace. As a freelance writer and developer, I separate projects based on which company I'm working for, and which repo I'm using. For personal projects, I store them under my own fictitious "company name". For projects that I experiment with for learning purposes, and which I don't intend to keep for long, I'll just use a name such as play or tuts as a substitute for {repo-provider}.
If you’d like to create a new project and open it in VS Code, you can use the following steps. Open a terminal and execute the following commands:
$ mkdir vscode-demo $ cd vscode-demo # Launch Visual Studio Code $ code .
You can also do this in File Explorer. When you access the mouse context menu, you should be able to open any folder in VS Code.
If you want to create a new project linked to a remote repo, it's easier creating one on the repo site — for example, GitHub or BitBucket.
Take note of all the fields that have been filled in and selected. Next, go to the terminal and execute the following:
# Navigate to workspace/company/repo folder $ cd Projects/sitepoint/github/ # Clone the project to your machine $ git clone [email protected]:{insert-username-here}/vscode-nextjs-demo.git # Open project in VS Code $ cd vscode-nextjs-demo $ code .
Once the editor is up and running, you can launch the integrated terminal using the keyboard shortcut Ctrl+~ (tilde key). Use the following commands to generate package.json and install packages:
# Generate `package.json` file with default settings $ npm init -y # Install package dependencies $ npm install next react react-dom
Next, open package.json and replace the scripts section with this:
"scripts": { "dev": "next", "build": "next build", "start": "next start" }
The entire VS Code window should look like this:
Before we look at the next section, I’d like to mention that VS Code also supports the concept of multi-root workspaces. If you’re working with related projects — front-end, back-end, docs etc. — you can manage them all in a single workspace inside one editor. This will make it easier to keep your source code and documentation in sync.
Version Control with Git
VS Code comes built-in with Git source control manager. It provides a UI interface where you can stage, commit, create new branches and switch to existing ones. Let's commit the changes we just did in our project. On the Activity bar, open the Source Control Panel and locate the Stage All Changes plus button as shown below.
Click on it. Next, enter the commit message “Installed next.js dependencies”, then click the Commit button at the top. It has the checkmark icon. This will commit the new changes. If you look at the status located at the bottom, you'll see various status icons at the left-hand corner. The 0 ↓ means there's nothing to pull from the remote repo. The 1 ↑ means you’ve got one commit you need to push to your remote repo. Clicking on it will display a prompt on the action that will take place. Click OK to pull and push your code. This should sync up your local repo with the remote repo.
To create a new branch or switch to an existing branch, just click the branch name master on the status bar, left bottom corner. This will pop up a branch panel for you to take an action.
Do check out the following extensions for an even better experience with Git:
Git Lens
Git History
Support for a different type of SCM, such as SVN, can be added via installing the relevant SCM extension from the marketplace.
Creating and Running Code
On the Activity Bar, head back to the Explorer Panel and use the New Folder button to create the folder pages at the root of the project. Select this folder and use the New File button to create the file pages/index.js. Copy the following code:
function HomePage() { return <div>Welcome to Next.js!</div>; } export default HomePage;
With the Explorer Panel, you should see a section called NPM Scripts. Expand on this and hover over dev. A run button (play icon) will appear next to it. Click on it and this will launch a Next.js dev server inside the Integrated Terminal.
It should take a few seconds to spin up. Use Ctrl + Click on the URL http://localhost:3000 to open it in your browser. The page should open successfully displaying the “Welcome” message. In the next section, we'll look at how we can change VS Code preferences.
The post Visual Studio Code: A Power User’s Guide appeared first on SitePoint.
via SitePoint https://ift.tt/2Vx8yRS
0 notes