by John Vincent

Posted on May 26, 2018

Visual Studio Code for Mac is an integrated development environment (IDE) and the main focus with this version is it is clearly leaning towards being lightweight. Visual Studio Code launches in a matter of seconds, and the auto-complete function is fast. Connect VS code with TFS on mac. Ask Question. Up vote 12 down vote favorite. How to connect Visual Studio Code on mac with Team Foundation Server(TFS). Or any other way to connect with tfs? Macos tfs visual-studio-code. Visual studio for MAC IDE doesn't have TFS integration yet from Microsoft. Visual Studio Code keyboard Shortcuts helps developers maximize their productivity by allowing them to work faster and more efficiently. Here I am listing down all the keyboard shortcuts and cheats of Visual Studio Code editor for Windows, Mac and Linux Operating systems.

Including configuration of ESLint, AirBnb, React, Express, Webpack and Prettier

There are also notes regarding debugging Express, Mocha and Webpack and Fixing ESLint errors.

Downloaded for Mac and installed.

Command Line

Preferences

For Mac, preferences file is

/Users/jv/Library/Application Support/Code/User/settings.json

which is currently

The workspace settings file is located in your project at

.vscode/settings.json

Basic Commands

show all command: shift+command+p
go to file: command p
find in files: shift command f
start debugging: f5
toggle terminal: ^`
reformat code: Shift Option F
Help
- command p
  - ?
List commands
- command p
  - ?
  - >
Find a symbol
- command p
  - ?
  - #

Extensions

To install an extension

View
Extensions
Search for the plugin
- Install

Installed the following:

Bookmarks
Debugger for Chrome
ESLint Plugin
gitignore
Guides
Import Cost
JavaScript ES6 Snippets
jQuery code snippets
Moche Latte
Npm (egamma)
Npm intellisense
Open in Browser
Path IntelliSense - Autocompletes filenames in your code.
Prettier - Code formatter
PrintCode
REST Client
Search node_modules - Quickly search for node modules in your project.
To Do Tasks

To Print Code

View
Command Palette
PrintCode

File is converted to Html and is shown in a browser from which it can be printed.

ESLint

To find eslint package, see npm search

I have chosen to use airbnb eslint. Ref for details

Configure a project

I have chosen to configure ESlint on a per project basis.

Add to package.json, notice the versions:

If using Prettier, also add:

get packages

Re-open the workspace.

Base Node ESLint Configuration

Create .eslintrc.json

Base React ESLint Configuration

Create .eslintrc.json in client

Base Express ESLint Configuration

Create .eslintrc.json in server

Notice the extends clause.

Base Browser ESLint Confiruation

Create .eslintrc.json

Notice the jquery clause

Configuring ESLint

ESLint User Guide is an excellent source. There are a vast number of options, too many to discuss here.

Useful Eslint commands

Add to package.json scripts

You can also download. • Include plugins for improving functionalities. Download fl studio 12 for mac. File Information • Name: FL Studio Producer Edition 12 • File Size: 903.38 MB • After Extract: 1123.45 MB • Publisher: • File Type: DMG File • Release Date: 28th Jun 2016 • Languages: English System Requirements For FL Studio Producer Edition 12 for Mac • Intel, 64-bit processor.

Eslint Versions

will list the latest peer dependencies. Useful for checking which package versions to include.

Eslint / Prettier Configuration Check

checks your eslint configuration looking for inconsistencies between your eslint and prettier configurations. Useful if you are having difficulties with Prettier.

Eslint Your Code

performs eslint on all code in src and its subfolders. All messages are written to stdout. Useful for viewing all eslint problems in one place.

Note that folders may be ignored using .eslintignore

For example

Removing ESLint errors

Switching directly to airbnb eslint, for one project, created far too many errors.

Thus, for this project, I chose to configure two linters

UI code
Node code

.eslintrc.json in project root

root/public/js/.eslintrc.json

This removes all errors from the workspace.

Fixing ESLint errors

Now I have time to remove the rules one-by-one, cleaning the code in an orderly manner.

In Code Rules

Inline Code Rules

Disable all occurrences within file

Maximum length, set to 150 characters

Configuring Prettier Plugin

To change a Visual Studio Code preferences for all workspaces, edit preferences file.

For Mac, preferences file is

/Users/jv/Library/Application Support/Code/User/settings.json

If only wish to make the change for a workspace, change the workspace settings file which is located in your project at

.vscode/settings.json

Add Format on Save

Edit .eslintrc.json

Beware of max-len. The following will break Prettier

Use the following code instead:

or, better yet

Restart Visual Studio Code to enable the changes.

Prettier Plugin to Ignore Code

To ignore a piece of code, precede the code with

To exclude files from formatting, add entries to the .prettierignore file in the project root.

Prettier, Quotes or Double Quotes

By default, Prettier uses double quotes.

To override and use single quotes, create file .prettierrc in root folder and enter:

or false for double quotes.

Debugger

Set conditional breakpoint

Right click the breakpoint
Enter the condition

Debugging Node Application

For simple usage:

Select .js file
F5 to start the debugger.

To add a configuration:

Debug icon (left nav)
Gear icon (top of debug view)

Which creates a default launch.json

Use Add Configuration if necessary to get to the following

Debugging Express Application

Debug icon (left nav)
Gear icon (top of debug view)

Which creates a default launch.json

Use Add Configuration if necessary to get to the following

Open file to debugged and set a breakpoint.
F5 to start debugging app

Mocha

Install extensions

To run tests: Visual studio for mac execution failed.

Command Palette (Shift+CMD+P)
Mocha: Run all tests

Debugging Mocha

Debug icon (left nav)
Gear icon (top of debug view)
Which edits launch.json

Add the following configuration

Debug view (top nav)
Set a breakpoint.
Select ‘Run Mocha’
Click on the green arrow icon to start debugging.

Debugging Webpack

Debug icon (left nav)
Gear icon (top of debug view)

Which creates a default launch.json

For this example:

${workspaceRoot} is VSCode root directory
webpack/play-4 is the root directory of the project code.

Use Add Configuration if necessary to get to the following

Open webpack.config.js and set a breakpoint.
F5 to start debugging app

Debugging Mocha / Webpack

Debug icon (left nav)
Gear icon (top of debug view)

Which creates a default launch.json

Visual Code Studio For Mac