# 02. __Tips and tricks__

__Topics__:

- [Shortcuts](#)
- [Hidden features](#)
- [Collaboration](#)
- [REST API testing](#)
- [Test scripts](#)
- [To-Do](#)
- [Bundling](#)
- [Electron version](#)
- [Git, Mercurial or SVN](#)

## Shortcuts

Shortcuts are very important part of Total.js Code editor. You need to remember few shortcuts only (around 8).

- `F1` shows important commands
- `F2` shows parts
- `F3` shows database of UI components
- `F5` reloads the file again from server
- `F6` shows Font-Awesome icons
- `F8` shows projects
- `F9` shows internal chat (+v1.4)
- `F10` shows real-time logs
- `F11` shows cross-project clipboard
- `CMD+F` or `CTRL+F` focuses search dialog
- `CMD+S` or `CTRL+S` saves the content of the file

#### Go-To-Line

Press `F1` and enter `:LINE_NUMBER` or `:LINE_NUMBER:CHAR_INDEX`

## Hidden features

#### Inline templates

Inline templates are defined for specific files like `.html`, `.json`, `.js` or `.api`. Just create or open file and show the context menu:

![Inline templates](/download/B20191031T000000022.png)

#### Make Total.js Schema from SQL script

Paste SQL script with `CREATE TABLE` and click on the `Transform SQL to schema` via context menu.

![SQL to schema](/download/B20191031T000000019.gif)

#### Transform HEX to RGBA in CSS

Select HEX color in your CSS file and click on the `Convert to RGBA` via context menu.

![HEX to RGBA](/download/B20191031T000000020.png)

#### Existing parts

Press `F2` and you can show existing parts. Total.js Code editor divides parts into two categories. So the parts show only parts according to the file (whether the file is server-side or client-side).

- server-side (Schemas, Operations, Tasks, FUNC)
- client-side (UI components, Plugins and FUNC)

#### Translate entire application

Coming soon.

#### Copy formatted source-code

Select code and click on the `Copy with syntax` or `Copy as Markdown` in the context menu.

![Syntax](/download/B20191031T000000021.png)

## REST API testing

Coming soon.

## Test scripts

Coming soon.

## To-Do

Total.js Code editor parses `@TODO: text of the task` phrase automatically when the file is saving. You can browse all task, just click on the second right corner icon:

![Tasks](/download/B20191031T000000024.png)

## Bundling

Each project must have enabled bundles in the project settings. This option will enable making of bundle directly in the project:

![Bundles](/download/B20191031T000000023.png)

## Electron version

You can define multiple servers with Total.js Code editor and usage is very helpful. Electron version offers work with local files and it has improved shortcuts. Electron version is primary targeted for source-code versioning. [Read more](#git-mercurial-or-svn).

- [Code for MacOS](https://www.dropbox.com/s/6t0fhe08y0bmsgp/code-mac.zip)
- [Code for Windows](https://www.dropbox.com/s/8tabjyqy8zpudep/code-windows.zip)

__Welcome screen example__:

![Code Electron version](/download/B20190930T000000018.png)

## Git, Mercurial or SVN

Total.js Code doesn't support direct communication with the source-version system. But we have a solution for it. Electron version supports synchronization of file from server-side to your local machine and automatically it saves the file locally after you save the file.

- you need to [download Electron version](@19081522570001ohr1)
- and you need to choose a synchronized folder
- then the Electron version will store the file 

#### Settings for storing files locally

Code Editor settings in the Electron:

![Electron settings](/download/B20191031T000000025.png)

Project settings:

![Project](/download/B20191031T000000026.png)

Then Total.js Code editor will synchronize all files which you will change and you will be able to store all changes in your source-version system.