Run prettier on all relevant files (#8644)

* Run prettier on all relevant files on commit and on demand * Check in result of running prettier almost everywhere * Exclude appropriate files
microsoft · Apr 16, 2019 · 68bf892 · 68bf892
1 parent 7fd3dad
commit 68bf892
Show file tree

Hide file tree

Showing 140 changed files with 1,014 additions and 4,584 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,12 +1,22 @@
 package.json
-packages/*/package.json
+package-deps.json
+shrinkwrap.yml
+CHANGELOG.*
+fabric-icons-*
+version.ts
+dndSim.js
+packages/tslint-rules/tslint.json
 
-**/*.d.ts
-**/*.api.md
+*.d.ts
+*.api.md
+*.scss.ts
+_*.scss
 
-**/lib/**/*.js
-**/lib-commonjs/**/*.js
-**/dist/*.js
-**/common/changes/**/*.*
-
-**/CHANGELOG.json
+lib
+lib-amd
+lib-esm
+lib-commonjs
+dist
+node_modules
+common/changes
+common/scripts
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,13 +1,14 @@
 {
-  // Controls the rendering size of tabs in characters. Accepted values: "auto", 2, 4, 6, etc. If set to "auto", the value will be guessed when a file is opened.
+  // Controls the rendering size of tabs in characters.
   "editor.tabSize": 2,
-  // When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
+  // When opening a file, `editor.tabSize` and `editor.insertSpaces` will NOT be detected based on the file contents.
   "editor.detectIndentation": false,
   // When enabled, will trim trailing whitespace when you save a file.
   "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
   // Controls whether the editor should render whitespace characters
   "editor.renderWhitespace": "all",
-  // Controls if the editor will insert spaces for tabs. Accepted values:  "auto", true, false. If set to "auto", the value will be guessed when a file is opened.
+  // Controls if the editor will insert spaces for tabs.
   "editor.insertSpaces": true,
   "files.exclude": {
     "**/.git": true,

diff --git a/apps/a11y-tests/package.json b/apps/a11y-tests/package.json
@@ -7,6 +7,7 @@
     "build": "node ../../scripts/just.js build-commonjs-only",
     "test": "node ../../scripts/just.js jest",
     "update-snapshots": "node ../../scripts/just.js jest -u",
+    "code-style": "node ../../scripts/just.js code-style",
     "generate-reports": "node ./scripts/generate-sarif-reports.js",
     "start-test": "node ./scripts/start-test.js",
     "start-generate-reports": "node ./scripts/start-generate-sarif-reports.js"

diff --git a/apps/a11y-tests/tslint.json b/apps/a11y-tests/tslint.json
@@ -5,8 +5,6 @@
     "jsx-no-lambda": false
   },
   "linterOptions": {
-    "exclude": [
-        "src/axe-sarif-converter/**"
-    ]
+    "exclude": ["src/axe-sarif-converter/**"]
   }
 }
diff --git a/apps/fabric-website-resources/src/docs/GettingStartedOverview.md b/apps/fabric-website-resources/src/docs/GettingStartedOverview.md
@@ -1,8 +1,8 @@
 ## Overview
 
-Fabric React components are built as production ready components to be used in Microsoft products, but generalized, documented, and reusable. This enables us and our partners to more easily build great applications without spending a ton of time implementing the same things over and over.
+Fabric React components are built as production-ready, generalized, documented, and reusable components to be used in Microsoft products. This enables us and our partners to more easily build great applications without spending a ton of time implementing the same things over and over.
 
-Each component is designed to be RTL friendly, keyboard accessible, screen reader friendly, themeable, and generalized. TypeScript definition files are also included, so if you use TypeScript (which isn't a requirement), you will get compiler validation and using an editor like VS Code, you'll get intellisense. Each component is exported as a named module that can be easily imported in your code, allowing your external bundler to create small bundles that include just what you need.
+Each component is designed to be RTL-friendly, keyboard accessible, screen reader-friendly, themeable, and generalized. TypeScript definition files are also included, so if you use TypeScript (which isn't a requirement), you will get compiler validation and using an editor like VS Code, you'll get intellisense. Each component is exported as a named module that can be easily imported in your code, allowing your external bundler to create small bundles that include just what you need.
 
 ## Getting Started
 
@@ -24,7 +24,11 @@ import * as ReactDOM from 'react-dom';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 
-const MyPage = () => (<Fabric><DefaultButton>I am a button.</DefaultButton></Fabric>);
+const MyPage = () => (
+  <Fabric>
+    <DefaultButton>I am a button.</DefaultButton>
+  </Fabric>
+);
 
 ReactDOM.render(<MyPage />, document.body.firstChild);
 ```

diff --git a/apps/fabric-website/src/components/CodeBlock/CodeBlock.module.scss b/apps/fabric-website/src/components/CodeBlock/CodeBlock.module.scss
@@ -49,7 +49,7 @@
 // Common styles between themes
 :global {
   .hljs {
-    -webkit-overflow-scrolling: touch;  // Improves scrolling performance
+    -webkit-overflow-scrolling: touch; // Improves scrolling performance
     display: block;
     font-family: monospace;
     line-height: 1.4;
@@ -64,16 +64,39 @@
     background: $ms-color-neutralDark;
     color: $ms-color-white;
   }
-  .hljs-comment, .hljs-quote {
+  .hljs-comment,
+  .hljs-quote {
     color: #777;
   }
-  .hljs-variable, .hljs-template-variable, .hljs-tag, .hljs-regexp, .hljs-meta, .hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-params, .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-deletion {
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-tag,
+  .hljs-regexp,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-built_in,
+  .hljs-builtin-name,
+  .hljs-literal,
+  .hljs-params,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-deletion {
     color: #ab875d;
   }
-  .hljs-section, .hljs-title, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-type, .hljs-attribute {
+  .hljs-section,
+  .hljs-title,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-type,
+  .hljs-attribute {
     color: #9b869b;
   }
-  .hljs-string, .hljs-keyword, .hljs-selector-tag, .hljs-addition {
+  .hljs-string,
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-addition {
     color: #8f9c6c;
   }
   .hljs-emphasis {
@@ -89,33 +112,55 @@
   .hljs {
     background: $ms-color-white;
   }
-  .hljs, .hljs-subst {
+  .hljs,
+  .hljs-subst {
     color: #434f54;
   }
-  .hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-doctag, .hljs-name {
-    color: #00979D;
-  }
-  .hljs-built_in, .hljs-literal, .hljs-bullet, .hljs-code, .hljs-addition {
-    color: #D35400;
-  }
-  .hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo {
-    color: #00979D;
-  }
-  .hljs-type, .hljs-string, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion {
-    color: #005C5F;
-  }
-  .hljs-title, .hljs-section {
+  .hljs-keyword,
+  .hljs-attribute,
+  .hljs-selector-tag,
+  .hljs-doctag,
+  .hljs-name {
+    color: #00979d;
+  }
+  .hljs-built_in,
+  .hljs-literal,
+  .hljs-bullet,
+  .hljs-code,
+  .hljs-addition {
+    color: #d35400;
+  }
+  .hljs-regexp,
+  .hljs-symbol,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-link,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo {
+    color: #00979d;
+  }
+  .hljs-type,
+  .hljs-string,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-quote,
+  .hljs-template-tag,
+  .hljs-deletion {
+    color: #005c5f;
+  }
+  .hljs-title,
+  .hljs-section {
     color: #880000;
     font-weight: bold;
   }
   .hljs-comment {
     color: rgba(149, 165, 166, 0.8);
   }
   .hljs-meta-keyword {
-    color: #728E00;
+    color: #728e00;
   }
   .hljs-meta {
-    color: #728E00;
+    color: #728e00;
     color: #434f54;
   }
   .hljs-emphasis {
@@ -125,9 +170,9 @@
     font-weight: bold;
   }
   .hljs-function {
-    color: #728E00;
+    color: #728e00;
   }
   .hljs-number {
-    color: #8A7B52;
+    color: #8a7b52;
   }
 }
diff --git a/apps/fabric-website/src/components/DOIcon/DOIcon.scss b/apps/fabric-website/src/components/DOIcon/DOIcon.scss
diff --git a/apps/fabric-website/src/components/DOIcon/DOIcon.tsx b/apps/fabric-website/src/components/DOIcon/DOIcon.tsx
@@ -14,10 +14,7 @@ export class DOIcon extends React.Component<IDOIconProps, {}> {
 
   public render(): JSX.Element {
     return (
-      <i
-        className={'od-Icon od-Icon--' + this.props.iconClass + ' ms-bgColor-' + this.props.bgColor}
-        aria-hidden={this.props.ariaHidden}
-      />
+      <i className={'od-Icon od-Icon--' + this.props.iconClass + ' ms-bgColor-' + this.props.bgColor} aria-hidden={this.props.ariaHidden} />
     );
   }
 }
diff --git a/apps/fabric-website/src/components/DONavigation/DONavigation.scss b/apps/fabric-website/src/components/DONavigation/DONavigation.scss
@@ -91,7 +91,7 @@ $od-Navigation-columnPadding: 30px;
 
   .od-Navigation-subMenuItem {
     font-size: $ms-font-size-l - 1;
-    line-height:  32px;
+    line-height: 32px;
     width: 100%;
     display: block;
     color: $ms-color-white;
@@ -104,7 +104,7 @@ $od-Navigation-columnPadding: 30px;
         box-shadow: inset 0px 0px 0px 1px WindowText;
       }
 
-      @include high-contrast-black-on-white  {
+      @include high-contrast-black-on-white {
         box-shadow: inset 0px 0px 0px 1px Highlight;
       }
     }

diff --git a/apps/fabric-website/src/components/DONavigation/DONavigation.tsx b/apps/fabric-website/src/components/DONavigation/DONavigation.tsx
@@ -122,12 +122,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
             </a>
           </div>
           <div className="od-Navigation-linkContainer">
-            <a
-              className="od-Navigation-link"
-              role="menuitem"
-              aria-label="Code Samples menu item"
-              href="http://dev.office.com/code-samples"
-            >
+            <a className="od-Navigation-link" role="menuitem" aria-label="Code Samples menu item" href="http://dev.office.com/code-samples">
               Code Samples
             </a>
           </div>
@@ -143,9 +138,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
               <i className="ms-Icon ms-Icon--ChevronDown" aria-hidden="true" />
             </a>
             <div className="od-Navigation-subMenu">
-              <div className="od-Navigation-subMenuItems od-Navigation-menuFirstColumn">
-                {this._getLinks(links.resourcesLinks)}
-              </div>
+              <div className="od-Navigation-subMenuItems od-Navigation-menuFirstColumn">{this._getLinks(links.resourcesLinks)}</div>
             </div>
           </div>
           <div className="od-Navigation-linkContainer">
@@ -160,9 +153,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
               <i className="ms-Icon ms-Icon--ChevronDown" aria-hidden="true" />
             </a>
             <div className="od-Navigation-subMenu">
-              <div className="od-Navigation-subMenuItems od-Navigation-menuFirstColumn">
-                {this._getLinks(links.documentationLinks)}
-              </div>
+              <div className="od-Navigation-subMenuItems od-Navigation-menuFirstColumn">{this._getLinks(links.documentationLinks)}</div>
             </div>
           </div>
         </div>
@@ -191,10 +182,8 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
   private _getLinks(linkArray: Array<any>): Array<JSX.Element> {
     let linkElements: Array<JSX.Element> = [];
 
-    for (let i = 0; i < linkArray.length; i++) {
-      linkElements.push(
-        <DONavigationLink label={linkArray[i].label} href={linkArray[i].href} icon={linkArray[i].icon} key={i} />
-      );
+    for (const link of linkArray) {
+      linkElements.push(<DONavigationLink label={link.label} href={link.href} icon={link.icon} key={link.label + link.href} />);
     }
 
     return linkElements;

diff --git a/apps/fabric-website/src/components/DONavigation/DONavigationLink.scss b/apps/fabric-website/src/components/DONavigation/DONavigationLink.scss
@@ -25,7 +25,7 @@
         box-shadow: inset 0px 0px 0px 1px WindowText;
       }
 
-      @include high-contrast-black-on-white  {
+      @include high-contrast-black-on-white {
         box-shadow: inset 0px 0px 0px 1px Highlight;
       }
     }
@@ -49,14 +49,14 @@
       vertical-align: bottom;
 
       @include high-contrast {
-      transition: none;
+        transition: none;
       }
     }
 
     // Responsive changes
     @media (min-width: $od-Header-bannerWidth) {
-    display: inline-block;
-    width: auto;
+      display: inline-block;
+      width: auto;
 
       &:hover {
         &:before {

diff --git a/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.tsx b/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.tsx
@@ -5,11 +5,7 @@ export class DOSearchBox extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
       <div className="od-SearchBox">
-        <form
-          className="od-SearchBox-searchForm ng-pristine ng-valid"
-          action="http://dev.office.com/Search"
-          method="get"
-        >
+        <form className="od-SearchBox-searchForm ng-pristine ng-valid" action="http://dev.office.com/Search" method="get">
           <fieldset>
             <input
               name="q"

diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.module.scss b/apps/fabric-website/src/components/PageHeader/PageHeader.module.scss
@@ -44,7 +44,7 @@
 
     &.isAttached {
       .content {
-        box-shadow: 0 10px 30px -10px rgba(0,0,0,.2);
+        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
         max-width: $App-maximumWidth - $Nav-width;
         position: fixed;
         width: calc(100% - #{$Nav-width} - #{$App-padding-left-lg} - #{$App-padding-right-lg});
@@ -139,4 +139,4 @@
     @include ms-margin-right(20px);
     font-size: 14px;
   }
-}
+}
diff --git a/apps/fabric-website/src/components/Table/Table.module.scss b/apps/fabric-website/src/components/Table/Table.module.scss
@@ -24,7 +24,7 @@
     font-size: $ms-font-size-m;
 
     td {
-      line-height:  normal;
+      line-height: normal;
 
       &.animCell {
         width: 260px;
@@ -42,7 +42,8 @@
     border-bottom: 1px solid $ms-color-neutralTertiaryAlt;
   }
 
-  th, td {
+  th,
+  td {
     padding: 8px;
     vertical-align: top;
   }