But when a project is managed by multiple developers, the focus shifts into consistency especially in terms of written code.

Keeping a consistent code style and formatting across many team members and project is a challenging task. It's almost impossible to do it manually, but that's where Prettier comes into play.

In this guide, you will learn how to install Prettier in Visual Studio Code and how to use it to format code.

Prerequisites

Before you follow this guide, you will need to download and install Visual Studio Code.

What is Prettier?

Prettier is a powerful code formatter that automates this process from start to finish. It gives you confidence that your code adheres to defined coding standards without any manual actions (unless you want to have it manual).

Prettier not only supports all JavaScript libraries and frameworks, such as Angular, React, Vue, and Svelte, but also works with TypeScript.

That's why it is used by many people in tech worldwide.

How To Install Prettier in Visual Studio Code

To install Prettier in Visual Studio Code, you need to:

1. Open the Extensions tab.
2. Type prettier in the search box.

Visual Studio Code / Extensions

At the top of the list you will find the Prettier - Code formatter extension. You need to open it, and click the Install button:

Visual Studio Code / Extensions / Prettier - Code Formatter

After the successful installation you will see the text saying "This extension is enabled globally":

Visual Studio Code / Extensions / Prettier - Code Formatter (Installation completed)

How To Activate Prettier in Visual Studio Code

When your Prettier extension is installed, you need to configure Visual Studio Code to take advantage of it. You can do in the Settings tab.

Side node: to open the Settings tab, you can use COMMAND + , on macOS or CTRL + , on Windows and Linux:

Visual Studio Code / Main view

At the top of the Settings tab you will find a search box. Now, you need to type formatter, and then Editor: Default Formatter will pop up on the settings list:

Visual Studio Code / Settings

Now, open the dropdown and select Prettier - Code formatter from the list:

Visual Studio Code / Settings / Default Formatter

Now, Prettier is your default code formatter, but you might want to enable Visual Studio Code to automatically format code when you save files.

If you want to, just tick the checkbox in the Format On Save section:

Visual Studio Code / Settings / Format On Save

How To Format Code with Prettier in Visual Studio Code

Let's take a look at one React component I created:

Visual Studio Code / Unformatted React 18 Component

As you can see, this code is completely misaligned, it misses semicolons, and it is very difficult to read. The code could formatted in a better way, right? Here's where Prettier comes into play.

To format code, we need to open the command palette – you can use COMMAND + SHIFT + P on macOS or CTRL + SHIFT + P on Windows and Linux.

Now, you need to find Format Document. Feel free to use the search box:

Visual Studio Code / Format Document command

After running Format Document your code becomes neat and clean:

Visual Studio Code / Formatted React 18 Component (with Prettier)

Conclusion

Integrating Prettier into Visual Studio Code is a game-changer for developers striving to maintain a consistent and high-quality codebase.

By automating the formatting process, you are not only adhering to coding standards but are also reducing the struggle that comes with manual code formatting. That's why every developer should use Prettier to ensure consistency in their codebase.

I hope this article helped you a lot. It'd mean the world to me if you shared it on your social media.

If you have any questions you can reach me on Twitter.

Learn React

Looking for a practical course to learn React?

🚀 Join my React 18 Course on Udemy.

This course includes:

• 🎥 5.5 hours on-demand video
• 📱 Access on mobile and TV
• 🗓️ Full lifetime access
• 🎓 Certificate of completion

Click below to enroll.

Click to get started

In this article, I'll walk you through the entire process of configuring Visual Studio Code for Python development. It's not a universal setup, but this is something that I use personally and have found it to be really comfortable.

The first step is to install Visual Studio Code on your computer. I'm on Debian 12 at the moment and I have the editor ready to go. Platform specific installation instructions are available in the documentation.

Assuming you are past the installation step, now I'll introduce you to a set of essential extensions that will elevate your Python development experience to the next level.

Python Extension

The first extension that you need to install is the Python Extension from Microsoft.

https://marketplace.visualstudio.com/items?itemName=ms-python.python

This is actually an extension pack that contains two extensions. The first extension is the Python extension. It lays the foundation for Python development in Visual Studio Code.

The other one is Pylance, which is a very performant language server for Python.

https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance

This extension provides rich intellisense support and is powered by Pyright, the static type checker from Microsoft. The next thing you need to think about is linting.

Ruff Linter

A linter is a program that analyses your code statically and provides valuable insights on possible errors.

The Pylance extension does an excellent job of finding out fatal errors within your code, but there is more to code than just that.

When working on a big project, it's pretty common to leave unwanted mess within your codebase. Things like unused imports and variables, bad code practices, and so on.

A good linter can point out code smells like this and make your code cleaner. Now, the go-to choice when it comes to Python linters is Pylint.

Pylint has been around for ages and works quite well, but I think there is a better alternative.

Ruff is an extremely fast Python linter written in Rust that imposes stricter linting rules than Pylint. The tool also has an official extension.

https://marketplace.visualstudio.com/items?itemName=charliermarsh.ruff

It's a plug n' play extension and doesn't require any additional configuration whatsoever. So once you have it installed, you're good to go.

Isort

Like a linter, isort is another utility that's sole purpose is sorting import statements.

https://marketplace.visualstudio.com/items?itemName=ms-python.isort

The utility sorts all the imports alphabetically, while also dividing them into sections.

The extension is very straightforward. Once you have the extension, it'll render squiggly lines under any import statement that seems out of place.

You can then use the quick action menu to sort them. Or, you can also use the command palette to quickly access the isort command.

Mypy Type Checker

Before I start talking about this extension, let me explain what mypy actually is.

According to the info on their homepage:

Mypy is an optional static type checker for Python that aims to combine the benefits of dynamic (or "duck") typing and static typing. Mypy combines the expressive power and convenience of Python with a powerful type system and compile-time type checking.

In simpler words, mypy forces you to add essential type annotations to your Python programs, making them easier to comprehend.

https://mypy-lang.org/

Recently, Microsoft has published an extension that adds type checking functionality using mypy to their beloved editor.

https://marketplace.visualstudio.com/items?itemName=ms-python.mypy-type-checker

Once you have installed the extension, it'll perform necessary checks on your code and report any missing type annotations as compile-time errors.

While having type annotations is not mandatory, it's highly recommended.

IntelliCode

IntelliCode provides AI assisted code completion in Visual Studio Code. It may sound similar to GitHub Copilot, but in reality it's a lot smaller than that.

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

Where GitHub Copilot or Tabnine provides full-blown code blocks, IntelliCode autocompletes lines of code pretty flawlessly.

In most cases, this extension can help you type less of the same code by suggesting the right thing while also keeping out of your way.

Error Lens

While not related to Python specifically, Error Lens is a great extension that embeds errors right by the side of the line of code.

I often work on my 14 inch Thinkpad and like to turn off the terminal pane. Error Lens eradicates the need to look at the terminal now and then to see my errors and warnings.

As useful as it may be, sometimes your editor can look cluttered due to all the warning and error outputs, so decide accordingly.

Indent Rainbow

Unlike other programming languages, an incorrect level of indentation can literally break your program in Python.

Visual Studio Code already does a good job of visualizing indentation levels within your code, but if you want to add some color to it, the indent-rainbow package is what you need.

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

It adds different colors to the different levels of indentation. Personally, I don't use this one on a regular basis, but you may find it useful.

Conclusion

Like I said, these extensions and my personal configuration are not a silver bullet. But this setup is something that I've been using for quite a while and I hope it's useful to you as well.

I often install specialized extensions depending on the projects I work on. For example, I use the Django or Jinja project when I work on a Django or Flask project.

Or I install the Jupyter extension while working on a Jupyter Notebook. So feel free to install whatever you need, just don't overdo it.

“Visual Studio” and “Visual Studio Code” are not the same thing. Visual Studio is an integrated development environment (IDE) and Visual Studio Code is a rich text editor like Sublime Text and Atom.

But the difference between the tools is more than just IDE and text editor.

An IDE is a robust tool for writing, editing, debugging, and running your code. A text editor only lets you write and edit your code. You might have to step out of a text editor to run your code or download plugins to help it do the running for you.

In this article, you'll learn the main differences between Visual Studio and Visual Studio Code. But firstly, we need to know what “Visual Studio” is and what “Visual Studio Code is” before diving into those differences.

What We'll Cover

• What is Visual Studio?
• What is Visual Studio Code?
• What is the Difference between “Visual Studio” and “Visual Studio Code”?
• Which should you Choose between “Visual Studio” and “Visual Studio Code”?
• Conclusion

What is Visual Studio?

Visual Studio was first released in 1997 by Microsoft. It's an integrated development environment (IDE) for developing, editing, and debugging websites, web, and mobile applications as well as cloud services.

Because it's an IDE, programming utilities like a debugger, compiler, intellisence, and more are all bundled into it for you.

Visual Studio comes with built-in support for C# and .NET. It also supports other programming languages like C, C++, Python, F#, web languages (HTML, CSS, JavaScript), and a lot more. Support for Java was removed back in Visual Studio 2017.

Visual Studio runs on Windows and Mac. It has 3 editions – community, professional, and enterprise. The community version is free, while the professional and enterprise are not.

The installation is quite a bit more robust on Windows than Mac. So, on Windows, you might have to download more than 42 GB depending on what you want to do.

But on Mac, as of the time of writing this article, you need around 6.2 GB of disk space.

What is Visual Studio Code?

Visual Studio Code (also called VS Code) is like the mini version of Visual Studio. It is an open-source and lightweight text editor available on Windows, Mac, and Linux. There’s also the web version available at https://vscode.dev/.

VS Code comes with built-in support for JavaScript, TypeScript and Node JS, but you can use it to code in any language you want. All you need to do is download the relevant extensions.

Some of the extensions are made by Microsoft, but a lot of others are third-party extensions.

Unlike Visual Studio, you don’t need much space to download VS Code. You might not need more than 200 MB of disk space to download it.

Since it supports JavaScript, TypeScript, and Node JS by default, you get a debugger and intellisence, too. But to get intellisence, a compiler, and debuggers for other languages, you have to download relevant extensions.

Now you know that Visual Studio is an IDE and Visual Studio Code is a text editor. So let's summarize their main differences next.

What is the Difference between “Visual Studio” and “Visual Studio Code”?

Which should you Choose between “Visual Studio” and “Visual Studio Code”?

There has been a long-running debate about which is better and which to choose between Visual Studio and Visual Studio Code. Well, it depends on what you are doing.

If you’re developing exclusively with a language supported by Visual Studio such as C#, C, C++, Python, and others, Visual Studio or other relevant IDEs are likely the best option for you.

But even if you’re developing in those languages but you require a React, Vue, or Angular frontend, VS code might be the best option for you.

If you’re working in a team, they might provide you with the enterprise version of Visual Studio, or any other IDE that correlates with the language you are working with. For example, PyCharm for Python and IntelliJ Idea for Java.

If you’re using Linux, you have to choose Visual Studio Code or some other IDE apart from Visual Studio. That’s because Visual Studio does not run on Linux.

If you’re the kind of person that likes to customize your editor to your taste, just go for VS Code because it's highly customizable. You also should probably choose VS Code if you are mixing technologies.

Conclusion

This article showed you the differences between Visual Studio and VS Code, and also what they both are separately.

The debate should never be which one is better than the other, but which is best for what you want to do, or what you need. That’s why we looked at some scenarios that might encourage you to choose one over the other.

Thank you for reading.

Before approaching the process of running your first C or C++ code on Visual Studio Code, let me guide you through the process and get it all set up based on the operating system you are using on your computer.

C and C++ compilers

For running C or C++ code, you just need to have a valid C/C++ compiler installed on your computer. If you are using a Linux operating system, then there is a high chance that it is already installed on your system. But we need to make sure that it is correctly installed.

For checking whether or not you have the compiler (GCC/G++/MinGW) installed on your system or not, you have to check the compiler version first.

Simply open your terminal and use gcc --version and g++ --version. If you get the version number, then the compiler is already installed on your system.

You can check the version using the same commands on any operating system, whether that is a Windows, Linux, or macOS-based operating system.

If you get feedback on your terminal that it does not know anything about GCC or G++, then you have to install the compiler correctly.

If you are using the most used Windows operating system, then I already have written an in-depth article showing you all the processes step-by-step on freeCodeCamp. Make sure to read the entire article first, as it also contains a complete video to provide you with complete support.

Embedded content

If you are using another operating system, and you don't have the compilers installed, then make sure to install them before proceeding.

How to Install VS Code or VS Code Insiders

You have to download Visual Studio Code directly from the official website: https://code.visualstudio.com/.

If you want, you can also install VS Code Insiders, and the same process is applicable for that as well.

Visual Studio Code Insiders is actually the "Insiders" build of Visual Studio Code, which contains all the latest features that are shipped daily. You can think of VS Code as the stable release and the VS Code Insiders as the Insiders release of that.

If you want to experience the latest updates instantly, then you might also try Visual Studio Code Insiders (I use it myself). For downloading VS Code Insiders, you can visit the official website for VS Code Insiders here: https://code.visualstudio.com/insiders/

Make sure to download the exact file for your operating system.

Download Page: VS Code

Download Page: VS Code Insiders

The installation process is pretty basic. But I am going to show you all the steps sequentially. For now, I am going to show you the installation process using VS Code Insiders, but everything you will see here is going to be exactly the same for VS Code as well.

Make sure to click the box on the "I accept the agreement " box and click on Next.

Accept the agreement and click Next

Keep everything as it is. Do not change anything from here.

Click Next

Click Next. Again, simply click Next.

Click Next

Make sure to add the checkmark (✔) on all of the boxes. Then click on Next.

Check all of the boxes, and click Next

Click on Install.

Click Install

It might take a little time to finish the installation.

Let it finish...

Click on Finish.

Click Finish

Congrats - you've successfully installed VS Code/VS Code Insiders on your system. Now, cheers! 🥂

How to Prepare VS Code/VS Code Insiders For C and C++ Code

First, open VS Code or VS Code Insiders.

Go to the Extension tab. Search for "C" or "C++" and install the first one that is already verified by Microsoft itself.

Install C/C++ extension

Also, install C/C++ Extension Pack. It should also be verified by Microsoft.

Install C/C++ Extension Pack

Then you have to search for Code Runner and install the extension as well.

Install Code Runner Extension

Now, we need to change some settings.

Change some settings

Click the gear box (It is called the Manage section), and then click Settings. Alternatively, you can also use the shortcut keys Ctrl + ,. You need to replace the Ctrl key with the Command key for Mac.

Type "Run code in terminal" and press Enter key

In the search bar, type "Run code in terminal" and press the Enter key.

Scroll down a little bit until you find Code-runner: Run In Terminal. Make sure that the box is checked (✔).

Make sure to check the box

Now you need to restart your VS Code/VS Code Insiders. Simply close and reopen the program.

How to Test Your Code

Simply open VS Code/VS Code Insiders, open any folder, and create any file with the extension .c for the C file and .cpp for the C++ file.

After writing your code, you can run the code directly using the play button you'll find in the upper right corner.

This is how you can run any C/C++ program from VS Code/Insiders

It will compile and then run the code directly. After running a code, the code runner button would be set default to run directly. So, your computer is 100% ready for compiling and running any C/C++ programming code. 😀

Conclusion

Thanks for reading the entire article. If it helps you then you can also check out other articles of mine at freeCodeCamp.

If you want to get in touch with me, then you can do so using Twitter, LinkedIn, and GitHub.

You can also SUBSCRIBE to my YouTube channel (Code With FahimFBA) if you want to learn various kinds of programming languages with a lot of practical examples regularly.

If you want to check out my highlights, then you can do so at my Polywork timeline.

You can also visit my website to learn more about me and what I'm working on.

Thanks a bunch!

In this step-by-step guide, we will go from a completely new VSCode installation to a code editor perfectly prepared for your next React project.

Let's get started!

How to Install VSCode

The first step to setting up Visual Studio Code (VSCode for short) is to install it for your computer.

Head to code.visualstudio.com and download the right version for your computer (it's 100% free).

Install the right version for your operating system

Once your installation is done and you open the VSCode app, you should be greeted with a home screen that looks something like this:

VSCode Home Screen (After Install)

Choose a color theme you like

Although the default theme that ships with VSCode is very nice and legible, I prefer to use a third-party theme that I find easier on my eyes.

It might seem like a trivial thing to spend time picking a theme. But since you will be spending hours reading text on your editor, you want to choose colors that you like and that do not strain your eyes.

I personally use and highly recommend the Material Theme for all of my installations of VSCode.

To install the Material Theme, go to (at the top of the screen):

View > Extensions (or use the shortcut ⇧ + ⌘ (Ctrl) + X)

Then search for "Material Theme" in the sidebar and install the first result that comes up.

It should look like this:

Material Theme Installation

Once it has been installed it will give you a dropdown to choose between a bunch of different variants.

The default option is great, but I personally find the "Material Theme Ocean High Contrast" variant to be the best looking.

Material Theme for VSCode

Make your text easy to read

Now is a good time to add some basic settings that make the code that you write comfortable to read.

Settings that will improve the readability of your code are your font size, tab size, and font family.

You can change your VSCode preferences by going to (at the top of your screen):

Code > Preferences > Settings (or use the shortcut: ⌘ (Ctrl) + ,)

The settings I have found to most comfortable over the years for both desktop and laptop development are font size of 18 and a tab size set to 2.

Text Settings for VSCode

Additionally, to get your text looking just right, I find text looks better when you increase the default zoom level of the editor.

To increase the zoom level, go to preferences (⌘ (Ctrl) + ,) and type in "zoom level".

I recommend changing the zoom level from 0 to 1.

And finally, as a matter of preference, I like to remove the default breadcrumb links that are at the top of the editor.

You can remove breadcrumbs by going to:

View > Show Breadcrumbs (and making sure it is unchecked).

Here is what our code editor looks like with a sample component file I added to my Desktop:

React component appearance in VSCode

Format your code with the Prettier extension

You might have noticed in the example above that the code isn't very nicely formatted.

Fortunately, you can automatically format every .js file you write using the Prettier extension for VSCode.

To be able to instantly format our code every time we save a .js file, we can again go to the extensions tab (⇧ + ⌘ (Ctrl) + X), type in "prettier" and install it:

Prettier extension for VSCode

Next, we can go back to preferences (⌘ (Ctrl) + ,) and search for "format on save" and make sure it is checked:

Format on Save setting

And again in preferences, search for the "default formatter" setting and set it to Prettier.

Default formatter setting

Now if we go back to an unformatted file and hit save, it will instantly be formatted for us!

Here is what our dummy component now looks like after we hit save:

Formatted React component (with Prettier)

Check out the Prettier extension documentation to see how you can further configure it according to your formatting preferences. Still, I personally recommend using the default options

How to Quickly type JSX with Emmet

VSCode comes with built-in support for an amazing tool called Emmet that allows you to write HTML tags very quickly.

However, Emmet is not configured by default to be used with JSX, which React uses instead of HTML.

To write your JSX more quickly, you can use Emmet with React by going to:

Code > Preferences > Settings (⌘ (Ctrl) + ,)

And then typing in the search bar, "emmet include languages".

After that, click the "Add Item" button and add the following setting:

item: javascript, value: javascriptreact (and then hit ok)

Your added setting should look like this:

Emmet Include Languages setting

Now that we have included React as a language for Emmet, we can start writing our JSX much more quickly.

Here is quick demo of how productive you can be with Emmet:

Quick demo of Emmet shortcuts

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

In this tutorial, we'll go over how you can open the VS Code text editor (Visual Studio Code) from your Mac terminal.

Opening your text editor from your terminal is a quick, easy way to open up new projects and begin coding faster.

How to Download and Open VS Code

The first thing you'll need to do is open up VS Code. If you don't have VS Code yet, you can download it here. VS Code is a popular text editor created by Microsoft.

Once you have VS Code open, it should look like this:

Next, run Command + Shift + P.

Now you should see this:

What we've done here is opened up the VS Code command palette. This will allow you to customize your VS Code settings, among other things.

Next, into the command palette type shell and hit enter. When you type shell, your editor should look like this:

Once you hit enter, voilà! You're all done. You should now see a success message:

Now you can open VS Code from your terminal. Let's do this now.

How to Open VS Code from the Terminal

First, open up your terminal. You can open your terminal in a few ways. One way of opening your terminal is hitting the command button and the spacebar at the same time. This opens spotlight search. From here, you can type "terminal".

Once your terminal is open, you can open VS Code from it by typing $ code . Then hit enter.

Here's how this should look:

Once you hit enter, VS Code will now open.

And there you have it! Happy coding. :)

Google Colab and VS Code are two popular editor tools that many Python developers use. They're great for developing efficient tech solutions or systems especially in the areas of Machine Learning and Data Science.

If you're a Python developer or data scientist, you might already know how to use Google Colab. But did you know that you can set up VS Code on Google Colab and use it as an editor the same way as in your local machine?

In this article, you will learn:

1. How to install the colabcode Python package.
2. How to start VS Code (code server).
3. How to access the online VS Code.
4. How to open the terminal.
5. How to run a Python file.

How to Use Google Colab with VS Code

Open Colab Notebook

The first step is to launch a new colab notebook in your Google Colab. You can rename the file as you want.

For example, run_vscode.ipynb.

Install colabcode Python package.

To use Google Colab with VS Code (code server), you need to install the colabcode Python package. This is an awesome open-source Python package developed by Abhishek Thakur.

To install the package, run the following command in your notebook cell:

 !pip install colabcode

Import ColabCode

The next step is to import the ColabCode class from the package.

from colabcode import ColabCode

Create an instance of ColabCode

After importing ColabCode, you need to create an instance of ColabCode and set the following arguments:

• port – The port you want to run the code-server on. For example port=10000
• password – You can set a password to protect your code-server from unauthorized access. This is an optional argument.
• mount_drive – If you want to use your Google drive. This is a Boolean argument which means you can set it to True or False. This is an optional argument.

ColabCode(port=10000)

Start the Code Server

After running the ColabCode instance, it will start the server and show the link to access the code server.

You need to click the link and it will open in a new tab.

Now you can take advantage of a full-fledged code editor and run different experiments on the Colab VM.

Note: If you check on your Colab Notebook, you will see that the cell that runs the ColabCode instance is continuously running. Don't close your Colab notebook unless you want to close the code server that runs VS Code.

Tips to use VS Code on Google Colab

After launching the code server, use the following tips to help you start using VS Code on Google Colab.

Step 1: Open Terminal

To open the terminal on VS Code that runs on Google Colab, use the following shortcut command:

Ctrl + Shift + `

Step 2: Change the Theme if You Want

You can change the theme of the editor by clicking the setting icon (bottom-left corner) and then click "Color Theme". It will open a popup window with different theme options you can select.

Step 3: Run a Python File

You can create a Python file by clicking the "File" section on the sidebar and then select a "New File" tab.

In the following example, you will see how to run a simple Python file that trains a machine-learning algorithm to classify iris flowers into three species (setosa, versicolor, or virginica) and then make a prediction.

Final Thoughts on Using Google Colab with VS Code

Congratulations 👏👏, you have made it to the end of this article! I hope you have learned something new. You can set up VS Code on Google Colab and take your coding to the next level.

You can also use the colabcode Python package on the Kaggle platform to run VS Code. You just need to follow the same steps mentioned above.

If you learned something new or enjoyed reading this article, please share it so that others can see it. Until then, see you in the next post!

You can also find me on Twitter @Davis_McDavid.

And you can read more articles like this here.

You can now open anything (that you have access to) on GitHub directly from VS Code with the official Remote Repositories extension.

And I do mean directly. That means no clone. No download. No looking at your dev folder and wondering why on earth you structured your projects this way and OMG SO MUCH REGRET.

Listen, it's ok. Nobody is happy with how they have cluttered up their once pristine dev environment. Inside my "c:\dev" folder is an entire season of Hoarders and no, I'm not going to delete that jQuery project. I might need it some day.

Let's look at how the new Remote Repositories extension for VS Code lets you casually interact with any project on GitHub without having to clone a thing.

How to Install the Remote Repositories Extension

First, you'll need to install GitHub's Remote Repositories extension for Visual Studio Code.

To open a GitHub repo, click on the green indicator in the lower left-hand corner of VS Code.

You'll see a new option for "Open Remote Repository".

If you have other Remote extensions for VS Code installed, you'll see a lot more options in this list, so just search for the right one.

You can also get to this option from the Command Palette if clicking on things with a mouse is too much trouble. I see you VIM people.

You can paste in the URL to a GitHub repo if you happen to just have that hanging around on your clipboard (weird) OR you can browse GitHub by selecting "Open Repository from GitHub". The third option lets you open a Pull Request branch so you can pretend to thoroughly review it.

VS Code will reopen and you'll see that repository just like you were working with it locally. But you're not. You're looking at it on GitHub through the window of VS Code.

You'll notice disclaimers about "some features" not being available and that you are in "Restricted Mode".

This is part of the new Trusted Workspace settings in VS Code.

By default, VS Code now turns off Tasks, debugging, some workspaces settings and any extensions that might try and execute something the first time you open a folder. You have to tell VS Code that it's cool, you know and trust this code and you're 100% sure it's not going to shutdown your oil pipeline.

Ok – so scary security warnings dismissed, what can we do here?

How to Work with a Remote Repository

You have full editing capabilities with a big difference being that you don't have to save anything. Your changes are just saved as you go.

They aren't automatically committed to GitHub. In order for the changes to be saved to the repo, you'd have to commit them from the source control view.

You don't have to push them because you are already on GitHub. A commit is a commit – no push required. This is the same as if you were editing the file directly on GitHub. Because you essentially are.

As far as the editing goes, you get much of what you would expect in VS Code.

Language specific intellisense works. For instance, if you started writing a fetch, VS Code will help you with that because it knows about fetch.

But you do not get the intellisense on project files that VS Code gives you when it runs your project locally.

For instance – locally, VS Code knows about useEffect which comes from the react import. It knows this because it's inspecting the import which is a node module.

But with Remote Repositories, we're looking directly at GitHub and the node_modules folder never ever gets pushed to GitHub unless you are me 10 years ago. So there is no intellisense for useEffect because that code doesn't actually exist in the repo.

You can use things like Emmet to compose HTML and you get the nice split screen Markdown preview that you probably love like I do.

You can also use "Find" and "Find in Files".

Many things that work locally work the same way when connected to a project directly on GitHub, but some do not. Which is the vaguest thing anyone has ever written on the internet, but understanding how this all works will shed some light on what you can reasonably expect.

How It Works

VS Code has a file system provider API that has been around for some time. What this API does is provide a mechanism to consume an API as if it were a physical file. In this case, the Remote Repositories extension is consuming and mapping the GitHub API to a "Virtual Workspace" in VS Code.

This means that any extension that is trying to work with physical files is not going to work until the extension author updates their extension to use the Virtual File System API. Which means that things that don't work today might work in the future as extensions are updated.

So what can you expect to work? Themes, key bindings, snippets and grammar extensions. These types of extension typically don't execute any code, so you know they aren't trying to work with files which means it's safe (internet safe) to assume they'll work in Remote Repositories.

But some things won't ever work because you need local file access to do them.

A prime example of this is Prettier. Prettier is a CLI tool that alters your local files by reformatting your code. Since there is no local file access, it doesn't currently work with Remote Repositories. So nobody is going to change those double quotes to singles automatically or put that semicolon back. Or remove it. I want out of this paragraph.

In fact, you can't run a Remote Repositories project at all. If you open the terminal while connected to a Remote Repository, it will be there. But it won't have any access to this project.

Which is legit because the project doesn't actually exist on your machine. So how do you get a terminal if you find you actually do want to run the code you are working with, or just upgrade your editing experience to full-blown VS Code?

How to Switch to Full VS Code

"Continue on my wayward son" - some band from the 70's

If you click in that green bottom left-hand part of the Status Bar that says "GitHub" right now, you'll see an option to "Continue Working On".

This option will let you either clone the project locally, or open it in a GitHub Codespace.

If you're in the Codespaces Beta (request access here), you can open the repo in a Codespace. This is VS Code running in the browser, but backed by a compute environment where you can run anything just like it was on your desktop. This works because VS Code was originally designed to be a web app. True story.

Or clone it locally! Crack open that c:\Users\you\Documents\GitHub folder that you regret choosing to put all your projects in because now your "Documents" folder is being backed up to OneDrive and it's got 900 terabytes of node_modules in it. Well - now it's got 920.

Credit: Some brilliant soul. Please comment and take credit for this work of genius.

Cool. But Why?

The natural question you should be asking yourself right now is, "Very cool! But why do I need this?"

Excellent question. You are preceptive and people like you.

Consider the following scenarios...

• You want to browse a GitHub repo and look at the code. GitHub is a great site, but it's not the best way to quickly jump through files and examine a project. You really need an editor for that and Remote Repositories cuts out the cumbersome and often bandwidth intensive step of cloning simply to look at code.
• You want to make a quick update. While you would almost always do heavy coding locally, you might want to pop into a repo and make a quick change without having to sync your local environment. README's come to mind, but this could be any sort of small change.
• You are working on Markdown. If you're working on documentation, README's or other Markdown in GitHub, there's no need to clone the repo locally anymore to do that. Unless you are running a local server to preview that Markdown, using the built-in preview is a much faster way to pound out 5K words about your API.
• You want to review a PR. Seems self explanatory.

Get More Remote

Now that you have Remote Repositories, you can clean out that dev folder. Just right-click and delete something. See how good that feels?

Remote Repositories is one of several ways to do "Remote" development with VS Code. Check out these other options to use VS Code to connect to almost anything.

• Dev Containers - Use a Docker container as a full-featured development environment with
• Remote SSH - Open a remote folder in VS Code on any remote machine over an SSH connection
• Remote WSL - To use your WSL as the full-time backing runtime environment in VS Code.

Visual Studio Code (VS Code) is designed to be lightweight. It has a tight set of core features, and you can add extra features through extensions.

But performance will inevitably be affected as your collection of extensions grows.

Do you evaluate the performance of an extension before installing it? What do you do if the startup of VS Code grows? From the absence of people writing about this topic, I guess people don't know.

In this article, I will explain the factors that affect the performance of an extension. I will also grade the performance of some popular extensions. Then I will outline how you can audit the performance of your existing extension suite, and give some general performance tips.

Minimum hardware and software requirements

Before we get into extensions, let's talk briefly about what the minimum requirements for running VS Code are.

A computer bought in the last few years with modest specifications should be able to run VS Code without any issues.

Hardware

The minimum hardware I recommend is:

• 1.6 GHz or faster processor;
• At least 1 GB of RAM;
• At least 200MB Disk Space.

Operating Systems

VS Code has been tested on the following Operating Systems:

• OS X Yosemite and later.
• Windows 7 (with .NET Framework 4.5.2), 8.0, 8.1 and 10 (32-bit and 64-bit).
• Linux (Debian): Ubuntu Desktop 14.04, Debian 7.
• Linux (Red Hat): Red Hat Enterprise Linux 7, CentOS 7, Fedora 23.

Unofficial community builds for Raspberry Pi and Chromebooks

Jay Rodgers released an open-source project that performs nightly builds of VS Code for Raspberry Pi and Chromebooks.

I've maintained the project for a few years now and it has expanded from providing binaries for Pi to providing support and tools to get VS Code running on low-end ARM devices that might not otherwise support it like Chromebooks (which make up about 60% of the devices in schools now).

If you want to try it out for yourself, you can follow the instructions he has laid out. He's done a lot of work to make it as straightforward as possible.

Not all extensions are created equal

Edit of "Blindfolded Lady Justice" by Tingey Injury Law Firm on Unsplash

Extensions are loaded and unloaded under different conditions. The author of the extension decides this. This is specified through Activation Events, which we will discuss later.

There is no feedback in the editor indicating if an extension is active or not. So how do we know when an extension is active?

Most extensions are written in TypeScript, but they can also be written in JavaScript. Extensions can include Node modules as dependencies.

You can bundle and minify your source files into a single file if you wish. The VS Code Docs recommends doing this to improve loading times, but many extensions don't do this. These choices affect their performance.

Extensions are mostly open source side projects written by developers. The quality of the code will vary. The maintenance of the code will vary.

Extensions written by Microsoft are not immune to these shortcomings, but they are less likely to suffer from them.

Criteria for selecting an extension

Most lists of extensions talk about the cool features, and little else. If something is fire, please tell me a bit about the fuel and fumes also. ?‍??

Some of the criteria that I suggest involves looking at source code. Don't be put off by that. To gather the key facts only takes a couple of minutes. I will show you how!

1. Is the feature I need available in VS Code already?

   I demonstrated that you don't need many popular extensions in an article "VS Code: you don't need that extension". You can consult the VS Code docs to check on a particular feature.

2. Does the extension have the features I need?

   Consult the extension page on Visual Studio Marketplace to find this out.

3. When is an extension loaded and active?

   I'll discuss this in detail in the section Activation Events. You need to check the package.json of the source code to find this out in advance.

   You can run the Developer: Startup Performance command to see the Activation Events of installed extensions. I discuss this further in the section How to audit performance.

4. Are resources optimized?

   You need to check the source code to see if it uses a bundler. You can check the package.json to see if the scripts section has a pre-build step for bundling.

   The VSIX extension file is a compressed archive of files for the code and the listing in the marketplace. Developers often include unnecessary files. There is a .vscodeignore file to exclude files.

   The number of files that the VSIX contains has an impact on the cold activation time. The cold activation time is the first run of the extension after you install it. It tends to be slower than other times. I guess this is because the VSIX is uncompressed and cached.

   This is what the Vetur extension looks like when you open it in 7Zip.

5. Have there been any performance issues reported recently, which are unresolved?

   You can uncover these by auditing the performance of the extension. You need to check the issues on the Git repo also.

6. Does the code have tests?

   The extension is going to be more susceptible to bugs without tests. You need to check the source code to see if there are tests.

7. Is it actively maintained?

   The Project Details section of the extension page gives an overview of the activity of the public Git repo. In some cases, an extension may be "done", so maintenance is not an important consideration.

Activation Events

Activation Events are events that trigger the activation of an extension. They define the conditions for loading and unloading an extension.

The author of an extension declares this in the activationEvents field of the package.json (Extension Manifest).

There are a range of Activation Events to choose from. An extension can listen to many Activation Events to yield a more specific scope.

This is a Sequence Diagram of what happens when you launch VS Code. It gives you an idea of the chronology of events that occur, which affect when you can interact with the editor and use certain extensions.

Now, I will go through the most important Activation Events. I will start with the widest scope, and continue until I reach the narrowest scope.

Startup event

The * Activation Event will activate an extension when VS Code starts up. These extensions will always be active. This impacts the startup time of VS Code.

"activationEvents": [
    "*"
]

The VS Code docs gives the following advice:

To ensure a great end user experience, please use this activation event in your extension only when no other activation events combination works in your use-case.

In my opinion, there has to be a special case to grant an extension this scope. It is preferable to use at least onStartUpFinished.

Popular Extensions with this Activation Event: ES Lint (11M installs), Live Server (7.4 installs), GitLens (6.5M installs), Beautify (5.4M installs), Bracket Pair Colorizer (3.6M installs), Git History (2.9M installs), Settings Sync (2M installs), indent-rainbow (1.1M installs).

onStartupFinished event

This extension will be activated sometime after VS Code starts up. This is like the * activation event, but it will not slow down VS Code's startup.

"activationEvents": [
    "onStartupFinished"
]

Popular Extensions with this Activation Event: Prettier (8.5M installs).

onLanguage event

This extension will be activated whenever a file of a certain language is opened.

"activationEvents": [
    "onLanguage:json",
    "onLanguage:markdown",
    "onLanguage:typescript"
]

The onLanguage event takes a language identifier value. You can declare as many languages as you wish.

Popular Extensions with this Activation Event: Most extensions in the "Programming Languages" category in the Visual Studio Code Marketplace have an onLanguage entry along with other Activation Events, Vetur (5.6M installs - active for Vue only), YAML (4.3M installs - active for YAML only), Better Comments (1.1M installs - active for supported languages only).

workspaceContains event

This extension will be activated whenever you open a folder that contains at least one file that matches a glob pattern.

"activationEvents": [
    "workspaceContains:**/package.json"
]

onCommand event

This extension will be activated whenever you invoke a command.

"activationEvents": [
        "onCommand:vscode-docker.compose.down",
        "onCommand:vscode-docker.compose.restart",
        "onCommand:vscode-docker.compose.up",
        ...
]

Other Activation Events

You can read the full list of Activation Events in the reference docs.

Do extensions set a specific scope consistently?

No!

Too many extensions use the * Activation Event.

This is how I would grade the scope definition of some of the extensions I have used:

• The Good: Vetur, YAML, Better Comments.
• The Bad:
  • Prettier: It would be better to only target the languages it supports.
  • Markdown All in One: It is active when a markdown file is open, or the workspace contains a README.md. The latter seems unnecessary to me.
• The Ugly: All extensions with the * Activation Event mentioned above.

What impact can bundling have on an extension's performance?

Edit of untitled photo by Pablo Merchán Montes on Unsplash

It can make a big impact!

John Papa speaks about this in his article "Is Your VS Code Extension Slow? Here's How to Speed it Up!".

He reveals the results of an overhaul of 2 of Microsoft's extensions:

1. Azure Account: Bundling reduced activation time by 50%. The extension size was reduced from 6.2MB to 840KB through bundling and excluding more files (in the .vscodeignore file).
2. Docker: Bundling reduced activation time from 3.5 seconds to under 2 seconds. Also, a consideration is the cold activation time, which tends to be slower than other times (warm activation time). The cold activation time went from a whopping 20 seconds to 2 seconds.

You can improve your favourite extension by raising this issue with the author of an extension. The Bundling Extensions User Guide explains how.

How to audit performance

You can run the Developer: Show Running Extensions command to get the basic stats about the running extensions. It sorts the extensions from longest to shortest activation time. The time is titled "Startup Activation" if the extension is loaded on startup.

As you can see from the screenshot, it also gives warnings about performance issues.

As mentioned previously, it is worth noting that the cold activation time (the first time an extension is run) and warm activation time (second run and later) can vary by a lot. For this reason, you should base typical performance of an extension on a second run.

You can audit the startup performance by running the Developer: Startup Performance command. It opens a document with detailed stats about topics such as: system info, performance marks, extension activation stats, loader stats for modules, and more.

The results are specific to the current project and any open files when you execute the command.

The Extension Activation Stats section gives a more detailed overview of extension performance. It is very useful for seeing the Activation Events without needing to check the source code of an extension.

You can see that VS Code loads its own "core" extensions for Git, Emmet, and a few others on startup also. ? You don't want the list of extensions loading on startup to get too long!

Scorecard for some of the most popular extensions

I am focusing on extensions that I have used myself here. I don't want to speculate on extensions I haven't really used.

ESLint

ESLint is the most popular static analysis tool for JavaScript and TypeScript. It highlights problems in the editor with red squiggly lines.

• Author: Microsoft.
• Number of installs: 11 million.
• Marketplace Rating: 4.3/5 (156).
• Core features: Reporting syntax problems. Ability to automatically fix some problems.
• Activation Events: On startup (*). It may be changed to onStartupFinished in the next release. See this open issue for explanation of why this choice was made.
• Are resources optimized: Yes.
• File size: 133KB.
• Activation time on my system: 39ms.
• Test suite: Appears to be very basic. Just a minor test of glob patterns.
• Actively maintained: Yes.
• Alternative extensions: JS Hint, TS Lint.

ESLint is a solid extension. The performance is excellent.

It is disappointing that it is loaded on startup. If this bothers you, you can try JS Hint (written by the same developer) for JavaScript, and TS Lint for TypeScript. Or you can fork the project and change it yourself!

It is actively maintained. It does not have a significant test suite.

Score: 8/10

Prettier - Code Formatter

Prettier is an opinionated code formatter. It currently supports the following languages: JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML.

• Author: Prettier.
• Number of installs: 8.5 million.
• Marketplace Rating: 3.8/5 (204).
• Core features: Formatting code.
• Activation Events: onStartupFinished.
• Are resources optimized: Yes.
• File size: 2.1MB.
• Activation time on my system: 286ms.
• Test suite: Yes. Coverage looks decent.
• Actively maintained: Yes.
• Alternative extensions: Beautify.

Prettier does a great job at simplifying code formatting.

The performance is fine, but maybe it could be improved. It is on the slower side of the activation spectrum.

The activation scope is very wide. It would be preferable to target the supported languages only. I encountered an issue with Markdown formatting, so I do not use to format Markdown currently. These are things that can be changed easily.

Score: 7.5/10.

Live Server

Live Server launches a local development server to give a live preview of your HTML and SVG files.

• Author: Retwick Dey.
• Number of installs: 7.5 million.
• Marketplace Rating: 4.5/5 (269).
• Core features: HTML and SVG live preview.
• Activation Events: On startup (*).
• Are resources optimized: No.
• File size: 2.5MB.
• Activation time on my system: 2513ms.
• Test suite: Yes. Basic tests.
• Actively maintained: No. Last commit was a year ago. The author of the extension is looking for a new maintainer.
• Alternative extensions: I haven't found one!

When it works, it is a convenient extension to use.

The performance is poor and it is no longer maintained.

I would recommend becoming the maintainer and whipping it into shape. Or finding another extension for the job.

Score: 5/10.

GitLens

GitLens helps visualize code authorship and explore Git repositories.

• Author: Eric Amodio.
• Number of installs: 6.5 million.
• Marketplace Rating: 4.86/5 (387)
• Core features: Visualization of code authorship at a glance. Rich sidebar views of git repos.
• Activation Events: On startup (*).
• Are resources optimized: Yes.
• File size: 1.5MB.
• Activation time on my system: 35ms.
• Test suite: No.
• Actively maintained: Yes, but recent activity is low. Last commit was 4 months ago.
• Alternative extensions: None.

GitLens is a good idea and can be helpful for gaining insights into a codebase.

It is well-written and the performance is excellent.

I have only used the extension of the blame annotations, but there are a lot of features and configuration options (135 individual settings!).

There are settings to enable each of the features, which is a very good approach. You can toggle the codelens on and off easily.

There has been a lull in activity recently. I don't know if that is a temporary situation or not. So, it's hard to tell how well the extensions will be supported in future. The author has details for supporting him.

Score: 9/10.

Vetur

Vue language support.

• Author: Pine Wu.
• Number of installs: 5.6 million.
• Marketplace Rating: 4.5/5 (117)
• Core features: Syntax highlighting. Intellisense. Code Formatting.
• Activation Events: onLanguage: vue.
• Are resources optimized: No.
• File size: 70.6 MB.
• Activation time on my system: 252ms. However, the "Finish Activate" stat is 3943ms!
• Test suite: Yes.
• Actively maintained: Yes.
• Alternative extensions: No obvious alternative. Formatting can be done with Prettier.

Vetur is the go-to extension for developing Vue apps in VS Code.

The syntax highlighting, intellisense, and hover references are great to have for Vue development.

The size of the extension is HUGE.

The performance is a bit erratic. It takes at least 4 seconds on my machine to finish activation, which is a lot longer than the built-in JavaScript Language Features. There is also a noticeable delay for autocompletion of JavaScript syntax.

The Developers are working on bundling the extension at the moment in this issue, so hopefully there will be an improvement in the performance soon. ?

Score: 7/10.

Settings Sync

Settings Sync synchronize settings using GitHub Gist.

• Author: Shan Khan.
• Number of installs: 2 million.
• Marketplace Rating: 4.61/5 (638)
• Core features: Sync settings.
• Activation Events: On startup (*).
• Are resources optimized: Yes.
• File size: 1.2 MB.
• Activation time on my system: 2513ms.
• Test suite: Yes.
• Actively maintained: No. Last commit was 1 year ago.
• Alternative extensions: This is a built-in feature in VS Code.

This was a standout extension. Syncing your complete editor setup across machines is super useful.

Since July 2020, the same functionality is a built-in feature in VS Code for this very thing. The main difference is that this extension saves your settings to a gist, which you have the option to share with others too.

The activation time is quite slow. Is it justifiably slow? It's hard to tell.

My guess is that the built-in feature will do a better job eventually as it has the backing of Microsoft. The extension appears to be no longer supported.

Score: 8/10.

Markdown All in One

Markdown All in One fulfills a lot of your markdown needs.

• Author: Yu Zhang.
• Number of installs: 1.7 million.
• Marketplace Rating: 4.8/5 (90)
• Core features: Toggle-style editing. Table of contents.
• Activation Events: onLanguage: markdown, onCommand: markdown.extension.printToHtmlBatch, workspaceContains: README.md.
• Are resources optimized: Yes.
• File size: 4.1 MB.
• Activation time on my system: 195ms.
• Test suite: Yes.
• Actively maintained: Yes.
• Alternative extensions: Marky Markdown.

It is a solid extension and the performance is excellent.

It has too many features for my taste. For many people it is appealing to have everything they may want in a single extension.

The Activation Event workspaceContains: README.md seems an unnecessary inclusion to me. Most of my projects have a README, but I seldom edit them. So for me this is like having the extension always active.

The logic for the table of contents is a bit usual. It had some problems with false positives in the past. I don't know if that has been ironed out completely.

The file size of the extension can be reduced by excluding the README screenshots from the extension package.

Score: 8/10.

General Performance Tips

Use a 64-bit OS

If you upgrade to a 64-bit version of an OS, you can expand the amount of virtual memory (VM) available to VS Code from 2 GB to 4 GB.

This enables VS Code to handle significantly larger workloads when VM is required.

Disable restoration of project state on startup

VS Code automatically restores the project state from the previous session. This can prolong the times it takes to load a project.

You can disable some of the restore settings to speed up the loading time:

• Workbench › Editor: Restore View State: Enabled by default.
• Files: Restore Undo Stack: Enabled by default.
• Workbench: Startup Editor: Controls which editor is shown at startup. The default is welcome page. You can set this to none to prevent any editor appearing on startup.

Disable expensive features that impact editing performance

• Minimap: Editor › Minimap: Enabled. Enabled by default.
• Word wrap: Editor: Word Wrap. Disabled by default.
• CodeLens: Editor: CodeLens. Enabled by default.
• Format on Save: Editor: Format On Save. Disabled by default.
• Format on Paste: Editor: Format On Paste. Disabled by default.

Disable extensions for a workspace

You can disable an extension for a workspace (project).

You are most likely going to want to do this for extensions that run always. For a Java project, you are not going to need ESLint!

You can take the opposite approach also. You can disable an extension globally, and only enable it for a select number of projects.

Create extension sets

You can specify an alternate directory for extensions from the command-line as below.

code --extensions-dir <dir>

So, if you want to use different sets of extensions, you can. You can add a desktop shortcut for this, or an alias to run this regularly from the command-line.

One thing to keep in mind is syncing. If you sync your extensions between machines, you may want to exclude extensions from the sync. Otherwise, you may mess up your folder by mistake when you switch.

Ideally, you should not need to do this.

Disable all extensions for a session

You can start VS Code with all user extensions disabled from the command-line. Zen mode plus plus!

code --disable-extensions

Troubleshooting performance issues

Experiencing slowness or a blank screen

VS Code has trouble with GPU (graphics processing unit) hardware acceleration on some systems. You can see if this is the case by disabling GPU acceleration.

code --disable-gpu

To set this permanently, do the following:

• Open the Command Palette (Ctrl+Shift+P).
• Run the Preferences: Configure Runtime Arguments command.
• This command will open a argv.json file to configure runtime arguments. You might see some default arguments there already.
• Add "disable-hardware-acceleration": true.
• Restart VS Code.

Installation appears to be corrupt with [Unsupported] message

VS Code does a background check when it starts up to check if you've changed any of its source files. If this is the case, you'll see the [Unsupported] text in the title bar.

One cause of this issue can be anti-virus software. VS Code could have been mistakenly quarantined, or had files removed by the anti-virus software (see issue #94858). Check your anti-virus software settings to prevent this.

To solve this situation you can reinstall VS Code. This will replace the modified files and silence the warning.

Final Words

You shouldn't need to compromise on performance to get the features you need.

The most pragmatic approach is incrementally add the extensions you need. Do a little bit of research each time and test out the extension. And before you know it, you will have an awesome portfolio of extensions.

Snippets can add a touch of magic to your editor. It's like an incantation. Utter a short phrase (type a prefix), wave your wand (press Enter or Tab), and presto! A wonderful event unfolds in front of you. ✨

Most code editors support snippets out of the box. The code editor I will use to showcase snippets is Visual Studio Code (VS Code), the most popular editor of the day.

Also, there are some "text expander" apps that allow you to use snippets globally (across all apps). I will briefly cover how you can utilise these apps to get even more out of snippets.

Let's dive into all things snippets. ?

Definition

A snippet is a template that can be inserted into a document. It is inserted by a command or through some trigger text.

With snippets, you can create a boilerplate file, and insert commonly used blocks of text. The general idea is to save you typing out the same things completely again and again, and again. ?

Why should you use Snippets?

I'm not going to shock you with this statement: the internet is home to a lot conflicting opinions! Snippets do not escape this ignominy, but I don't think it is a topic that make people's blood pressure soar!

For the sake of balance, I will present a cross-section of those opinions here.

You don't have to pick a camp and be all-for or all-against snippets. I suggest you adopt them to a degree that serves you best.

Yay Camp ?

• Snippets can boost your productivity, saving you keystrokes and reducing input errors.
• Snippets leaves me with more mental CPU and enjoyment to spend on writing the code that I care about and want to focus on.
• Snippets can help you to remember to include something important!
• Integrating snippets into your workflow implicitly encourages you to use the mouse less often. Well-written snippets offer a logical path which you can tab through, stopping to edit along the way to complete the template exactly the way you want, and when you are done, you arrive on the other side ready to write your next line

Nay Camp ?

• I refrain from using them, mostly because I don't like being reliant on any given tool.
• I never use snippets. I prefer to invest time in avoiding repetition rather than making it easier.
• I found that at some point I forgot how to write the code without using the snippet. For trivial stuff that I understand, it is OK, but I don't want to forget some other stuff!
• Most, if not all, snippets I've seen online, for code I'm looking for, have mistakes in them. I've not once been able to find a numerical algorithm that didn't have floating point errors in it. I can't imagine there being any resource of perfectly clean code snippets.

When should you use snippets?

Donald Knuth, one of the grand-wizards of computer science, said "premature optimization [of code] is the root of all evil".

I think this is relevant to snippets also. Snippets are an optimization of code production. If you don't know a language or framework very well, implementing a slew of snippets for that language or framework is likely to be a premature move.

If you are comfortable, then try some out!

What I use snippets for

Personally, I use snippets often but judiciously. I use a set of snippets for Markdown and most of the languages I work with.

I haven't used snippets much for frameworks. I started using some snippets for Vue recently, but I only use the boilerplate snippet. I will probably adopt more of them once my Vue IQ has risen.

I haven't used snippets for algorithms.

Types of Snippets

Snippets can be classified according to the scope of interactivity between the snippet and the editor.

Static Snippets

You can think of it as a copy-and-paste of some source text as a single command.

Dynamic Snippets

A dynamic snippet can be customised to provide a wizard-like experience for completion of a snippet.

It can include:

• Tab Stops: You can number stops that can be tabbed through in order,
• Mirrored Tab Stops: There are times when you need to provide the same value in several places in the inserted text. You can mirror a tab stop to achieve this, and any edit will be reflected in the related tab stops instantly.
• Placeholders : It is a tab stop with a default value which can be overwritten on focus.
• Choices : At a tab stop you are presented with a dropdown list of values to choose from.
• Variables: Input values from the environment such as: the selected text in the editor, system dates, or content from the clipboard.

Here is an example of a markdown snippet which adds a task list with 2 tasks. It uses tab stops, placeholders, and choices for checking a task.

Macro Snippets

The top level of sorcery is to have the capability to transform input. Transformations allow you to alter the value of a variable before they are inserted, or alter a placeholder after you have made an edit.

For example, you may want to capitalise a class name once it is entered.

Anything that you can think of doing with a regex is typically possible. Some editors offer more advanced scripting possibilities.

Snippets in Visual Studio Code

In VS Code, snippets appear in IntelliSense (Ctrl+Space gives you a suggestion list), they are mixed in with other suggestions.

You can also access them in a dedicated snippet picker by using the 'Insert Snippet' command. This combines all user, extension, and built-in snippets for that language into a single list.

Emmet is integrated into VS Code and has it's own CSS-selector inspired syntax for inserting HTML and CSS snippets.

Emmet is it's own thing really, but the mechanics are the same. You can learn about Emmet with the Emmet in Visual Studio Code guide.

Related User Settings

Snippets will appear as quick suggestions if the setting editor.quickSuggestions is set to true for the language you are working in. Quick suggestions are enabled by default for most languages except markdown.

Snippets support tab-completion. You can type a snippet prefix (the trigger text), and press Tab to insert a snippet. You can enable it with the setting editor.tabCompletion.

The values are:

• on: Tab completion is enabled for all sources.
• off: Disable tab completions. This is the default value.
• onlySnippets: Tab completion only for snippets.

"editor.tabCompletion": "onlySnippets",

If you would like to control how snippets suggestions are shown, you can edit the setting editor.snippetSuggestions.

The values are:

• top: Show snippet suggestions on top of other suggestions. I use this value.
• bottom: Show snippet suggestions below other suggestions.
• inline: Show snippets suggestions with other suggestions. This is the default value.
• none: Do not show snippet suggestions.

"editor.snippetSuggestions": "top",

These are the most important settings for snippets, but there are a few more. You can check out this list of the default settings to explore more, or do a search in the Settings UI.

Are there built-in snippets?

Yes!

They aren't documented in the VS Code docs, though. And inside VS Code, there is no central point to browse them. So, you may not know what they are.

So, how can you find out what languages have built-in snippets?

Long story short, I was frustrated by this scenario, so I wrote an extension called Snippets Ranger to give a nice UI to explore snippets easily. Think of it as a Marauder's Map for snippets!

But I want to find the snippets for myself?

You can, it just requires a bit more effort.

As I mentioned earlier, the 'Insert Snippet' command will show you all snippets for the language of the active document.

Remember though, this is an aggregate of all of the user, extension, and built-in snippets. So, if you want to find out if a particular language has built-in snippets, you need to open a file for that language, and run the command to see that list.

If you have an snippets extension installed for that language that makes it too hard to identify which is which, you could disable it to ensure that only the built-in snippets are showing. ?

If you want to track down the source file yourself, the built-in snippets live inside each individual language extension directory. The file is located at «app root»\resources\app\extensions\«language»\snippets\«language».code-snippets on Windows. The location is similar for Mac and Linux.

Snippets Extensions

The Visual Studio Marketplace has a snippets category where you can find snippets for almost anything.

A lot of Programming Language Pack extensions include snippets also (Python, C#, Go, Java, and C/C++ amongst others).

How do I write my own?

Snippets files are written in JSON. You can also add C-style comments if you wish (technically it is Microsoft's "JSONC" format).

You can create snippets for different scopes: global, workspace, and for a particular language.

To create the snippets file, run the 'Preferences: Configure User Snippets' command, which opens a quickpick dialog as below. Your selection will open a file for editing.

If you would prefer to write a snippet in a GUI, you can use the snippet generator web app.

Let's look at an example to get familiar with the syntax.

Example

Here is a markdown snippet that comes with VS Code.

{
    "Insert heading level 1": {
       "prefix": "heading1",
       "body": ["# ${1:${TM_SELECTED_TEXT}}$0"],
       "description" : "Insert heading level 1"
    }
}

This snippet inserts a level 1 heading which wraps the markdown around the current selection (if there is one).

A snippet has the following properties:

1. "Insert heading level 1" is the snippet name. This is the value that is displayed in the IntelliSense suggestion list if no description is provided.
2. Theprefix property defines the trigger phrase for the snippet. It can be a string or an array of strings (if you want multiple trigger phrases). Substring matching is performed on prefixes, so in this case, typing "h1" would match our example snippet.
3. The body property is the content that is inserted into the editor. It is an array of strings, which is one or more lines of content. The content is joined together before insertion.
4. The description property can provide more information about the snippet. It is optional.
5. The scope property allows you to target specific languages, and you can supply a comma-separated list in the string. It is optional. Of course, it is redundant for a language-specific snippet file.

The body of this snippet has 2 tab stops and uses the variable ${TM_SELECTED_TEXT}.

Let's get into the syntax to understand this fully.

Snippet syntax

VS Code's snippet syntax is the same as the TextMate snippet syntax. However, it does not support 'interpolated shell code' and the use of the \u transformation.

The body of a snippet supports the following features:

1. Tab Stops

Tab stops are specified by a dollar sign and an ordinal number e.g. $1 . $1 will be the first location, $2 will the second location, and so on. $0 is the final cursor position, which exits the snippet mode.

For example, let's say we want to make an HTML div snippet and we want the first tab stop to be between the opening and closing tags. We also want to allow the user to tab outside of the tags to finish the snippet.

Then we could make a snippet like this:

{
    "Insert div": {
        prefix: "div",
        body: ["<div>","$1","</div>", "$0"]
    }
}

2. Mirrored Tab Stops

There are times when you need to provide the same value in several places in the inserted text. In these situations you can re-use the same ordinal number for tab stops to signal that you want them mirrored. Then your edits are synced.

A typical example is a for loop which uses an index variable multiple times. Below is a JavaScript example of a for loop.

{
    "For Loop": {
        "prefix": "for",
        "body": [
            "for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {",
            "\tconst ${3:element} = ${2:array}[${1:index}];",
            "\t$0",
            "}"
        ]
    }
}

3. Placeholders

Placeholders are tab stops with default values. They are wrapped in curly braces, for example ${1:default}. The placeholder text is selected on focus such that it can be easily edited. Placeholders can be nested, like this: ${1:first ${2:second}}.

4. Choices

Choices present the user with a list of values at a tab stop. They are written as a comma-separated list of values enclosed in pipe-characters e.g. ${1|yes,no|}.

This is the code for the markdown example shown earlier for inserting a task list. The choices are 'x' or a blank space.

{
  "Insert task list": {
    "prefix": "task",
    "body": ["- [${1| ,x|}] ${2:text}", "${0}"]
}

5. Variables

There is a good selection of variables you can use. You simply prefix the name with a dollar sign to use them, for example $TM_SELECTED_TEXT.

For example, this snippet will create a block comment for any language with today's date:

{
    "Insert block comment with date": {
        prefix: "date comment",
        body: ["${BLOCK_COMMENT_START}",
               "${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${1}",
               "${BLOCK_COMMENT_END}"]
    }
}

You can specify a default for a variable if you wish, like ${TM_SELECTED_TEXT:default}. If a variable does not have a value assigned, the default or an empty string is inserted.

If you make a mistake and include a variable name that is not defined, the name of the variable is transformed into a placeholder.

The following workspace variables can be used:

• TM_SELECTED_TEXT: The currently selected text or the empty string,
• TM_CURRENT_LINE: The contents of the current line,
• TM_CURRENT_WORD: The contents of the word under cursor or the empty string,
• TM_LINE_INDEX: The zero-index based line number,
• TM_LINE_NUMBER: The one-index based line number,
• TM_FILENAME: The filename of the current document,
• TM_FILENAME_BASE: The filename of the current document without its extensions,
• TM_DIRECTORY: The directory of the current document,
• TM_FILEPATH: The full file path of the current document,
• CLIPBOARD: The contents of your clipboard,
• WORKSPACE_NAME: The name of the opened workspace or folder.

The following time-related variables can be used:

• CURRENT_YEAR: The current year,
• CURRENT_YEAR_SHORT: The current year's last two digits,
• CURRENT_MONTH: The month as two digits (example '07'),
• CURRENT_MONTH_NAME: The full name of the month (example 'July'),
• CURRENT_MONTH_NAME_SHORT: The short name of the month (example 'Jul'),
• CURRENT_DATE: The day of the month,
• CURRENT_DAY_NAME: The name of day (example 'Monday'),
• CURRENT_DAY_NAME_SHORT: The short name of the day (example 'Mon'),
• CURRENT_HOUR: The current hour in 24-hour clock format,
• CURRENT_MINUTE: The current minute,
• CURRENT_SECOND: The current second,
• CURRENT_SECONDS_UNIX: The number of seconds since the Unix epoch.

The following comment variables can be used. They honour the syntax of the document's language:

• BLOCK_COMMENT_START: For example, <!-- in HTML,
• BLOCK_COMMENT_END: For example , --> in HTML,
• LINE_COMMENT: For example, // in JavaScript.

6. Transformations

Transformations can be applied to a variable or a placeholder. If you are familiar with regular expressions (regex), most of this should be familiar.

The format of a transformation is: ${«variable or placeholder»/«regex»/«replacement string»/«flags»}. It is similar to String.protoype.replace() in JavaScript. The "parameters" do the following:

• «regex»: This is a regular expression that is matched against the value of the variable or placeholder. The JavaScript regex syntax is supported.
• «replacement string»: This is the string you want to replace the original text with. It can reference capture groups from the «regex», perform case formatting (using the special functions: /upcase, /downcase, and /capitalize), and perform conditional insertions. See TextMate Replacement String Syntax for more in-depth information.
• «flags»: Flags that are passed to the regular expression. The JavaScript regex flags can be used:
  • g : Global search,
  • i : Case-insensitive search,
  • m : Multi-line search,
  • s : Allows . to match newline characters,
  • u : Unicode. Treat the pattern as a sequence of Unicode code points,
  • y : Perform a "sticky" search that matches starting at the current position in the target string.

To reference a capture group, use $n where n is the capture group number. Using $0 means the entire match.

This can be a bit confusing since tab stops have the same syntax. Just remember that if it is contained within forward slashes, then it is referencing a capture group.

The easiest way to understand the syntax fully is to check out a few examples.

As you can see from the second example above, metacharacter sequences must be escaped, for example insert \\w for a word character.

Placeholder Transformations

Placeholder transforms do not allow a default value or choices! Maybe it is more suitable to call them tab stop transformations.

The example below will uppercase the text of the first tab stop.

{
  "Uppercase first tab stop": {
    "prefix": "up",
    "body": ["${1/.*/${0:/upcase}/}", "$0"]
  }
}

You can have a placeholder and perform a transformation on a mirrored instance. The transformation will not be performed on the initial placeholder. ?

Would you use this behaviour somewhere? I find it confusing initially, so it may have the same affect on others.

{
  "Uppercase second tab stop instance only": {
    "prefix": "up",
    "body": ["${1:title}", "${1/(.*)/${1:/upcase}/}", "$0"]
  }
}

How do I assign Keyboard Shortcuts for snippets?

By adding your shortcuts to keybindings.json . You can open the file by running the 'Preferences: Open Keyboard Shortcuts File (JSON)' command.

For example, to add a shortcut for the built-in markdown snippet "Insert heading level 1":

{
    "key": "ctrl+m ctrl+1",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus && editorLangId == markdown",
    "args": {
        "langId": "markdown",
        "name": "Insert heading level 1"
    }
}

You define a shortcut by specifying the key combination you want to use, the command ID, and an optional when clause context for the context when the keyboard shortcut is enabled.

Through the args object, you can target an existing snippet by using the langId and name properties. The langId argument is the language ID of the language that the snippets were written for. The name is the snippet's name as it is defined in the snippet file.

You can define an inline snippet if you wish using the snippet property.

[
  {
    "key": "ctrl+k 1",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "${BLOCK_COMMENT_START}${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${1} ${BLOCK_COMMENT_END}"
    }
  }
]

You can use the Keyboard Shortcuts UI also, but it does not have the ability to add a new shortcut.

Another downside of the UI is that it does not show the args object, which makes it more difficult to find and edit your custom shortcuts. ?

A question of style

Something that I found offputting initially with snippets was the propensity for people to create snippets with abbreviated prefixes. Do I have to learn a big list of gibberish acronyms to use someone else's snippets?

What do I mean by abbreviated prefixes? The table below list a few of the snippets from the JavaScript (ES6) code snippets VS Code extension. You can see in the Trigger column, the prefixes listed are abbreviations, for example fre to represent a "for each" loop.

This is unnecessary in two ways.

Firstly, the quick suggestions offered by VS Code are produced from a fuzzy substring search. If I type "fe" and the prefix of a snippet is "foreach", this will match and be offered as a quick suggestion.

As you can see below, this is the second match.

The first match is fre, which is a snippet from the extension. Which suggestion is more descriptive? ?

If you use the "Insert Snippet" command for snippets, it does not make much of a difference. The description field makes amends for this shortcoming. I don't use snippets in this way, so I would prefer a more descriptive prefix.

Secondly, fre is a duplicate of the built-in snippet foreach.

Some people turn off quick suggestions for snippets and use tab completion only. In this case, you need to type a prefix out without getting visual feedback. Some people may prefer to use an abbreviated prefix to save keystrokes here.

The same fuzzy substring search is being performed in the background, so the first snippet match is inserted when you hit tab.

Looking at the example above, you can see that typing "fr" and hitting tab inserts the fre snippet. Typing "fore" and hitting tab inserts the foreach snippet.

So, you do not need to type out the entire prefix, if you really don't want to! ? If you have many similarly named snippet prefixes for a language, it would be impractical I imagine.

It is more practical to learn the prefixes properly, and type them out entirely before hitting tab.

There are some trade-offs depending on your preferences for using snippets.

Personally, I like to use quick suggestions as I like the visual feedback. I have snippets set to be the top suggestions, that way I can type abbreviated versions of the prefixes without needing to memorise them.

Some snippet authors have rigid patterns to overcome this, but that's just something I can't get into easily.

If you use a lot of snippets for a language, you may want to choose snippets that are written in a similar style.

If you use snippets for different frameworks and libraries in a language, they can add up and overlap. I haven't needed to do this, but you may need to do it eventually.

Global Snippets

Outside of your code editor, you can benefit from snippets also. Having snippets available in every app offers more possibilities.

Common use cases are:

• canned responses for messages,
• autocorrecting common typos,
• adding contact information or signatures to documents,
• inserting dates,
• formatting of selected text and pasted text,
• inserting search phrases for your search engine or app,
• HTML snippets available inside your email client,
• adding different templates to documents.

Most of the apps for snippets are touted as "text expanders", but quite a few task and productivity apps also include snippet-esque features.

Global snippets are bit more limited that code editor snippets, as you cannot use tab stops and placeholders. In most apps you can use some dynamic variables such as dates.

App Review

Autohotkey (Windows)

AutoHotkey is a free, open-source scripting language for Windows to do all kinds of tasks.

It has it's own unique syntax. You can install the AutoHotKey extension to add language support to VS Code for a better editing experience.

For defining prefixes to trigger a snippet insertion, you use the following format: ::<<prefix>>::<<text to insert>>. The following script will insert Rob's email address when you type "robmail" and hit space or tab or enter.

::robmail::rob@someservername.com

The following script will insert the text "This is the snippet text" when you press Ctrl+D.

^d::  Send This is the snippet text

You can read the docs to learn more.

PhraseExpress (Windows, Mac, iOS)

PhraseExpress is "a text expander software, that manages frequently used text templates for insertion into any program".

It is a freemium, GUI-based app. It is aimed at a wider audience than AutoHotKey.

It is quite polished and easy to use. You set it to run on start-up and it will be active in the background.

Your snippets can be organized into custom folders and synced using cloud services.

Espanso (Windows, Mac, Linux)

This is a open-source, cross-platform text expander written in Rust.

It uses a file-based configuration approach. The config files are written in YAML.

The default.yml file contains the main configuration. The config below will insert Rob's email address when you type "robmail" .

matches:
 - trigger: ":robmail"
   replace: "rob@someservername.com"

You can specify the initial cursor position, however you cannot define tab stops.

You can add extensions to increase the capability of Espanso. There are extensions for running external scripts, including dates, generating random text, and including clipboard data.

And that's about it! I hope you learned something about snippets today, and you can use them to make yourself more productive.

With just a couple of clicks, Live Server lets you see your page live in an actual browser. Better yet, it features live reloading, so if you update your code, the changes are also reflected in the browser.

All you have to do is right click in the HTML file you want to view, right click, then select "Open with Live Server":

Live Server in action

But what if Live Server doesn't open your browser and show your page like you expect? If this is happening to you, here are a few things you can try.

Restart VSCode

Sometimes the best you can do is start VSCode from scratch.

First, save all of your work. Then close VSCode, which will also stop all of the extensions you've installed.

Then, reopen VSCode and try again – go to the HTML file you want to view, right click, and select "Open with Live Server".

Set the browser for Live Server

It's possible that the extension is working, but your system doesn't have a default browser.

Even if you did set the default browser for your system, it wouldn't hurt to let Live Server know which browser you'd like to use explicitly.

First, open the Command Pallete with F1, then type in Preferences: Open Settings (JSON) and select that option.

This will open your VSCode settings.json file.

Scroll all the way to the bottom of the file, add a comma after the last setting, then paste in "liveServer.settings.CustomBrowser": "chrome":

Note that you can also use "firefox", "safari", or any other browser as the value for the "liveServer.settings.CustomBrowser" setting.

Finally, save the settings.json file and try to run Live Server again.

Set the default browser for your operating system

Even after telling Live Server which browser you want to use, it's possible that it's still not opening your page in that browser correctly.

The next thing to try is to set the default browser for your operating system itself.

The exact method for doing this can vary based on your operating system, so it's best to search for how to do this if you aren't sure.

Here's what the settings page looks like in Windows:

Credit: Advitya-sharma

Go to the live page yourself

If for some reason Live Server still isn't opening the page in your browser automatically, no worries. You can always open the browser of your choice and view the page directly.

Just open your preferred browser and go to http://127.0.0.1:5500/<your_file_name>.

For example, if your file is called index.html, just go to http://127.0.0.1:5500/index.html.

As long as Live Server is running, you should see your page.

In closing

Those are a few common fixes you can try if Live Server isn't working the way you expect.

Stay safe, and happy (live) coding.

I just made my first VS Code extension. And it felt good! This article will cover basic steps to help you create your own VS Code extension. Along the way I'll share what I learned from making one for the first time.

I am not an expert at this yet, but I can truly say that nothing is as hard as it seems. ?

Let's talk about VS Code and its Extension Marketplace

If you opened this article, you have probably at least heard about VS Code (or Visual Studio Code). If not, it's basically a light-weight code editor developed by Microsoft.

Since VS Code is a code editor, it can perform much faster and lighter than a typical IDE such as Eclipse. But with that performance comes one disadvantage: IDEs often provide better tools such as built-in linters, better code templates, code versioning tools, and some features such as auto complete.

But where VS Code actually shines is the power of the community. It allows you to install extensions that come directly from the VS Code marketplace itself. These extensions allow you to customize it however you wish. You can, for example, add a linter or any other features like colorful brackets. You can even put a nyan cat in your VS Code!

Who doesn't like a nyan cat?

Why should you create a VS Code extension?

Yes, ‘why’ is the keyword here. It's the first and most important thing to talk about when you want to start doing something.

Ask yourself why do you want to make it? Most people usually answer because they want to learn something or gain fame, or maybe even both. But the more reasons there are, the more motivation you will have.

One thing I can say is that you don’t need to think big yet. Just make a tool that is very specific, that maybe only you will use. The first step is always the hardest. And at the end of day at least you've helped yourself with your extension.

As for myself, I built an extension because of one particular reason: I wanted to make a tool that I could use to increase my productivity. And that would maybe even help a small part of the community near me. (Spoiler: it's golang unit test generator)

That’s why the extensions that I've made are very precise and have a very specific use case. I'm not going for a big mark, I am aiming to increase my productivity and learn something new. I think that is enough reason for me.

And of course everything seemed impossible at the start. Making VS Code extensions looks like some genius level piece art of work (but of course it's not). Since I have a lot of free time on my hands at the moment, I figured I might as well try it out.

The Very first step of Building a VS Code Extension

To get started, you have to have VS Code installed. In case you don’t have it yet, I will just put the download link here.

VS Code extensions support two main languages: JavaScript and TypeScript. So having some knowledge of either of these is pretty mandatory.

Also, make sure you have Node.js installed, since we are going to use a lot of npm packages here.

How to Generate a VS Code Extension Template

Ah, templates. How very convenient. VS Code already has its own template generator, so let’s jump straight into it.

First, install your template generator with npm install -g yo generator-code

Afterwards, let's run it with yo code. And it will prompt out this weird head thing (?) and language selection. Just pick your preferred language and proceed. (I picked JavaScript here).

yo code

Afterwards, you will need to edit your extension name and description. You can just proceed with anything you prefer.

or maybe just enter all the way

Now, a folder called hellovscode will be created in your home directory. Open it with VS Code by simply typing code hellovscode in the folder directory.

Use the F5 key to run your extension and another window will popup. Now press ctrl+shift+p and find the Hello World command, run it, and a popup should come out in the bottom right corner. Like this:

Magic? Nope. Just collection of code.

Voilà! You've just run your first extension. But what is actually happening with all that? Don’t worry, I will explain some bits below, mainly regarding two files: extension.js and package.json.

What is the Extension.js File in VS Code?

This is where you will spend most of your time coding. This file will contain all your code blocks and logic flow.

There isn’t much difference between this and normal Node code. But one of the main differences is registering your commands. You will come upon this block vscode.commands.registerCommand('hellovscode.helloWorld'.

In a nutshell, it will register your function call to be used.

Another difference is the frequent usage of the VS Code API – but we will come back to that later on.

If you looked through the code, you will see this too: vscode.window.showInformationMessage('Hello World from hellovscode!');

As an experiment, try changing the value of the message and try running it again.

Package.json

This file is the one that basically will link the commands you created from extension.js with the commands that you defined.

You will see the command that you have registered above hellovscode.helloWorld being put as a part of the command titled Hello World. And that’s how the command actually links to your code.

Apart from this, this file will also enable the command to be put on the right click bar. It will also filter where the command should appear (file type).

How to Publish Your VS Code Plugin

Just in case you might want to publish your extension, I will show you how to do that here:

Step 1: First and foremost, install vsce with npm install -g vsce. We will use this most of the time to publish.

Step 2: If you don’t have a Microsoft account yet, you should register here since we will be needing the access token you'll get.

Step 3: Once you have the account sign in to the marketplace. Create your organization and click on it (you should see something like the below).

Step 4: Now click on the upper right corner where the red circle is and select Personal Access Token. Create your personal access token and choose all accessible organizations with full access.

Step 5: Remember your token since you'll use it when uploading your extension.

Step 6: You will need to create your publisher identity now. So go to your command prompt and type run vsce create-publisher YOUR_PUBLISHER_NAME .
Insert your own name, email, and personal access token when prompted. Your publisher account should successfully be created.

Step 7: It’s publishing time! Prepare your extension environment in the command prompt and type vsce package. This will package your extension to marketplace format. Then type vsce publish.

And that’s it, your extension will be published.

On a side note, when publishing you should modify your readme (at least the first part where it says This is Readme for.. ) since vsce will detect it and ask you to modify it.

Some Additional Tips for Building VS Code Extensions

Now you should have some basic understanding of how VS Code extensions work. Here, I will share some things that I have learned.

Utilizing VS Code's API

VS Code itself has provided a lot of APIs for you to use to make your extension. You might encounter several common obstacles when building your extension, like getting your cursor position, getting the line position, or maybe getting the highlighted word. Those all can be tackled with using the VS Code API.

You should read through their documentation and experiment with their API. You can even try reading through their API code! With the amount of documentation inside the code itself, you should be able to somewhat figure out which API will be most helpful.

Googling things (read the docs or code)

Most of the time in our programming life, when we are stuck there is always Google or Stack Overflow that can provide quick help.

But this time it will not always save you.

First of all, googling for help in this case is quite tricky. For example, say you want to highlight a word on cursor – you might search for vs code extension how to get total line... or something similar.

But let me tell you, most of the time it will direct you to the real extension itself or give you manual on how to use VS Code.

One way you can make it easier for yourself is by adding the "API" keyword in your search, like vs code extension api how to ....

Also, it is pretty hard to find the relevant answers in Google, because the developer community is not that huge, and VS Code extensions may look intimidating for many newcomers. But truthfully, it is not exactly that hard.

That’s why sometimes the best way to learn how to develop a VS Code extension is by reading the documentation or the code.

A VS Code Extension GitHub Example Repository

I have provided a text manipulation example in my GitHub repository which might help for code references (watch out for some messy code though!). The code will generate some template unit tests in the Go language.

Wrapping up

What I have covered here are just the basics of creating a VS Code extension. One message I want you to take to heart is that it is not as hard as it looks. Sometimes you just need to push yourself a bit and try it out.

You might come across some challenges along the way, but if you never even start you are missing out completely.

In the end, thanks for taking the time to read this. I hope you enjoyed it and started to understand all the things I just explained.

And hopefully you will also start making an extension too!

Happy coding to you all in this social distancing time.

Learn what’s new and build an app

Angular has released its latest version, Angular 6.0. In this article, we will understand the new features of Angular 6.0 and also set up a new project with the help of Angular CLI 6.0 and Visual Studio Code.

What’s new in Angular 6.0?

ng update

A new CLI command that will update your project dependencies to their latest versions.

ng add

Another new CLI command that makes adding new capabilities to your project easier.

Angular Elements

This is a new feature that allows us to compile Angular components to native web components which we can use in our Angular app.

element is deprecated

You can’t use anymore inside of your component templates. You need to use instead.

Library support

Angular CLI now has the support for creating and building libraries. To create a library project within your CLI workspace, run the following command: ng generate library (for example: ng generate library my-demo-lib)

Angular Material Starter Components

If you run “ng add @angular/material” to add material to an existing application, you will also be able to generate 3 new starter components:

• Material Sidenav
  A starter component including a toolbar with the app name and the side navigation
• Material Dashboard
  A starter dashboard component containing a dynamic grid list of cards
• Material Data Table
  A starter data table component that is pre-configured with a datasource for sorting and pagination

Workspace support

Angular CLI now has support for workspaces containing multiple projects, such as multiple applications and/or libraries.

The “.angular-cli.json” file has been deprecated

Angular projects will now use “angular.json” instead of “.angular-cli.json” for build and project configuration.

Use RxJS V6

Angular 6 will also allow us to use RxJS V6 with our application.

Tree Shakable Providers

Angular 6.0 allows us to bundle services into the code base in modules where they are injected. This will help us to make our application smaller.

For example: Earlier, we used to reference our services as below.

// In app.module.ts    @NgModule({    ...    providers: [MyService]  })  export class AppModule {}    // In myservice.ts     import { Injectable } from '@angular/core';    @Injectable()  export class MyService {    constructor() { }  }

This approach will still work, but Angular 6.0 provides a new and easier alternative to this. We no longer need to add references in our NgModule. We can inject the reference directly into the service. Therefore, we can use the service as below:

// In myservice.ts    import { Injectable } from '@angular/core';    @Injectable({    providedIn: 'root',  })  export class MyService {    constructor() { }  }

Those are the new features/improvements in the latest release of Angular. Let’s move on and create our first application using Angular 6.0.

Prerequisites

• Install the latest version of Node.js from here
• Install Visual Studio Code from here

Installing Node.js will also install npm on your machine. After installing Node.js, open the command prompt and run the following set of commands to check the version of Node and npm installed on your machine.

Refer to the below image:

Now that we’ve installed Node and npm, the next step is to install Angular CLI. Run the following command in a command window. This will install Angular 6.0 CLI globally on your machine.

Open VS Code and navigate to View >> Integrated Terminal.

This will open a terminal window in VS Code.

Type the following sequence of commands in the terminal window. These commands will create a directory with the name “ng6Demo” and then create an Angular application with the name “ng6App” inside that directory.

• mkdir ng6Demo
• cd ng6Demo
• ng new ng6App

There we go — we have created our first Angular 6 application using VS Code and Angular CLI. Now run the following command to open the project.

Refer to the image below:

This will open the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.

Notice that the folder structure is a little bit different from the older version of Angular. We have a new “angular.json” file instead of the old “.angular-cli.json” file. This config file will still serve the same task as before, but the schema has changed a bit.

Open the package.json file and you can observe that we have the latest Angular 6.0.0 packages installed in our project.

{    "name": "ng6-app",    "version": "0.0.0",    "scripts": {      "ng": "ng",      "start": "ng serve",      "build": "ng build",      "test": "ng test",      "lint": "ng lint",      "e2e": "ng e2e"    },    "private": true,    "dependencies": {      "@angular/animations": "^6.0.0",      "@angular/common": "^6.0.0",      "@angular/compiler": "^6.0.0",      "@angular/core": "^6.0.0",      "@angular/forms": "^6.0.0",      "@angular/http": "^6.0.0",      "@angular/platform-browser": "^6.0.0",      "@angular/platform-browser-dynamic": "^6.0.0",      "@angular/router": "^6.0.0",      "core-js": "^2.5.4",      "rxjs": "^6.0.0",      "zone.js": "^0.8.26"    },    "devDependencies": {      "@angular/compiler-cli": "^6.0.0",      "@angular-devkit/build-angular": "~0.6.0",      "typescript": "~2.7.2",      "@angular/cli": "~6.0.0",      "@angular/language-service": "^6.0.0",      "@types/jasmine": "~2.8.6",      "@types/jasminewd2": "~2.0.3",      "@types/node": "~8.9.4",      "codelyzer": "~4.2.1",      "jasmine-core": "~2.99.1",      "jasmine-spec-reporter": "~4.2.1",      "karma": "~1.7.1",      "karma-chrome-launcher": "~2.2.0",      "karma-coverage-istanbul-reporter": "~1.4.2",      "karma-jasmine": "~1.1.1",      "karma-jasmine-html-reporter": "^0.2.2",      "protractor": "~5.3.0",      "ts-node": "~5.0.1",      "tslint": "~5.9.1"    }  }

The name of our Angular application is ng6app which is inside ng6demo directory.

So, we will first navigate to our application using the below commands.

And then we use the following command to start the web server.

After running this command, you can see that it is asking to open http://localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

Now we will try to change the welcome text on the screen. Navigate to /src/app/app.component.ts file and replace the code with the below code.

import { Component } from '@angular/core';    @Component({    selector: 'app-root',    templateUrl: './app.component.html',    styleUrls: ['./app.component.css']  })  export class AppComponent {    title = 'Csharp Corner';  }

Now open the browser, you can see that the web page has been updated with new welcome message “Welcome to Csharp Corner!”

In this article we learned about the new features of Angular 6.0. We have installed the Angular 6.0 CLI and created our first Angular 6.0 application with the help of Visual Studio Code. We have also customized the welcome message on the webpage.

You can also find this article at C# Corner.

You can check my other articles on Angular here

Originally published at https://ankitsharmablogs.com/