<?xml version="1.0" encoding="utf-8"?>
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
/*
:Author: David Goodger (
goodger@python.org)
:Id: $Id: html4css1.css 9511 2024-01-13 09:50:07Z milde $
:Copyright: This stylesheet has been placed in the public domain.
Default cascading style sheet for the HTML output of Docutils.
Despite the name, some widely supported CSS2 features are used.
See
https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
customize this style sheet.
*/
/* used to remove borders from tables and images */
.borderless, table.borderless td, table.borderless th {
border: 0 }
table.borderless td, table.borderless th {
/* Override padding for "table.docutils td" with "! important".
The right padding separates the table cells. */
padding: 0 0.5em 0 0 ! important }
.first {
/* Override more specific margin styles with "! important". */
margin-top: 0 ! important }
.last, .with-subtitle {
margin-bottom: 0 ! important }
.hidden {
display: none }
.subscript {
vertical-align: sub;
font-size: smaller }
.superscript {
vertical-align: super;
font-size: smaller }
a.toc-backref {
text-decoration: none ;
color: black }
blockquote.epigraph {
margin: 2em 5em ; }
dl.docutils dd {
margin-bottom: 0.5em }
object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
overflow: hidden;
}
/* Uncomment (and remove this text!) to get bold-faced definition list terms
dl.docutils dt {
font-weight: bold }
*/
div.abstract {
margin: 2em 5em }
div.abstract p.topic-title {
font-weight: bold ;
text-align: center }
div.admonition, div.attention, div.caution, div.danger, div.error,
div.hint, div.important, div.note, div.tip, div.warning {
margin: 2em ;
border: medium outset ;
padding: 1em }
div.admonition p.admonition-title, div.hint p.admonition-title,
div.important p.admonition-title, div.note p.admonition-title,
div.tip p.admonition-title {
font-weight: bold ;
font-family: sans-serif }
div.attention p.admonition-title, div.caution p.admonition-title,
div.danger p.admonition-title, div.error p.admonition-title,
div.warning p.admonition-title, .code .error {
color: red ;
font-weight: bold ;
font-family: sans-serif }
/* Uncomment (and remove this text!) to get reduced vertical space in
compound paragraphs.
div.compound .compound-first, div.compound .compound-middle {
margin-bottom: 0.5em }
div.compound .compound-last, div.compound .compound-middle {
margin-top: 0.5em }
*/
div.dedication {
margin: 2em 5em ;
text-align: center ;
font-style: italic }
div.dedication p.topic-title {
font-weight: bold ;
font-style: normal }
div.figure {
margin-left: 2em ;
margin-right: 2em }
div.footer, div.header {
clear: both;
font-size: smaller }
div.line-block {
display: block ;
margin-top: 1em ;
margin-bottom: 1em }
div.line-block div.line-block {
margin-top: 0 ;
margin-bottom: 0 ;
margin-left: 1.5em }
div.sidebar {
margin: 0 0 0.5em 1em ;
border: medium outset ;
padding: 1em ;
background-color: #ffffee ;
width: 40% ;
float: right ;
clear: right }
div.sidebar p.rubric {
font-family: sans-serif ;
font-size: medium }
div.system-messages {
margin: 5em }
div.system-messages h1 {
color: red }
div.system-message {
border: medium outset ;
padding: 1em }
div.system-message p.system-message-title {
color: red ;
font-weight: bold }
div.topic {
margin: 2em }
h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
margin-top: 0.4em }
h1.title {
text-align: center }
h2.subtitle {
text-align: center }
hr.docutils {
width: 75% }
img.align-left, .figure.align-left, object.align-left, table.align-left {
clear: left ;
float: left ;
margin-right: 1em }
img.align-right, .figure.align-right, object.align-right, table.align-right {
clear: right ;
float: right ;
margin-left: 1em }
img.align-center, .figure.align-center, object.align-center {
display: block;
margin-left: auto;
margin-right: auto;
}
table.align-center {
margin-left: auto;
margin-right: auto;
}
.align-left {
text-align: left }
.align-center {
clear: both ;
text-align: center }
.align-right {
text-align: right }
/* reset inner alignment in figures */
div.align-right {
text-align: inherit }
/* div.align-center * { */
/* text-align: left } */
.align-top {
vertical-align: top }
.align-middle {
vertical-align: middle }
.align-bottom {
vertical-align: bottom }
ol.simple, ul.simple {
margin-bottom: 1em }
ol.arabic {
list-style: decimal }
ol.loweralpha {
list-style: lower-alpha }
ol.upperalpha {
list-style: upper-alpha }
ol.lowerroman {
list-style: lower-roman }
ol.upperroman {
list-style: upper-roman }
p.attribution {
text-align: right ;
margin-left: 50% }
p.caption {
font-style: italic }
p.credits {
font-style: italic ;
font-size: smaller }
p.label {
white-space: nowrap }
p.rubric {
font-weight: bold ;
font-size: larger ;
color: maroon ;
text-align: center }
p.sidebar-title {
font-family: sans-serif ;
font-weight: bold ;
font-size: larger }
p.sidebar-subtitle {
font-family: sans-serif ;
font-weight: bold }
p.topic-title {
font-weight: bold }
pre.address {
margin-bottom: 0 ;
margin-top: 0 ;
font: inherit }
pre.literal-block, pre.doctest-block, pre.math, pre.code {
margin-left: 2em ;
margin-right: 2em }
pre.code .ln { color: gray; } /* line numbers */
pre.code, code { background-color: #eeeeee }
pre.code .comment, code .comment { color: #5C6576 }
pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
pre.code .literal.string, code .literal.string { color: #0C5404 }
pre.code .name.builtin, code .name.builtin { color: #352B84 }
pre.code .deleted, code .deleted { background-color: #DEB0A1}
pre.code .inserted, code .inserted { background-color: #A3D289}
span.classifier {
font-family: sans-serif ;
font-style: oblique }
span.classifier-delimiter {
font-family: sans-serif ;
font-weight: bold }
span.interpreted {
font-family: sans-serif }
span.option {
white-space: nowrap }
span.pre {
white-space: pre }
span.problematic, pre.problematic {
color: red }
span.section-subtitle {
/* font-size relative to parent (h1..h6 element) */
font-size: 80% }
table.citation {
border-left: solid 1px gray;
margin-left: 1px }
table.docinfo {
margin: 2em 4em }
table.docutils {
margin-top: 0.5em ;
margin-bottom: 0.5em }
table.footnote {
border-left: solid 1px black;
margin-left: 1px }
table.docutils td, table.docutils th,
table.docinfo td, table.docinfo th {
padding-left: 0.5em ;
padding-right: 0.5em ;
vertical-align: top }
table.docutils th.field-name, table.docinfo th.docinfo-name {
font-weight: bold ;
text-align: left ;
white-space: nowrap ;
padding-left: 0 }
/* "booktabs" style (no vertical lines) */
table.docutils.booktabs {
border: 0px;
border-top: 2px solid;
border-bottom: 2px solid;
border-collapse: collapse;
}
table.docutils.booktabs * {
border: 0px;
}
table.docutils.booktabs th {
border-bottom: thin solid;
text-align: left;
}
h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
font-size: 100% }
ul.auto-toc {
list-style-type: none }
</style>
</head>
Matrix JavaScript/ECMAScript Style Guide
The intention of this guide is to make Matrix's JavaScript codebase clean,
consistent with other popular JavaScript styles and consistent with the rest of
the Matrix codebase. For reference, the Matrix Python style guide can be found
at https://github.com/matrix-org/synapse/blob/master/docs/code_style.rst
General Style
4 spaces to indent, for consistency with Matrix Python.
Max line width: 79 chars (with flexibility to overflow by a "few chars" if
the overflowing content is not semantically significant and avoids an
explosion of vertical whitespace).
No trailing whitespace at end of lines.
Don't indent empty lines.
One newline at the end of the file.
Unix newlines, never r
Indent similar to our python code: break up long lines at logical boundaries,
more than one argument on a line is OK
Use semicolons, for consistency with node.
UpperCamelCase for class and type names
lowerCamelCase for functions and variables.
Single line ternary operators are fine.
UPPER_CAMEL_CASE for constants
Single quotes for strings, for consistency with most JavaScript styles::
"bad" // Bad
'good' // Good
Use parentheses instead of '\' for line continuation where ever possible
Open braces on the same line (consistent with Node)::
if (x) {
System Message: ERROR/3 (<stdin>, line 33)
Unexpected indentation.
console.log("I am a fish"); // Good
System Message: WARNING/2 (<stdin>, line 34)
Block quote ends without a blank line; unexpected unindent.
}
if (x)
{
System Message: ERROR/3 (<stdin>, line 38)
Unexpected indentation.
console.log("I am a fish"); // Bad
System Message: WARNING/2 (<stdin>, line 39)
Block quote ends without a blank line; unexpected unindent.
}
Spaces after if, for, else etc, no space around the condition::
if (x) {
System Message: ERROR/3 (<stdin>, line 42)
Unexpected indentation.
console.log("I am a fish"); // Good
System Message: WARNING/2 (<stdin>, line 43)
Block quote ends without a blank line; unexpected unindent.
}
- if(x) {
console.log("I am a fish"); // Bad
System Message: WARNING/2 (<stdin>, line 47)
Definition list ends without a blank line; unexpected unindent.
}
- if ( x ) {
console.log("I am a fish"); // Bad
System Message: WARNING/2 (<stdin>, line 51)
Definition list ends without a blank line; unexpected unindent.
}
Declare one variable per var statement (consistent with Node). Unless they
are simple and closely related. If you put the next declaration on a new line,
treat yourself to another var::
var key = "foo",
System Message: ERROR/3 (<stdin>, line 56)
Unexpected indentation.
- comparator = function(x, y) {
return x - y;
System Message: WARNING/2 (<stdin>, line 58)
Definition list ends without a blank line; unexpected unindent.
}; // Bad
var key = "foo";
var comparator = function(x, y) {
System Message: ERROR/3 (<stdin>, line 62)
Unexpected indentation.
return x - y;
System Message: WARNING/2 (<stdin>, line 63)
Block quote ends without a blank line; unexpected unindent.
}; // Good
var x = 0, y = 0; // Fine
var x = 0;
var y = 0; // Also fine
A single line if is fine, all others have braces. This prevents errors when adding to the code.::
if (x) return true; // Fine
- if (x) {
return true; // Also fine
System Message: WARNING/2 (<stdin>, line 74)
Definition list ends without a blank line; unexpected unindent.
}
- if (x)
return true; // Not fine
Terminate all multi-line lists with commas::
var mascots = [
System Message: ERROR/3 (<stdin>, line 80)
Unexpected indentation.
"Patrick",
"Shirley",
"Colin",
"Susan",
"Sir Arthur David" // Bad
System Message: WARNING/2 (<stdin>, line 85)
Block quote ends without a blank line; unexpected unindent.
];
- var mascots = [
"Patrick",
"Shirley",
"Colin",
"Susan",
"Sir Arthur David", // Good
System Message: WARNING/2 (<stdin>, line 93)
Definition list ends without a blank line; unexpected unindent.
];
Use null, undefined etc consistently with node:
Boolean variables and functions should always be either true or false. Don't set it to 0 unless it's supposed to be a number.
When something is intentionally missing or removed, set it to null.
Don't set things to undefined. Reserve that value to mean "not yet set to anything."
Boolean objects are verboten.
Use JSDoc
ECMAScript
Use let for variables and const for constants. This sounds obvious, but it isn't: the ES6 const keyword
could be used for assign-once variables, however this guide advises against doing so on the grounds that it
confuses them with constants.
Be careful migrating files to newer syntax.
- Don't mix require and import in the same file. Either stick to the old style or change them all.
- Likewise, don't mix things like class properties and MyClass.prototype.MY_CONSTANT = 42;
- Be careful mixing arrow functions and regular functions, eg. if one function in a promise chain is an
System Message: ERROR/3 (<stdin>, line 110)
Unexpected indentation.
arrow function, they probably all should be.
Apart from that, newer ES features should be used whenever the author deems them to be appropriate.
Flow annotations are welcome and encouraged.
React
- Use ES6 classes, although bear in mind a lot of code uses createClass.
</html>
