Visual Studio Code Text Editor



  1. Visual Studio Code Text Editor
  2. Visual Studio Code Text Editor Settings
  3. Vs Code As Text Editor
  1. To display these options, choose Options from the Tools menu, expand the Text Editor node, and select File Extension. When you select an option 'with Encoding,' a dialog will be displayed whenever you open a document of that type that allows you to select an encoding scheme for that document.
  2. Open the Command Palette and type the following: open keyboard then select the option: Preferences: Open Keyboard Shortcuts. In the Type to search in keybindings filter, type: Snap then set the keybinding you would like to use to invoke the command.
  3. Visual Studio Code (aka. VS Code) is currently the most popular text editor in the market. It’s free and backed by Microsoft. However, it can be overwhelming when you start using it, especially if you haven’t used a text editor before.
  4. Visual Studio Code is a free text editor that's used primarily as a source code editor. The program is extremely minimal and even has a 'Zen Mode' option that immediately hides all the menus and windows, and maximizes the program to fill the whole screen.

For the longest time, I had always held that Visual Studio was the number onetool that I would recommend for development for the vast majority of use-cases.It was the first tool I used to program in C++ and C# and was also the very sametool that I missed when I started working with Python again. Lately, I’vefound myself asking whether I could be solving the same problems with VS Code.That’s been ringing pretty true as of late.

To display these options, choose Options from the Tools menu, expand the Text Editor node, and select File Extension. When you select an option 'with Encoding,' a dialog will be displayed whenever you open a document of that type that allows you to select an encoding scheme for that document.

Since I was on the fence for a while, I thought I’d take some time to justlist out some of the reasons why I’m growing more and more fond of VS Code asmy daily driver.

Code

Workspace-specific settings

My co-workers and I spent a good deal of time arguing over some relativelyharmless but important rules for our coding guidelines (spaces are better).

After settling on eight-space wide indents, I quickly realized that I was goingto run into an issue with Visual Studio: the text editor settings can only beset program-wide. I was going to have to switch back and forth or find asuitable extension to do so if I wanted to adhere to the conventions we had set.

In VS Code, the concept of a “workspace” allows you to define a set of settingsthat apply when a folder is opened. Creating an override for a specific workspace was pretty simple; I just had tocreate a new folder and specify some overrides. It follows the same formatthat’s used when you define them at a user-wide level. This let me retain mysettings for my personal projects while seamlessly adhering to our happilyagreed-to conventions.

Visual Studio Code Text Editor

Relatively fast startup time

Notepad is a great text-editor for all text things whose lines ending in CRLF,but what do you do for everything else? Editing everything without properline-breaks sounds like a nightmare. Opening Visual Studio for a single fileor folder is definitely an option, but you’ll be in for abit of a wait. For me, the answer was VS Code.

Visual Studio Code Text Editor Settings

RunVS 2017VS Code
13.55081.1607
22.98681.1258
33.41151.1736
42.47861.1928
53.37781.0983
62.93951.1373
73.16721.1528
82.84371.3238
93.44661.1818
102.90161.1408
ResultVS 2017VS Code
Avg3.11041.1688
Min2.47861.0983
Max3.55081.3238

The above times are given in seconds.

I decided to do some unprofessional profiling to see how long it takes to gofrom launch to the start page in both VS 2017 and VS Code. On average, VS Codeis ready to go almost 2 seconds faster than VS 2017 is! That isn’t a lot, but itcan add up if I’m opening up a lot of files or find myself needing to restartmy editor often.

You can dig into the specifics behind the settings and configurations that Iused for profiling in this Gist.

Cross-platform support

According to the Steam Hardware & Software Survey, the vast majority ofPC gamers are gaming on some variant of Windows. (that’s 98.33% at the time ofwriting) A similar statistic could be found amongst game developers, if onlyjust for the ease of play testing on a configuration not too dissimilar to whatmost gamers would have.

I’m interested in using something else for the sake of control as well asricing, but a number of my students use OS X or Ubuntu ontheir home machines.

Visual Studio is only officially supported on Windows, but a MonoDevelop-basediteration is available for Mac. While the two share the same branding,the two are really wholly distinct products which have only recently begun toshare some logic after Microsoft’s acquisition of its original maintainer, Xamarin.

Windows, Mac, and Linux are all officially supported by the VS Code team. Thatmakes for at least one more tool that we can keep using we no longer feelobligated to use Windows as our daily driver! This also means that myWindows-free students have a tool that they can adopt as a part of theirtoolstack.

Most students aren’t comfortable working with the terminal, so there’s a lotof “WTF” looks on their face when they omit the -m switch when commitingwith Git.

Studio

I suppose that rules out something like Vim as an alternative for them. ;)

While you’ll be hard-pressed to find cross-platform support in older gamedevelopment tools, it does seem to be a consideration that today’s tools aredevoting resources towards. I can only imagine that this was, in part, sparkedby an increasing need to deploy on a variety of platforms as opposed to anyone platform alone.

High versatility through extensions and settings

Both Visual Studio and VS Code offer a plentifulextension gallery that is easy to browse from your preferred web browser as wellas from within the app itself. This adds to the extensibility (heh) of youreditor, allowing you to customize it to your particular preference and usecases.

VS Code has taken to more of a modular approach, building out support formajor languages like C++ and C# as individual packages, thoughTypeScript is included by default. These interface with a standard set of APIsto provide for common code completion and symbol lookup functionality that youwould expect from any IDE with first-class support for your language of choice.

Wishlist

Editor

A Better Windowing System

I haven’t quite found anything with as nice of a windowing system as VisualStudio itself, though both Atom and VS Code are making their way towards it.It’s just so simple to be able to tear off any tab and dock it, snap it, orcreate a new window entirely.

Right now, you can choose between a one, two, or three editor pane layout thatstacks horizontally or vertically. That isn’t as flexible, but gets the job donewell enough.

Path Normalizing for Different File Systems

The lack of path canonicalization has been giving me alot of grief when debugging my Unreal Engine 4 projects. Placing and managingbreakpoints in my source code is super smooth, but it’s what happens when abreakpoint is triggered that’s the issue: two editors to the “same file” areopened.

Path InputValue
Path Opened by UserC:MyProjectSourceMyGameMode.cpp
Path Provided by DebuggerC:myprojectsourcemygamemode.cpp

Both of these will normally resolve to the same path when working in an NTFSfile system, but the difference in casing causes VS Code to consider them as twodifferent files, resulting in two different editors being opened, thuscluttering my editor. This is exacerbated when I step through logic spanningmultiple source files, all of which will spawn a multitude of editors in theprocess.

Visual Studio Code Text Editor

You can store two distinct files in the same path that only differs by case,but you’ll need to both read and write to that file using something thatdoesn’t depend on the Win32 API.

For more information, see this Stack Overflow post:“Why is NTFS case sensitive?”.

Closing Thoughts

With that all said, VS Code is definitely not for everyone. I’m a strongbeliever of finding solutions and tools that best meet your objectives asopposed to working within the constraints of a single tool where possible. Ifyou have the option of choosing your solutions, then it’s important to evaluatewhether there’s something better out there that you should be moving towards.

Even the VS Code FAQ notes that its goal is only to be a lightweighttool that’s a solid alternative when you’re just looking to code, build, anddebug your project. Leveraging bigger tools like NVIDIA Nsight or built-inprofiling and whatnot is still left to the bigger tools like Visual Studio.

In a previous article introducing the essential tools for expert software developers and engineers, the Text Editor came in at the top of the list. Visual Studio Code (aka. VS Code) is currently the most popular text editor in the market. It’s free and backed by Microsoft. However, it can be overwhelming when you start using it, especially if you haven’t used a text editor before. This article will introduce the basic features you have available in VS Code and later go into more advanced functionality. At the heart of mastering any tool as a knowledge worker—and this is a really well kept secret—is to memorize the keyboard shortcuts of your most common actions. So here are links to the keyboard shortcuts in VS Code for Windows, Mac, and Linux as a quick reference for later.

Any file that is created or edited in a text editor is ultimately just a plain text file with a special extension (or ending characters) representing the syntax of the programming language that file is written in. For example, HTML code has the file extension .html, JavaScript files have the extension .js and Python files have the extension .py. Based on the file extension, a computer will automatically try to run that file using the right program.

Usually, all of the files in a specific project are inside a top-level folder. This makes editing them easier because it prevents you from having to go to different folders in your computer to find files relevant to the same project. So, start by creating an empty folder inside a commonly accessed folder like Documents, where you will add files for your project. I’ll call mine testfolder but I recommend you pick a different name. We will create a very simple web project using HTML to get started inside this folder.

Vs Code As Text Editor

Once you’ve created the empty folder, open up Visual Studio Code. If it’s your first time opening it, you may see a welcome screen that prompts you to create a new file or folder.

If you don’t see the excerpt in the image when you open VS Code, click on the File menu on the top-left and select Open or Open Folder to select the empty folder you created earlier. This will open the folder inside VS Code’s file explorer sidebar. Although the sidebar looks empty at first, if you mouse over the part next to your folder’s name you’ll see a few icons appear. Click on the first one to create a new file, like shown below. Call this new file index.html.

The biggest advantage of creating a new file with this icon is that for larger projects with multiple folders, this button will create a new file in the folder that you currently have highlighted. This allows you to create multiple files across several folders in your project very quickly. You can also right-click the newly created index.html file to unlock other file editing options.

The Sidebar - a hub of Plugins to power up your editor

The left sidebar in VS Code is a centralized hub for accessing the most powerful functionality available in the editor. It comes with a standard set of tools like the file explorer, search bar, version control, debugger, and a way to install extensions. An overview of these options is shown below.

The first and last options in the image are bolded to outline their usefulness. When you are focused on just writing code, it’s not useful to have any of these sidebar options open because they just take up extra screen space. For larger projects, though, you may keep the file explorer open (first option) for faster navigation. When you are looking to enhance your productivity when writing code or just changing up the look and feel of your editor, that’s when the last option is helpful for exploring new extensions to install in your editor. These extensions are commonly code snippets, color themes, or better interface elements like icons and custom coloring. The middle three options tend to be useful in professional environments and larger projects.

In the image above, you can access other useful settings from the error (x) and warning (!) icons on the bottom left. This will open a window for any code errors or warnings caught by linters and compilers that process your code. The most important tool that can be accessed from here, though, is the Terminal on the right that appears after clicking on the error and warning icons. To make the best use of it, make sure it’s a bash or Unix Terminal (separate download on Windows). The Terminal’s purpose and usefulness are outlined in this article on essential tools for software developers.

Finally, you may want to make adjustments to Font Size, Font Family, and Color Theme. The best way to access these presentational options and other more esoteric settings is by using two specific shortcuts: CTRL (or CMD) + , for adjusting editor settings and CTRL (or CMD) + SHIFT + P for accessing the command palette. While these two pages are outside the scope of this article, they have great searching functionality for finding the right options you are interested in. The one freebie that’s worth including in this article is the code command integrated into the Terminal. This option is available in the command palette by searching for ‘code’ and selecting the option Shell command: Install ‘code’ command in PATH. Also note that many extensions you install will have their commands available to execute through the command palette so its usefulness increases the more you customize your editor. So customize away with extensions and adjustments!