DEV Edition - Code Formatting Best Practice Documentation

[pmario]

As brought up at the discussion from @dongrentianyu

It is suggested, to add some best practice info to the developer edition.

For the core JS code we plan to implement a pretty-printer, which does the formatting automatically.

For the WikiText code the "rules" are more relaxed, since we do have a lot of UI code, that dates back to 2014 or earlier. Where we did not really know, what the requirements would be in 2025. So most of that UI code did grow organically and was written by different contributors. So it is natural, that there are differences.

Also in earlier TW versions it was not possible to have newlines within widget parameters, so it was common to have very long lines. Now we can have line breaks, almost everywhere.

With the TW core we use

• double quotes for strings and parameters.
• triple double quotes if a string does contain a double quote.
• single quotes are an exception, for edge cases, if there is no other way.

Indentation is done using TABs, because we ship the UI and JS source code as plain text. So it needs less memory.
An exception is WikiText, that was generated by users, using the TW editor. Since there is no TAB key / button, we also allow indentation with 2 spaces per level. But if the code is maintained, space are generally replaced with tabs.

So "new style" wikitext code looks like this. eg:

TiddlyWiki5/core/ui/SideBar/Tools.tid

Lines 1 to 27 in e8a7bbf

	title: $:/core/ui/SideBar/Tools
	tags: $:/tags/SideBar
	caption: {{$:/language/SideBar/Tools/Caption}}
	\whitespace trim
	\procedure lingo-base() $:/language/ControlPanel/
	\function config-title() [[$:/config/PageControlButtons/Visibility/$(listItem)$]substitute[]]
	<<lingo Basics/Version/Prompt>> <<version>>
	<$let tv-config-toolbar-icons="yes"
	tv-config-toolbar-text="yes"
	tv-config-toolbar-class=""
	>
	<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageControls]!has[draft.of]]" variable="listItem">
	<div class={{{ [<listItem>encodeuricomponent[]addprefix[tc-btn-]] tc-sidebar-tools-item +[join[ ]] }}}
	data-title=<<listItem>>
	>
	<$checkbox tiddler=<<config-title>> field="text" checked="show" unchecked="hide" default="show" class="tc-tiny-gap-right"/>
	<$transclude $tiddler=<<listItem>>/>
	<i class="tc-tiny-gap-left tc-muted">
	<$transclude $tiddler=<<listItem>> $field="description"/>
	</i>
	</div>
	</$list>
	</$let>

Originally posted by @pmario in #9172 (comment)