VSCode - Editor

Installation

To install VSCode with LiaScript follow the steps from the following Blog-post.

Install Visual Studio Code with LiaScript

Due to some problems with package updates for Atom editor, we decided to created two LiaScript extensions for VSCode.

Usage

After finishing the installation, you can use Alt + L to start the development server in preview mode for your working directory directly from VSCode. This will open a new browser window with the preview of your course. Whenever you save a file, the preview will be updated automatically.

preview.gif

Features

Currently there are 5 different options, which you can either activate by Ctrl + Shift + P and then type “liascript” or you use one of the following short-cuts:

  • Start the development server in live mode: Alt + L - on Mac Cmd + L

    This option will start the server in the current directory and watch for changes. Every time a file is changed and saved, the preview will be reloaded automatically. If no file has been selected previously, then you will be presented with a folder overview, where you can open different files.

  • Start the development server: Alt + Shift + L - on Mac Cmd + Shift + L

    If automatically reloading might be annoying, you can use this option. It will only start the development and you will have to perform a reload of the course manually within the browser.

  • Start the development server and test your course on the project-website:

    Text to speech is not enabled at the moment, but if you want to test your course on the LiaScript project-website this option can be used.

  • Stop the development server: Alt + L + C - on Mac Cmd + L + C

    Once the server has been started, it will remain active until you close VScode or by using this command.

  • Navigation:

    • from Preview to file: Simply by double-clicking onto an element on the slide
    • from cursor position to Preview: Ctrl + mouse-click> … which means, simply press control and click with the mouse onto the position in the editor, which you want see at the preview