Good, clear and consistent code styles are pivotal in the success of any software project. Good use of style can reduce errors, consistency will enable us to work together efficiently. Ghost uses a combination of JSHint and JSCS to maintain consistent styles throughout the codebase which roughly emulate the strict style rules from JSLint.
You can find the rules in the codebase. The root directory contains both a .jshintrc and .jscsrc file. Please note that the
/core/client/ directory, which contains the client-side ember code for the admin panel uses ESLint and has its own .eslintrc file. Many modern IDE's are able to pick up on these files and lint your code for you as you go.
The basic rules are:
grunt lintchecks your code (
grunt validateruns all tests).
- Indent with 4 spaces.
- Single quotes in JS.
- One var per function.
- Commas at the end.
- Max line length 120.
- Use unix line endings.
- Don't litter with new lines
- Document as you go.
- Write tests.
- When coding, less is always more. Write the least amount of code possible to solve just the problem at hand.
- Predicting the future is impossible. Try to distinguish between anticipating potential future problems and potential future features. The former is usually good, the latter is usually bad.
- Callbacks are great, but promises and deferreds are even better. We are using bluebird to provide promise functionality. In the vast majority of cases this is preferred to using callbacks.
- 'exports' comes last. Define the public API to your module at the very end of the file, even if it is a single function.
- Functional programming is functional. Functions should be small and single-purpose. Large variable lists are a sign your function does too much.
- HTML attribute order: [ID, class, type, other values]
- 4 spaces for HTML & CSS indentation. Never tabs.
- Double quotes only, never single quotes.
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags)
- Adhere to the Recess CSS property order.
- Always a space after a property's colon (.e.g,
display: block;and not
- End all lines with a semi-colon.
- For multiple, comma-separated selectors, place each selector on its own line.