Skip to content
This repository was archived by the owner on May 3, 2022. It is now read-only.

Code style

Paweł Psztyć edited this page Sep 30, 2016 · 1 revision

Code style

The fastest way to start is to use the polymd command when creating new custom element. It will add editor config files:

polymd --arc -d "Component description" component-name

You can install polymd via npm:

npm install -g polymd

First of all follow the Google JavaScript Style Guide. Secondly use gulp lint command before you submit any code to the repository. Linter configuration is available in gulpfile.js file in the lint task.

See the Google HTML/CSS style guide for CSS and HTML rules.

In both cases you can skip the part with compatibility with other browsers. It must work in Chrome.

Editor and lint config

The editor

I suggest following editor configuration. The .editorconfig file:

root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

JavaScript Code Style

The .jscsrc file:

{
  "preset": "google",
  "disallowSpacesInAnonymousFunctionExpression": null,
  "disallowTrailingWhitespace": null,
  "maximumLineLength": 100,
  "excludeFiles": ["node_modules/**"]
}

JSHint

The .jshintrc file:

{
  "esnext": true,
  "node": true,
  "browser": true,
  "bitwise": true,
  "camelcase": false,
  "curly": true,
  "eqeqeq": true,
  "immed": true,
  "indent": 2,
  "latedef": true,
  "noarg": true,
  "quotmark": "single",
  "undef": true,
  "unused": true,
  "newcap": false,
  "globals": {
    "wrap": true,
    "unwrap": true,
    "Polymer": true,
    "Platform": true,
    "page": true,
    "app": true,
	"chrome": true
  }
}

Clone this wiki locally