Sonolus Wiki

01. Development Environment Setup

In this chapter, we are going to set up our development environment that will be used throughout rest of this guide.

If you have previous experience with Node.js ecosystem, this should be fairly standard and straightforward.

If you are new, everything might seem overwhelming at first and at times you might need to Google for related information as covering every detail of Node.js ecosystem is out of this guide's scope. However, you do not need deep understanding of things in order to develop with Sonolus.js.

Repository

Repository of the source code used in this guide is available at GitHub.

Each chapter has its own branch and two variants (TypeScript/Javascript, whichever you prefer), it is recommended to navigate to each branch while following along the guide.

Installing/Updating Node.js

First step is to download and install the latest LTS version of Node.js.

To verify you have successfully installed, execute in terminal:

node -v

or

npm -v

If you are able to see their version numbers, then you are good to go.

Initializing Project

Clone the repository to your project folder, navigate into it in your terminal and run:

npm install

The project includes the following packages:

Using TypeScript:

Using JavaScript:

You can also configure ESLint and Prettier via .eslintrc.json and .prettierrc.json, and TypeScript via tsconfig.json.

IDE Setup (VSCode)

This will differ depending on the IDE you are using, and in this guide we will use Visual Studio Code.

We need to install extensions to support ESLint and Prettier (you can skip this if you are not using them).

Additionally, I recommend navigating to File -> Preferences -> Settings, and in either User or Workspace, turning on Editor: Format On Save.

First Code

Create a new file and type our first code:

src/test.ts
console.log(visualize(Multiply(Math.PI, 5, 5)))

// Result:
// Multiply(3.141592653589793, 5, 5)

console.log(visualize(Multiply(Math.PI, 5, 5)))

// Result:
// Multiply(3.141592653589793, 5, 5)

As you type, autocomplete should kick in and by using Tab key on visualize and Multiply, they should be automatically imported; ESLint will come in to lint your code; and as you save the file, Prettier will come in and format your code nicely.

Finally, to make sure everything is working, let's run our code:

npx ts-node ./src/test.ts

node ./src/test.mjs

If it runs and you are able to see the result, then you are all set up and ready to get into developing with Sonolus.js!