Add configuration for prettier code formatting

1. Add prettier and configuration files, but do not format code yet.
2. Configure it for all html|css|js|md code.
3. Fix a bug it found in `CZML Custom Properties.html`
4. Add a pre-commit hook via husky and pretty-quick which will
automatically format changed files when they are staged on the client.
5. Run `prettier-check` during CI and fail the build of code is not
formatted properly.
6. Install eslint config for prettier. This does not enable prettier
checking in eslint (it's unusably slow) but instead just makes sure that
no eslint rules conflict with prettier formatting.
7. Update .editorconfig to match (since prettier respects it)
8. Tweak Sandcastle to handle prettier formated examples

Author: mramato

.editorconfig

@@ -3,13 +3,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[package.json]
-indent_size = 2

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-    "extends": "./Tools/eslint-config-cesium/browser.js",
+    "extends": ["./Tools/eslint-config-cesium/browser.js", "prettier"],
     "plugins": [
         "html"
     ],

.prettierignore

@@ -0,0 +1,11 @@
+/node_modules
+/Build
+/ThirdParty
+/Apps/Sandcastle/ThirdParty
+/Source/Cesium.js
+/Source/Shaders/**/*.js
+/Source/ThirdParty/**
+/Source/Workers/**/*
+!/Source/Workers/cesiumWorkerBootstrapper.js
+!/Source/Workers/transferTypedArrayTest.js
+*.min.js

.travis.yml

@@ -9,6 +9,7 @@ script:
   - npm --silent run deploy-status -- --status pending --message 'Waiting for build'
 
   - npm --silent run eslint
+  - npm --silent run prettier-check
 
   - npm --silent run build
   - npm --silent run coverage -- --browsers FirefoxHeadless --webgl-stub --failTaskOnError --suppressPassed

Apps/Sandcastle/CesiumSandcastle.js

@@ -758,6 +758,7 @@ require({
                 }
 
                 var scriptCode = scriptMatch[1];
+                scriptCode = scriptCode.replace(/^ {8}/gm, ""); //Account for Prettier spacing
 
                 var htmlText = '';
                 var childIndex = 0;

Apps/Sandcastle/gallery/CZML Custom Properties.html

@@ -20,7 +20,6 @@
 <div id="toolbar">
     <div id="propertiesMenu"></div>
 </div>
-</div>
 
 <script id="cesium_sandcastle_script">
 function startup(Cesium) {

Documentation/Contributors/CodingGuide/README.md

@@ -90,53 +90,9 @@ A few more naming conventions are introduced below along with their design patte
 
 ## Formatting
 
-In general, format new code in the same way as the existing code.
-
-* Use four spaces for indentation.  Do not use tab characters.
-* Do not include trailing whitespace.
-* Put `{` on the same line as the previous statement:
-```javascript
-function defaultValue(a, b) {
-   // ...
-}
-
-if (!defined(result)) {
-   // ...
-}
-```
-* Use curly braces even for single line `if`, `for`, and `while` blocks, e.g.,
-```javascript
-if (!defined(result))
-    result = new Cartesian3();
-```
-is better written as
-```javascript
-if (!defined(result)) {
-    result = new Cartesian3();
-}
-```
-* Use parenthesis judiciously, e.g.,
-```javascript
-var foo = x > 0.0 && y !== 0.0;
-```
-is better written as
-```javascript
-var foo = (x > 0.0) && (y !== 0.0);
-```
-* Use vertical whitespace to separate functions and to group related statements within a function, e.g.,
-```javascript
-function Model(options) {
-    // ...
-    this._allowPicking = defaultValue(options.allowPicking, true);
-
-    this._ready = false;
-    this._readyPromise = when.defer();
-    // ...
-};
-```
-* In JavaScript code, use single quotes, `'`, instead of double quotes, `"`.  In HTML, use double quotes.
-
-* Text files, including JavaScript files, end with a newline to minimize the noise in diffs.
+* We use [prettier](https://prettier.io/) to automatically re-format all JS code at commit time, so all of the work is done for you. Code is automatically reformatted when you commit.
+* For HTML code, keep the existing style. Use double quotes.
+* Text files, end with a newline to minimize the noise in diffs.
 
 ## Linting
 

package.json

@@ -42,6 +42,7 @@
     "cloc": "^2.3.3",
     "compression": "^1.6.2",
     "eslint": "^6.4.0",
+    "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-html": "^6.0.0",
     "express": "^4.15.0",
     "globby": "^11.0.0",
@@ -54,6 +55,7 @@
     "gulp-tap": "^2.0.0",
     "gulp-uglify": "^3.0.0",
     "gulp-zip": "^5.0.0",
+    "husky": "^4.2.5",
     "jasmine-core": "^3.3.0",
     "jsdoc": "^3.4.3",
     "karma": "^4.0.0",
@@ -72,6 +74,8 @@
     "mime": "^2.0.3",
     "mkdirp": "^1.0.0",
     "open": "^7.0.0",
+    "prettier": "^2.0.4",
+    "pretty-quick": "^2.0.1",
     "request": "^2.79.0",
     "rimraf": "^3.0.0",
     "rollup": "^1.21.4",
@@ -81,6 +85,11 @@
     "stream-to-promise": "^2.2.0",
     "yargs": "^15.0.1"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
   "scripts": {
     "convertToModules": "gulp convertToModules",
     "start": "node server.cjs",
@@ -111,6 +120,9 @@
     "sortRequires": "gulp sortRequires",
     "deploy-s3": "gulp deploy-s3",
     "deploy-status": "gulp deploy-status",
-    "deploy-set-version": "gulp deploy-set-version"
+    "deploy-set-version": "gulp deploy-set-version",
+    "prettier": "prettier --write \"**/*.(js|css|html|md)\"",
+    "prettier-check": "prettier --check \"**/*.(js|css|html|md)\"",
+    "pretty-quick": "pretty-quick"
   }
 }