development.md

Development

This document contains information for developers who want to contribute to the the project.

Requirements

• Git
• NodeJs (18.16.0 suggested)

Getting started

• Clone the repository from GitHub:

git clone https://github.com/smeup/ketchup.git

• Install the dependencies using yarn:

// From the root of the repository
npm install yarn --global
yarn install

• Compile and minifies Ketchup library for production:

npm run k:build

• Startup Ketchup showcase (with hot reload). It responds at http://localhost:4000

npm run ksc:serve

Other useful commands

• Clean up the project's dependencies:

npm run lerna -- clean

• Start the development environment:

npm run k:start

• Compile Ketchup Showcase for production:

npm run ksc:build

About testing commands see testing.

You can find other commands inside the main package.json and inside the different package.json of the 'packages' folder. If you want that these latters can be executed by Lerna they should be reported inside the main package.json. Otherwise you have to go inside packages specific dirs and run inside them.

Sample of the same command:

npm run k:build

cd packages/ketchup
npm run build

Visual Studio Code IDE

Visual Studio Code is the IDE we suggest to use.

Configure

• Install this extensions:

  • ESLINT
  • Prettier
  • Vetur

• Add this settings in order to format the code when saving:

  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["vue", "html", "javascript", "tipescript"],
  "eslint.run": "onSave",
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

Testing

See testing.

Style guide

See style guide.