Visual Studio Code

Advantages

Here are some reasons why VSCode is my preferred editor (over Sublime Text 3 or Atom):

• It's open source. Sublime Text 3 is not (and that's not a bad thing for software, but it's nice to have an open source editor).
• It can handle large files.
• File explorer is built in and extensions are super easy to manage.
• Built-in Markdown support (editing and preview).
• Built-in TypeScript support (Microsoft are the creators of TypeScript).
• Actively maintained (Sublime Text 3 is not regularly maintained).
• Easier to setup Linting.

Setting Up

User and Workspace Settings

If you navigate to File > Preferences > Settings, VS Code will open up a tab into your settings.json (User level). You'll notice the left pane lists all the defaults settings for the editor and also for any extensions you've installed. You can override these values in your settings.json file. You can read more about this here, but we are more focused on providing a workspace settings file in this project.

VS Code provides two different scopes for settings:

• User: These settings apply globally to any instance of VS Code you open.
• Workspace: These settings are stored inside your workspace in a .vscode folder and only apply when the workspace is opened. Settings defined on this scope override the user scope.

I've added a .vscode folder to the project to hold the workspace settings. There are actually two files located there. The settings.json file to hold the settings for the project and the extensions.json file to hold the recommended extensions for a project.

Make sure you grab these files from this example project for your own project. They are important. For example, the settings.json file has some important settings for ESLint that it needs to function properly.

Key Binding

If there are some key shortcuts you want to change, it's super easy. Go to File > Preferences > Keyboard Shortcuts and then search for the command you want to change. You'll also see a link under the search bar For advanced customizations open and edit keybindings.json. This will open up a .json file for you to add bindings and you'll see a list of defaults open in a tab to your left called "Default Keybindings".

For example, I like to have a more simplified "copy line down" command and use ctrl+d to duplicate a line downwards:

~/.config/Code/User/keybindings.json

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+d",
        "command": "editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    }
]

Searching Node Modules

In settings.json you'll notice this:

// When you hit ctrl+e to search, you don't want node_modules to be included.
"search.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/tmp": true
}

However, sometimes you need to jump to a package in your node_modules folder or search for a file there. You can do this with another extension: Search Node Modules. This has already been added to the recommended extensions file extensions.json as mentioned earlier. After you have it installed, to use it simple hit ctrl+shift+p then type to search for the package "search node_modules" and hit enter (or use the default shortcut of ctrl+n followed by ctrl+k). The first search is for the package name and then after that another box appears to search for any files/folders within.