Getting started

Development tools

First, see if you have the needed tools installed.

1. Open a command line/terminal
   • how? Mac, Linux/Ubuntu, Windows 10, VS Code integrated terminal
2. Enter node -v
3. Enter yarn -v

If any of those steps return an error you need to install the corresponding software.

• To install Node: go to the official downloads page
• To install Yarn: Yarn require Node, follow the install guide

Development environment

We have a recommended development environment for new developers:

1. Setup a GitHub.com account
2. Install the GitHub Desktop git client
3. For editing code, install Visual Studio Code
   We also recommended some extensions to improve you editing experience and speed:
   • Tidy up your code: Beautify
   • Fix spelling in your HTML, CSS and JS: Code Spell Checker
   • JS liniting: ESLint
   • Get code highlight for .njk files: Nunjucks syntax definition
   • Get autocompletion for your CSS tags: HTML CSS Support
   • Standardised editor configuration: EditorConfig

Developing the VF Core

You only need to clone vf-core if you wish to make a pull request to create, amend or delete core components, or modify the way Sass, JS or other assets are compiled.

Here's how:

1. Clone vf-core
   • git clone https://github.com/visual-framework/vf-core.git
2. Move to the directory
   • cd vf-core
3. You probably want the develop branch (or your new feature branch)
   • git checkout develop
4. Go into the Visual Framework main project
   • cd tools/vf-core
5. Download all the things
   • yarn install
6. Run a dev build and open in your browser
   • gulp vf-dev

Developing on Windows?

The Visual Framework is primairly developed on Mac and Linux environments, but it is also intended to be Windows 10 compatible.

• We test and support Windows 10 using scoop

• We don't test using Windows Subsytem for Linux, thought it should work fine or better than native Windows

• Windows users will also want to consult the troubleshooting on Windows