build(prettier): Upgrade prettier to 1.7.4 (#6459)

* Upgrades prettier to 1.7.4
* Create prettier config file
* Change trailing comma rule
* Add precommit hook to run prettier on less files

* style(prettier): Bulk format using prettier 1.7.4

.eslintrc

@@ -1,8 +1,16 @@
 {
+  "extends": [
+    "prettier"
+  ],
+
   "parser": "babel-eslint",
-  "ecmaFeatures": {
-    "jsx": true,
-    "modules": true
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    }
   },
   "env": {
     "browser": true,

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "bracketSpacing": false,
+  "jsxBracketSameLine": false,
+  "printWidth": 90,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

.storybook/config.js

@@ -6,7 +6,7 @@ import './storybook.less';
 setDefaults({
   inline: true,
   header: false,
-  source: true
+  source: true,
 });
 setAddon(infoAddon);
 

.storybook/webpack.config.js

@@ -16,32 +16,32 @@ module.exports = {
         loader: 'po-catalog-loader',
         query: {
           referenceExtensions: ['.js', '.jsx'],
-          domain: 'sentry'
-        }
+          domain: 'sentry',
+        },
       },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader']
+        use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.less$/,
         use: [
           {
-            loader: 'style-loader'
+            loader: 'style-loader',
           },
           {
-            loader: 'css-loader'
+            loader: 'css-loader',
           },
           {
-            loader: 'less-loader'
-          }
-        ]
+            loader: 'less-loader',
+          },
+        ],
       },
       {
         test: /\.(woff|woff2|ttf|eot|svg|png|gif|ico|jpg)($|\?)/,
-        loader: 'file-loader?name=' + '[name].[ext]'
-      }
-    ]
+        loader: 'file-loader?name=' + '[name].[ext]',
+      },
+    ],
   },
   plugins: [
     new webpack.ProvidePlugin({
@@ -51,18 +51,18 @@ module.exports = {
       'root.jQuery': 'jquery',
       Raven: 'raven-js',
       underscore: 'underscore',
-      _: 'underscore'
+      _: 'underscore',
     }),
     new webpack.DefinePlugin({
       'process.env': {
-        IS_PERCY: true
-      }
-    })
+        IS_PERCY: true,
+      },
+    }),
   ],
   resolve: {
     extensions: appConfig.resolve.extensions,
     alias: Object.assign({}, appConfig.resolve.alias, {
-      'sentry-ui': componentPath
-    })
-  }
+      'sentry-ui': componentPath,
+    }),
+  },
 };

.vscode/settings.json

@@ -15,19 +15,26 @@
     "files.trimTrailingWhitespace": true,
     "files.ensureSingleFinalNewline": true,
 
-    "prettier.bracketSpacing": false,
-    "prettier.singleQuote": true,
-    "prettier.printWidth": 90,
-    "prettier.jsxBracketSameLine": true,
-
     "eslint.options": {
         "configFile": ".eslintrc"
     },
 
+    "files.associations": {
+        "*.jsx": "javascriptreact"
+    },
+
     "[javascript]": {
         "editor.formatOnSave": true
     },
 
+    "[javascriptreact]": {
+        "editor.formatOnSave": true
+    },
+
+    "[less]": {
+        "editor.formatOnSave": true
+    },
+
     "[python]": {
         "editor.formatOnSave": true
     },
@@ -42,5 +49,5 @@
     // tests is often in your way and misclicked
     "python.unitTest.pyTestEnabled": false,
     "python.unitTest.unittestEnabled": false,
-    "python.unitTest.nosetestsEnabled": false
+    "python.unitTest.nosetestsEnabled": false,
 }

docs-ui/components/alertMessage.stories.js

@@ -14,7 +14,7 @@ storiesOf('AlertMessage', module).add(
           id: 'id',
           message: 'Alert Message',
           type: 'success',
-          url: 'url'
+          url: 'url',
         }}
       />
 
@@ -23,7 +23,7 @@ storiesOf('AlertMessage', module).add(
           id: 'id',
           message: 'Alert Message',
           type: 'error',
-          url: 'url'
+          url: 'url',
         }}
       />
       <AlertMessage
@@ -31,7 +31,7 @@ storiesOf('AlertMessage', module).add(
           id: 'id',
           message: 'Alert Message',
           type: 'warning',
-          url: 'url'
+          url: 'url',
         }}
       />
     </div>

docs-ui/components/avatar.stories.js

@@ -8,7 +8,7 @@ import Avatar from 'sentry-ui/avatar';
 const USER = {
   id: 1,
   name: 'Jane Doe',
-  email: 'janedoe@example.com'
+  email: 'janedoe@example.com',
 };
 
 // eslint-disable-next-line
@@ -29,8 +29,8 @@ storiesOf('Avatar', module)
         email: 'ben@benv.ca',
         avatar: {
           avatarType: 'gravatar',
-          avatarUuid: '2d641b5d-8c74-44de-9cb6-fbd54701b35e'
-        }
+          avatarUuid: '2d641b5d-8c74-44de-9cb6-fbd54701b35e',
+        },
       };
       return <Avatar user={user} />;
     })
@@ -41,8 +41,8 @@ storiesOf('Avatar', module)
       let user = Object.assign({}, USER, {
         avatar: {
           avatarType: 'upload',
-          avatarUuid: '51e63edabf31412aa2a955e9cf2c1ca0'
-        }
+          avatarUuid: '51e63edabf31412aa2a955e9cf2c1ca0',
+        },
       });
       return <Avatar user={user} />;
     })

docs-ui/components/button.stories.js

@@ -45,27 +45,19 @@ storiesOf('Buttons', module)
     withInfo('Different buttons sizes')(() => (
       <div>
         <Item>
-          <Button size="xsmall">
-            Extra Small
-          </Button>
+          <Button size="xsmall">Extra Small</Button>
         </Item>
 
         <Item>
-          <Button size="small">
-            Small
-          </Button>
+          <Button size="small">Small</Button>
         </Item>
 
         <Item>
-          <Button>
-            Normal
-          </Button>
+          <Button>Normal</Button>
         </Item>
 
         <Item>
-          <Button size="large">
-            Large
-          </Button>
+          <Button size="large">Large</Button>
         </Item>
       </div>
     ))
@@ -78,7 +70,8 @@ storiesOf('Buttons', module)
           <Button
             busy={boolean('Extra Small Busy', true)}
             priority="primary"
-            size="xsmall">
+            size="xsmall"
+          >
             Extra Small
           </Button>
         </Item>
@@ -106,7 +99,6 @@ storiesOf('Buttons', module)
             Disabled Button
           </Button>
         </Item>
-
       </div>
     ))
   );

docs-ui/components/clipboard.stories.js

@@ -12,10 +12,9 @@ storiesOf('Clipboard', module).add(
       <Clipboard
         value="This will be copied to clipboard"
         onSuccess={action('Copied to clipboard')}
-        onError={action('Failed copy to clipboard')}>
-        <span priority="primary">
-          Click to Copy
-        </span>
+        onError={action('Failed copy to clipboard')}
+      >
+        <span priority="primary">Click to Copy</span>
       </Clipboard>
     </div>
   ))

docs-ui/components/clippedBox.stories.js

@@ -14,10 +14,25 @@ storiesOf('ClippedBox', module).add(
           defaultClipped
           title="Clipped Box Title"
           clipHeight={60}
-          btnText="Expand">
-
-          Tilde taiyaki lumbersexual, franzen gochujang forage mixtape meditation mumblecore af food truck etsy butcher. Post-ironic taiyaki affogato, artisan biodiesel kickstarter direct trade try-hard tacos subway tile swag vice trust fund shaman whatever. Everyday carry cliche lomo, bicycle rights vaporware tbh meditation occupy bespoke. Meh green juice enamel pin thundercats, aesthetic intelligentsia hoodie fanny pack venmo. Kale chips tacos activated charcoal pinterest tousled hoodie 8-bit occupy distillery. Tote bag godard thundercats small batch banjo, DIY waistcoat. Glossier poutine VHS put a bird on it listicle deep v letterpress. Tbh banjo paleo cred hoodie. Live-edge synth twee, subway tile coloring book woke swag XOXO cornhole glossier neutra hell of lo-fi brooklyn actually. Retro beard jianbing, shoreditch kitsch banh mi flexitarian mustache cold-pressed. Sriracha af brooklyn, poutine snackwave taxidermy ugh locavore mlkshk shaman before they sold out +1. Microdosing copper mug edison bulb, synth tote bag man braid heirloom. Cray tattooed portland, echo park sustainable gluten-free chartreuse hexagon. Pitchfork fixie keffiyeh mustache +1 vinyl, cliche pok pok vegan hashtag live-edge williamsburg wayfarers butcher beard.
-
+          btnText="Expand"
+        >
+          Tilde taiyaki lumbersexual, franzen gochujang forage mixtape meditation
+          mumblecore af food truck etsy butcher. Post-ironic taiyaki affogato, artisan
+          biodiesel kickstarter direct trade try-hard tacos subway tile swag vice trust
+          fund shaman whatever. Everyday carry cliche lomo, bicycle rights vaporware tbh
+          meditation occupy bespoke. Meh green juice enamel pin thundercats, aesthetic
+          intelligentsia hoodie fanny pack venmo. Kale chips tacos activated charcoal
+          pinterest tousled hoodie 8-bit occupy distillery. Tote bag godard thundercats
+          small batch banjo, DIY waistcoat. Glossier poutine VHS put a bird on it listicle
+          deep v letterpress. Tbh banjo paleo cred hoodie. Live-edge synth twee, subway
+          tile coloring book woke swag XOXO cornhole glossier neutra hell of lo-fi
+          brooklyn actually. Retro beard jianbing, shoreditch kitsch banh mi flexitarian
+          mustache cold-pressed. Sriracha af brooklyn, poutine snackwave taxidermy ugh
+          locavore mlkshk shaman before they sold out +1. Microdosing copper mug edison
+          bulb, synth tote bag man braid heirloom. Cray tattooed portland, echo park
+          sustainable gluten-free chartreuse hexagon. Pitchfork fixie keffiyeh mustache +1
+          vinyl, cliche pok pok vegan hashtag live-edge williamsburg wayfarers butcher
+          beard.
         </ClippedBox>
       </div>
     </div>