Logo

渕野 裕

Fuchino Yutaka

Teaching / Introduction to jsPsych / Set up VS Code

日本語

Set up VS Code Installation and initial setup

Prepare Visual Studio Code (VS Code) to edit HTML and jsPsych files. Follow these steps to install it, open the course materials, and configure useful extensions.

STEP 0 · folder structure

Understand the course folder structure

After extracting the course ZIP, keep the jspsych folder and its contents together. In VS Code, open the whole jspsych folder—not an individual HTML file or the parent website folder.

jspsych/
├── index.html
├── vscode.html
├── hello-world.html
├── fixation.html
├── image.html
├── audio.html
├── video.html
├── gonogo.html
├── sample-hello-world.html
├── sample-fixation.html
├── sample-image.html
├── sample-audio.html
├── sample-video.html
├── sample-gonogo.html
├── dist/
│   └── jsPsych and plugin files
├── media/
│   └── image, audio, and video files
└── en/
    └── English lesson pages

To open the course in VS Code, choose File → Open Folder (on macOS, File → Open… may be shown), select the extracted jspsych folder, and choose Select Folder or Open. The Explorer on the left should show the lesson HTML files, dist, and media together.

If VS Code asks whether you trust the authors of the files, make sure you are opening the course materials you received, then select Trust. You can open index.html in a browser to read the lessons; internet access is only needed for external links and downloads.

STEP 1 · install

Download and install VS Code

Open the official VS Code download page ↗

macOS

  1. Download the macOS version from the official page.
  2. Open the downloaded .dmg file.
  3. Drag Visual Studio Code.app into the Applications folder.
  4. Launch VS Code from Applications. Choose Apple silicon for Macs with an Apple M-series chip, Intel for older Intel-based Macs, or Universal if you are unsure.

macOS Catalina 10.15: The current VS Code release does not support Catalina; VS Code 1.97 was the last supported release. If possible, update macOS before installing the latest VS Code. See the official release notes ↗.

Windows

  1. Download the User Installer for Windows from the official page.
  2. Run the downloaded .exe file.
  3. Follow the installer instructions, then launch VS Code.
STEP 2 · open folder

Open the course folder

  1. Extract the course ZIP. Do not edit files while they are still inside the ZIP archive.
  2. In VS Code, choose File → Open Folder.
  3. Select the extracted jspsych folder itself.
  4. Confirm that the Explorer shows dist, media, the lesson pages, and the sample-*.html files together.

If VS Code asks whether you trust the folder, verify that it is the course material and then choose Trust.

STEP 3 · display language

Change the VS Code display language

You can use the VS Code menus in Japanese or another language you prefer. A display-language pack changes the VS Code interface; it does not change the language of your code or this course.

  1. Select the square-shaped Extensions icon in the Activity Bar on the left, or open the Extensions view with Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS).
  2. Search for Japanese Language Pack and select Japanese Language Pack for Visual Studio Code. Check that the publisher is Microsoft and the extension ID is MS-CEINTL.vscode-language-pack-ja, then select Install.
  3. To use a different language, search the Marketplace for that language's official VS Code Language Pack. Check the publisher and extension details before installing it.
  4. Open the Command Palette with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS). Run Configure Display Language, choose the language you want, and restart VS Code when prompted.
  5. To return to English, run Configure Display Language again and select en.

Japanese Language Pack on the official Marketplace ↗

STEP 4 · extensions

Recommended extensions

Extensions add features to VS Code. They are optional, but the following tools can make it easier to preview pages, understand code structure, and work with more than one project. Open the Extensions view, search by the exact name or ID below, and check the publisher before installing. The extension links open the Marketplace in a new tab.

  1. Live Server

    ritwickdey.LiveServer · Publisher: Ritwick Dey

    Starts a small local web server for the selected HTML page and refreshes the browser when you save changes. In the Explorer, right-click an HTML file and select Open with Live Server. This is especially useful for jsPsych examples with audio, video, or preloaded files, which may not work correctly when opened directly with file://.

    View Live Server in the Marketplace ↗

  2. indent-rainbow

    oderwat.indent-rainbow · Publisher: oderwat

    Shows different background colors for each indentation level. This makes nested HTML elements and JavaScript blocks easier to follow, and can help you spot a line that is indented inconsistently. After installation, the colors appear in the editor automatically.

    View indent-rainbow in the Marketplace ↗

  3. Project Manager

    alefragnani.project-manager · Publisher: Alessandro Fragnani

    Saves folders as named projects and makes it easier to switch between them. It is not necessary for this course, which uses one course folder, but can be useful later when you work with several experiment or research folders.

    View Project Manager in the Marketplace ↗

  4. Print

    pdconsec.vscode-print · Publisher: PD Consulting

    Adds a way to print source code. It can be useful when you want a paper copy of an HTML or JavaScript file for review or class discussion. Check the print preview before printing to make sure long lines and page breaks are readable.

    View Print in the Marketplace ↗

Install only the extensions you need. The course examples do not require Project Manager or Print, and HTML files can be viewed without Live Server; Live Server is recommended for running the jsPsych examples.

STEP 5 · run

Open the Hello World example

  1. In the Explorer on the left, select sample-hello-world.html directly under the jspsych folder. Do not select a sample file from inside en; the shared sample files are kept beside dist and media.
  2. Right-click the file and choose Open with Live Server. If you did not install Live Server, open the HTML file in a browser instead.
  3. The browser should show “はじめてのHTML / My first HTML page” and “Hello World!”.
  4. Change a line of text in VS Code, save the file, and confirm that the browser preview updates.

Open the shared Hello World sample ↗

Back to the course contents ↑