VS Code

Installation

You can get Visual Studio Code from his official site. Once downloaded, drag and drop the application file into your Applications folder.

Instead of downloading and installing VSCode manually, you can use Homebrew brew cask install visual-studio-code

Installation of useful extensions

Enable the VSCode CLI opening VSCode and click CMD + Shift + P to open the command tool and type: Install command

Now open a terminal window and type:

code --install-extension EditorConfig.EditorConfig
code --install-extension codezombiech.gitignore
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension steoates.autoimport
code --install-extension wix.vscode-import-cost
code --install-extension robertohuertasm.vscode-icons
code --install-extension dustinsanders.an-old-hope-theme-vscode

Installation of a Font

We are following the article Multiple Fonts: Alternative to Operator Mono in VSCode

1. Download and install both FiraCode and FlottFlott (or another cursive alternative if you want)

2. Install VSCode Extension: Custom CSS and JS Loader

3. Save styles.css on your desktop

4. Update the User settings (settings.json) in VSCode. (note: don’t forget to change the path “ vscode_custom_css.imports”)

// Place your settings in this file to overwrite the default settings
{
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "vscode_custom_css.imports": ["file:///Users/daton/Desktop/styles.css"]
}

Replace your User from the path of custom css import.

The result should look like this.

Debug Front-end Application with Chrome Debugging for VS Code

Chrome Debugger allows front-end developers to debug their client-side JavaScript code running inside Google Chrome directly from Visual Studio Code.

To get started

To get started, open the Extensions view (⇧⌘X). When the extension list appears, type 'chrome' to filter the list and install the Debugger for Chrome extension. You'll then create a launch-configuration file which is explained in detail in the README right here.

You can either setup VS Code to connect to an already running Chrome instance or simply start a new one with remote debugging enabled, but read more about that in our README.

Supported features

Support for the following features:

• Setting breakpoints, including within source files when source maps are enabled

• TypeScript, via source maps

• Stepping, including using the buttons on the Chrome page

• Locals scope variables via the VS Code Locals pane

• Debugging eval scripts, script tags, and scripts that are added dynamically

• Watches via the VS Code Watch panel.

• The debug console

• Most console APIs

Configuration

Press Cmd + Shift + P to open the VS Code command prompt and type launch and Open launch.json and then select Chrome environment:

If your Front-end application run on port 3000 you can use the following configuration:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
       {
           "type": "chrome",
           "request": "launch",
           "name": "Launch Chrome against Localhost on port 3000",
           "url": "http://localhost:3000",
           "webRoot": "${workspaceFolder}/client/src"
       }
}

Set the webRoot folder with the proper path.

Executing the Debugger

Create a Breakpoint in you source code.

Press Cmd + Shift + D to open the Debug Sidenav. On the top left of VS Code we'll find the Play Button with Launch Chrome against Localhost...

A new Chrome window with debugger mode enabled will appear on our screen.

https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code?WT.mc_id=vscodecandothat-dotcom-teamcode.visualstudio.com

Troubleshootings

If you notice that your system is not able to watch file changes in a large workspace, check this out:

https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospccode.visualstudio.com

More resources

VS Code Can Do That?