UNIT9 Style Guide

You can't run away
From these styles I got, oh baby, hey baby
Cause I got a lot, oh yeah

The Fugees - Ready or Not

---

Table of contents:

• Editor code style
• Version control
• Code Formatting
• Code Linting
• HTML & CSS

---

Editor code style

EditorConfig is used to define indentation style and size, EOL, final new line, charset across a single project.

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.

Version control

The Art of the commit

Be useful
Be detailed
Be consistent
Use the active voice

Feature Branch

feature development encapsulated
leverage pull requests

Git Flow

master
develop
feature/
release/
hotfix/

Code Formatting

Use Prettier:

npm i -D prettier

Editor	Plugin	Installation
Sublime Text	SublimeJsPrettier	Prettier via Package Manager
Atom	prettier-atom	apm install prettier-atom
VSCode	prettier-vscode	ext install prettier-vscode

Prettier is an opinionated code formatter with support for:

• JavaScript, including ES2017
• JSX
• Flow
• TypeScript
• CSS, LESS, and SCSS
• JSON
• GraphQL

Code Linting

Install the linter:

• Sublime Linter
• Atom linter

Install the linter's plugins:

Editor	Plugin	Installation
Sublime Text	SublimeLinter-eslint	SublimeLinter-contrib-eslint via Package Manager
Atom	linter-eslint	apm install linter-eslint
VSCode	vscode-eslint	ESLint from VS Code Marketplace

Use ESLint:

npm i -D eslint

Configure ESLint for Prettier:

• Use eslint-plugin-prettier as an ESLint rule:

npm i -D eslint-plugin-prettier

{
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  },
}

• Use eslint-config-prettier to disable all the existing formatting rules:

npm i -D eslint-config-prettier

{
  "extends": [
    "prettier"
  ]
}

See package.json.

HTML & CSS

Conventions

HTML Codeguide

SUIT CSS:

• .u-utility
• .ComponentName
• .ComponentName-descendentName
• .ComponentName--modifierName
• .ComponentName.is-stateOfComponent

or sometimes BEM:

• .block-name
• .block-name__element
• .block-name--modifier-name

Base

normalize.css

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

---

For Google Projects, use the following:

• JavaScript Style Guide
• Google HTML/CSS Style Guide
• Google Closure Tools if required