Bash, Python, Javascript, code command, etc. in Visual Studio Code on Mac

If you just want to write an Atom? Sublime? Script, you can just put Linux in VirtualBox and install Vim, and that's fine.

I was thinking about it until a while ago, but I changed my mind by touching Visual Studio Code, so I made a note.

It's only the first day since I started touching it, so I think there are many mistakes and inefficiencies. If you notice anything, please point it out.

2017/12/04 Addendum: I ended up returning to Vim (NeoVim) because I have a lot of work with CUI.

Settings for debugging Bash

Install an extension called Bash Debug created by a person named rogalmic.

Bash Debug: https://marketplace.visualstudio.com/items?itemName=rogalmic.bash-debug

First, make sure you have all the commands you need to use Bash Debug. If you can't find it, install it as brew.

$ which {cat,mkfifo,rm,pkill,bashdb}
-----
/bin/cat
/usr/bin/mkfifo
/bin/rm
/usr/bin/pkill
/usr/local/bin/bashdb
-----

After installing Bash Debug, create a script that works with Bash, and open it with an editor, it will look like the following.

$ cat vce_hoge/hello.sh 
-----
hoge="HELLO"
echo "$hoge"
-----

When you press F5, you will be asked what to do as shown below, so choose Bash Debug.

Then I was asked how to decide the path of the script, but I have not investigated the specific difference and I have no idea, so I chose 1.Script path should be selected and so on. ..

This will create a configuration file with a directory called .vscode and an execution environment called launch.json (see the cat result below).

$ cat vce_hoge/.vscode/launch.json 
-----
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Bash-Debug (select script from list of sh files)",
            "type": "bashdb",
            "request": "launch",
            "scriptPath": "${command.SelectScriptName}",
            "commandLineArguments": "",
            "windows": {
                "bashPath": "C:\\Windows\\sysnative\\bash.exe"
            },
            "linux": {
                "bashPath": "bash"
            },
            "osx": {
                "bashPath": "bash"
            }
        }
    ]
}
-----

After the above file is created, return to the editor and press F5 to display the list of scripts in the current folder in the Explorer drop-down list. Select the script you want to execute (debug).

Then you can debug as shown in the figure below.

Settings for debugging Javascript

Next to Bash is Javascript.

First, make sure you have Node.js installed. If it is not installed, it will be brew (same as above)

$ which node
-----
/usr/local/bin/node
-----

VSCode comes with a built-in Javascript debugger called Node Debug 2, so I wonder if it's necessary to install the extension for the time being.

Before making various settings, I first created a file called hello.js.

After creating the file, open the debug console and add the configuration to run Javascript.

Select "Start Program".

Since the setting is added to launch.json, modify the value of "program" as appropriate, add "protocol", and then save it. Learn more about debugging protocols: https://code.visualstudio.com/docs/editor/node-debugging

Open the debug console and select which configuration you want to debug.

After selecting the configuration, press F5 and you will be able to debug as shown below.

Python

Install an extension called Python created by a person named Don Jayamanne. https://marketplace.visualstudio.com/items?itemName=donjayamanne.python

Of course, a Python execution environment is required, so it's brew (same as above)

The procedure is the same as Javascript. Select "Python" in Add Configuration and save launch.json.

You can debug by opening the debug console, selecting Python from the configuration and pressing F5.

Extensions that seem to be useful

Code Runner This is an extension that allows you to execute only a specific part selected by dragging the source code.

Code Runner: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

• The above gif animation is also quoted from here.

About the code command

A little bit about the VSCode command line-the espresso3389 diary

http://espresso3389.hatenablog.com/entry/vscodeac2016-8

This article was very helpful to get an overview of what you can do with the code command.

To use the code command on Mac

On Mac, the path of the code command executable file is

/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code

(If placed in the Application directory). Even if I add the above directory to my PATH, it doesn't work straightforwardly, so I registered an alias like the one below in .bashrc.

alias code="/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code"

$ code --help
------
Visual Studio Code 1.10.2

Usage: code [options] [paths...]

Options:
  -d, --diff                  Open a diff editor. Requires to pass two file paths as arguments.
  -g, --goto                  Open the file at path at the line and character (add :line[:character] to path).
  --locale <locale>           The locale to use (e.g. en-US or zh-TW).
  -n, --new-window            Force a new instance of Code.
  -p, --performance           Start with the 'Developer: Startup Performance' command enabled.
  -r, --reuse-window          Force opening a file or folder in the last active window.
  --user-data-dir <dir>       Specifies the directory that user data is kept in, useful when running as root.
  --verbose                   Print verbose output (implies --wait).
  -w, --wait                  Wait for the window to be closed before returning.
  --extensions-dir <dir>      Set the root path for extensions.
  --list-extensions           List the installed extensions.
  --show-versions             Show versions of installed extensions, when using --list-extension.
  --install-extension <ext>   Installs an extension.
  --uninstall-extension <ext> Uninstalls an extension.
  --disable-extensions        Disable all installed extensions.
  --disable-gpu               Disable GPU hardware acceleration.
  -v, --version               Print version.
  -h, --help                  Print usage.
-----

Of course you can also use the diff option.

$ cat hoge.txt 
-----
hoge
-----

$ cat hoge2.txt 
-----
hoge2
-----

$ code -d hoge.txt hoge2.txt
-----
See image below
-----

Contents of the code command

$ cat /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code 
-----
#!/usr/bin/env bash
#
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See License.txt in the project root for license information.

function realpath() { /usr/bin/python -c "import os,sys; print os.path.realpath(sys.argv[1])" "$0"; }
CONTENTS="$(dirname "$(dirname "$(dirname "$(dirname "$(realpath "$0")")")")")"
ELECTRON="$CONTENTS/MacOS/Electron"
CLI="$CONTENTS/Resources/app/out/cli.js"
ELECTRON_RUN_AS_NODE=1 "$ELECTRON" "$CLI" "$@"
-----

Somehow, I feel like I can guess it, but I haven't seen it now ...

Shortcut key

https://code.visualstudio.com/docs/customization/keybindings

On a Mac, F11 etc. conflict with the standard functions of the OS, so it may be better to remap.