Formatting and Indentation

tip

You can also use linter tools like Eslint and/or formatter tools like Prettier and integrate within the Smartface IDE!

When collaborating with different developers, it is important to agree on a specific tab/space size to ease out the Pull Request/Merge Request process. For example:

• Developer A is using 4 Spaces
• Developer B is using 4 Tabs
• Maintainer A is using 4 Spaces, same with Developer A

Whenever Maintainer C makes a change to a file which Developer A has formatted before, the merge process will go smoothly. The maintainer will only see what the changes are made.

However, when Developer B makes a change on any file which Maintainer A or Developer A has formatted before, the review process will contain all of that format changes and review process will be tremendously difficult for the reviewer. Now, Maintainer A will be seeing the entire file as changed due to indentation difference and the real changes might be overlooked.

Therefore, it is important to agree on a specific tab/space size before collaborating on any project.

Since Smartface IDE is based on Theia, you can install Prettier or different formatting extension to accomplish this task. However, using extensions might slow the development process on larger projects, therefore it might be a good idea to existing settings of Smartface IDE.

How to Enforce Specific Indentation

On Smartface IDE, open up the preferences:

Enforce Tabs or Spaces

If this box is checked, your codes will be in spaces. If not, they will be indented by tabs.

Specify the Tab or Space Size

Whether you use tabs or spaces, with this configuration you can change the size.

Just like in any other code editor, when you press tab, the number of spaces will be indented if you set the size.

Automatically Format on Save or Paste

When you are pasting code from somewhere, or bulk editing something, you may want Smartface IDE to automatically format your code when you save or paste.

This will help your development to be easier.

Manually Format the File

You might not fond of formatting the file automatically or there might be times you want to overview your code formatted before saving.

The process is fairly similar with Visual Studio Code.

• For mac: press cmd+shift+p
• For Windows or GNU/Linux based systems, press ctrl+shift+p

info

The shortcut might be different for different operating system your computer is running on. The shortcut code of this action is: workbench.action.showCommands . You can change it through shortcuts.

Type format and you will see the selections. Navigate and select Format Document to format the current file you are in.

This will format your document based on the configuration you made previously.

Notice the > character at the beginning of text ?

Instead of pressing 3 different keys to open commands pane, you can invoke file search shortcut via ctrl+porcmd+pand type > character to switch to command mode.

Configure File Type Specific Indentation

Your project might have different file types due to various reasons, therefore you may want something like this:

• 2 Spaces for Typescript files
• 4 Spaces for Javascript files
• 4 Tabs for JSON files

To accomplish that, you need to manually specify which file types will be configured on preferences JSON view.

Open preferences and click the JSON symbol as shown on the image:

Default configurations or your customized configurations will be shown line by line.

You can specify depending on the need of the project. For the example above, the configuration should look like this:

/projects/.theia/settings.json

{
  //your previous configurations

  "editor.insertSpaces": true,
  "editor.formatOnPaste": true,
  "editor.tabSize": 4,

    "[json]": {
        "editor.insertSpaces": false,
        "editor.tabSize": 4
    },
    "[javascript]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 2
    },
    "[typescript]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 4
    }
}

Notice that global formatting configuration is also there. File specific configurations will always override global formatting configurations.

Use autocompletion(cmd+space for Mac and ctrl+space for GNU/Linux or Windows) with "[ prefix to see other supported filesystems which you can specify rules to.