vscode-dynamic

Visual Studio Code, with a focus on dynamic languages.

Requirements

Visual Studio Code
Node.js / NPM
SQLite3
PHP

Python

Virtual Environment

python3 -m venv 2_python_virt

cd 2_python_virt

source bin/activate

mkdir src

cd src

code .

Then, inside VS Code, create a new file "hello.py", and note the Python interpreter in use in the status line.

Jupyter

In a VS Code project, right-click and create a file with a .ipynb extension. VS Code will automatically create a Jupyter notebook.

Django

python3 -m venv 3_django_test

cd 3_django_test

source bin/activate

code .

Inside VS Code:

[F1], then
Python: Select Interpreter

Select the interpreter in the virtual environment.

[F1], then
Terminal: Create New Terminal

pip install django

Create Django project:

django-admin startproject web_project .

Init SQLite database:

python manage.py migrate

Create an app:

python manage.py startapp hello

Modify hello/views.py as follows:

from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

Create hello/urls.py to set up a route:

from django.urls import path
from hello import views

urlpatterns = [
    path("", views.home, name="home"),
]

Update web_project/urls.py to pull in the 'hello' routing configuration:

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("hello.urls")),
    path('admin/', admin.site.urls)
]

Start the development server:

python manage.py runserver

Open http://127.0.0.1:8000/ in your browser to see the output of the hello view.

JavaScript / Node.js

mkdir node_hello

cd node_hello

code .

In VS Code:

New file...
app.js

Contents:

var msg = 'Hello World';

console.log(msg);

Ways to run:

Open a new terminal and type node app.js, or
Press [F5]. You'll be prompted to use Node.js as your debugger.

Refactor the code to use a function:

function say_hello(name) {
    console.log('Hello, ' + name);
}

say_hello('Jim');

Added a JSDoc comment:

/** This function says hello! */
function say_hello(name) {
    console.log('Hello, ' + name);
}

say_hello('Jim');

When you hover over the call to say_hello, note the documentation text.

Set a breakpoint on the call to say_hello, press [F5], and step into the function to see the msg variable.

TypeScript

mkdir ts_hello

cd ts_hello

npm install typescript --save-dev

code .

In VS Code, create a new file helloworld.ts with the following contents:

let message: string = 'Hello World';

console.log(message);

To compile the TypeScript file, open the integrated terminal and run the TypeScript compiler:

npx tsc helloworld.ts

To control the TypeScript compiler, create a tsconfig.json file with the following contents:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "out"
    }
}

Now you can run npx tsc in the integrated terminal with no additional arguments.

To attach the debugger, add a source map option:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "out",
        "sourceMap": true
    }
}

With the helloworld.ts file open in the editor, you can now use [F5] to run and debug. The first time you run, you'll be prompted for a debugger. Select Node.

Ruby

Ruby LSP configuration is being a pain, so we'll just use Code Runner for this.

Perl

Open a terminal and install Perl::LanguageServer (required by the Perl extension):

sudo apt install libanyevent-perl libclass-refresh-perl libcompiler-lexer-perl \
libdata-dump-perl libio-aio-perl libjson-perl libmoose-perl libpadwalker-perl \
libscalar-list-utils-perl libcoro-perl
 
sudo cpan Perl::LanguageServer

jfcarr / vscode-dynamic