More VS Code

VS Code

Contents

What is VS Code?

VS Code is a popular open-source text-editor maintained by Microsoft. It's very customizable and capable. VS Code's functionality can be extended using extensions, however, most useful features are built-in. To try it out, let's use VS Code to open and edit a file!

Edit a File in VS Code

To edit a specific file in VS Code, we can simply type the filename after code.

Let's add an alias (shortcut) command that will change to your code directory by simply typing repo. We can do this by editing the hidden .zshrc file.

code ~/.zshrc

Add this line (preferably near the example aliases).

alias fx1026="cd ~/seirfx1026"

Extensions

One of the most powerful features of VS Code is extensions. They allow us to add on additional features to VS Code that will increase our productivity. Here's some of the ones we recommend using:

• Azure Databases - Browse and query your Azure databases both locally and in the cloud.

• Better Comments - helps you create more human-friendly comments in your code.

• Bracket Pair Colorizer 2 - allows matching brackets to be identified with colors.

• Color Info - provides quick information about CSS colors.

• Debugger for Firefox and Debugger for Chrome - Debug web applications in the browser!

• EJS Language Support - Syntax highlighting for EJS, JavaScript, and HTML tags. Includes JavaScript autocompletion.

• ESLint - Integrates ESLint JavaScript into VS Code. See the documentation for more.

• Live Server - Launch a development local Server with live reload feature for static & dynamic pages.

• Live Share - Enables you to collaboratively edit and debug with others in real time.

• Markdown All in One - All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).

• Python - Linting, Debugging (multi-threaded, remote), Intellisense, Jupyter Notebooks, code formatting, refactoring, unit tests, snippets, and more.

• vscode-icons - A file and folder icon library. Supports thousands of different file and folder types.

Themes

Developers love making their workspace their own - one way to do this is through VS Code themes. Here's a few from the marketplace that come highly recommended:

• One Dark Pro

• One Dark Monokai

• Dracula

• Material Theme

• SynthWave '84

You can change your theme by pressing Command ⌘ + Shift + P in macOS or Ctrl + Shift + P on Linux and Windows to open the command palette. With the control palette open type theme and select the Preferences: Color Theme option. From here select the theme you want to apply. Many themes come with VS Code by default, one of the best of which is the High Contrast Theme.

Accessing the Command Line Interface in VS Code

We are able to start a terminal session from within VS Code! This is incredibly useful because it means we can stay in one application and do all our work instead of switching back and forth between VS Code and the Terminal applications. To do this use Ctrl + ``` (that is a backtick - this key is above your Tab key).

Test Your Alias

Before we wrap up we should test the alias we made earlier! Close VS Code and the Terminal window. Then re-launch Terminal and type fx1026 to check that it works!