Development tools
First you'll need to see if you have the needed tools installed.
- Open a command line/terminal
- Enter
node -v - Enter
yarn -v - Enter
gulp -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 requires Node, follow the install guide
- To install Gulp: Follow the gulp-cli install guide
Development environment
We have a recommended development environment for new developers:
- Setup a GitHub.com account
- Install the GitHub Desktop git client
- 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 linting: ESLint
- Get code highlight for
.njkfiles: Nunjucks syntax definition - Get autocompletion for your CSS tags: HTML CSS Support
- Standardised editor configuration: EditorConfig
Problems?
See the troubleshooting guide.
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:
- Clone
vf-coregit clone https://github.com/visual-framework/vf-core.git
- Move to the directory
cd vf-core
- You probably want the develop branch (or your new feature branch)
git checkout develop
- Go into the Visual Framework main project
cd tools/vf-core
- Download all the things
yarn install
- Run a dev build and open in your browser
gulp vf-dev
Developing on Windows?
The Visual Framework is primarily 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