ES Code Style

es-code-style.md

Code Style

Use Airbnb Code Style as Basic rules. This document only override some given rules.

TODO:

• Make it as shareable cards (Twitter, FB, LinkedIn, VK)
• Explain the reasons
• Allow to discuss for every rule

Do not mix Conditional Operator

Bad

const targetURI = resourceID + '?' + (typeof query === 'string') ? query : stringify(query)

Why? The example above produces an object. ;) Because all this part will be interpreted as a condition: resourceID + '?' + (typeof query === 'string').

Good

const queryString = (typeof query === 'string') ? query : stringify(query)
const targetURI = resourceID + '?' + queryString

Avoid to use Lodash

Just do it.

Only useful comments

Bad

/**
 * Load hosts list
 */
export function loadHosts(result) {
  hosts = result
}

Good

// $FlowIssue: Flow isn't recognizing that `filter(x => !!x)` returns a list
// of non-null values.
children.forEach(child => {
  if (child) {
    nextChildren.push(child);
  }
});
if (!root.isAbstract()) {
  // No need to wrap child nodes of a known concrete type.
  return nextChildren;
}
// https://github.com/facebook/relay/blob/80e91364f6be6a5ae4e9122383a1d8eaa5918236/src/query/RelayQueryPath.js#L211

Use star symbol in comments only for JSDoc3 signatures

Bad

/* Patch redis lib for enable features: promises remove keys */
 Promise.promisifyAll(redis.RedisClient.prototype);

Good

// Wrap callback-based method to Promise-based
Promise.promisifyAll(redis.RedisClient.prototype);

Write abbreviations in upper case

Bad

const url = getFormatedUrl(value)

Good

const URL = getFormatedURL(value)

The same rules for eveything - documentation, notes, git commits, etc.

Don't use short names

Bad

const ref1 = fetch('/api/books')

Good

const reference1 = fetch('/api/books')

Fetch and combinate seperation

Bad

const targetURL = `${getHost()}/search/?query=${query}`

Good

const targetHost = getHost()
const targetURL = `${targetHost}/search/?query=${query}`

Don't use excess else for return

Bad

if (rows) {
  return rows[0]
} else {
  return false
}

Good

if (rows) {
  return rows[0]
}
return false

Don't use excess empty line

Bad

const config = loadConfig()

if (config) {
  applyConfig(config)
}

Good

const config = loadConfig()
if (config) {
  applyConfig(config)
}

Use dot syntax only for internal objects

Seperate JSON data objects and internal runtime objects.

Bad

fetch('/api/users')
  .then(response => response.json())
  .then(json => {
    if (!json.errors) {
      json.data.users.forEach(user => {
        const { id, name } = user
        if (users[id].name !== name) {
          setUserName(id, name)
        }
      })
    }
  })

Good

fetch('/api/users')
  .then(response => response.json())
  .then(json => {
    if (!json['errors']) {
      json['data']['users'].forEach(user => {
        const id = user['id']
        const name = user['name']
        if (users[id].name !== name) {
          setUserName(id, name)
        }
      })
    }
  })

It also means you can't rename stringifed keys because they are not in your code base only - in external API, data files, etc.

Don't mix JS and JSX in one line

Bad

return <ReferenceLink referenceKey={key} id={ref.id} title={ref.title}/>

Bad

const body = items.map(it => <li>{it.title}</li>)

Good

return (
  <ReferenceLink referenceKey={key} id={ref.id} title={ref.title}/>
);

Good

const body = items.map(it => (
  <li>{it.title}</li>
))

Good

return (
  <References>
    {items.map((it, index) => (
      <ReferenceLink referenceKey={index} id={it['id']} title={it['title']}/>
    ))}
  </References>
)

Don't mix JSX and Text node in one line

Bad

return (
  <Text style={style.openInSafariLink}>Open in Safari</Text>
)

Good

return (
  <Text style={style.openInSafariLink}>
    Open in Safari
  </Text>
)

But if you need a Text node for styling:

Good

return (
  <Text>&nbsp;</Text>
)

Use right import sequence

• React
• Relay
• Redux
• Global Tools
• Local Tools
• Other Components
• Styles