Preparing the Development Environment

To develop/compile So Many Numbers, you'll need to prepare a development environment. For reference, here's how I set up mine.

1. Clone or download the so-many-numbers repository.

I recommend cloning the repo by running the following Terminal command:

git clone https://github.com/TimTree/so-many-numbers.git

Alternatively, click the above download link and unzip the files to a good place on your computer.

2. Download and install Node.js/npm (LTS/current doesn't matter).

npm (node package manager) acts as an installer for the tools we use to create the game. Node.js (a runtime for backend apps) comes bundled with npm, which we won't use at this time.

3. Download and install VSCode (or VSCodium).

VSCode is my preferred text editor for its extension system and relative speed compared to the alternatives. You could also use VSCodium, which is VSCode without Microsoft telemetry.

4. In VSCode, open the so-many-numbers folder you downloaded.

You can do this with File -> Open Folder (macOS: File -> Open)

5. Install the following VSCode extensions:

• EditorConfig for VS Code - tells VSCode to follow editing rules defined in a .editorconfig file
• ESLint - Checks if your code follows good JavaScript practices
• Vetur - Enables code highlighting for .vue files
• Vue VSCode Snippets - Automatically writes vue boilerplate code for convenience

Install extensions by clicking the set of blocks on the left sidebar.

6. Go to VSCode's settings (File -> Preferences -> Settings), macOS: (VSCode -> Preferences -> Settings)

7. Type json in the Settings search file, then select Edit in settings.json

8. Copy and paste the following into the settings.json file:

    "eslint.validate": [
        {
          "language": "vue",
          "autoFix": true
        },
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "javascript",
          "autoFix": true
        }
      ],
      "vetur.validation.template": false,

Paste the code within the curly braces and underneath any other setting you may have. Example below:

The ESLint validate settings tell the ESLint extension to check/fix the code on save. We disable vetur validation because ESLint will handle this, and it's better not to have things override each other.

9. Go to the terminal (Terminal -> New Terminal) and run:

npm install

npm install downloads and installs the dev tools we need to the folder node_modules.

10. Also in the terminal, run:

npm run serve

npm run serve compiles the game to your local development server, which you can view by accessing localhost:8080 on your browser.

Each time you save, your browser will automatically reload to reflect code changes.

To build the game for production (which minifies the code for bandwidth savings), run:

npm run build

And there you have it: my development environment. Note that these steps are completely optional, and you're free to create your environment the way you like as long as you have a text editor and npm installed.