Update Prettier & add prettier button back (codesandbox#520)

* Update prettier

* Add Prettify button back

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/index.js

@@ -2,9 +2,15 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 
 import { canPrettify } from 'app/utils/prettify';
+import Tooltip from 'common/components/Tooltip';
 import TabContainer from './TabContainer';
 
-import { Container, TabsContainer, IconContainer } from './elements';
+import {
+  Container,
+  TabsContainer,
+  IconContainer,
+  StyledPrettierIcon,
+} from './elements';
 
 class EditorTabs extends React.Component {
   componentWillMount() {
@@ -64,10 +70,8 @@ class EditorTabs extends React.Component {
   };
 
   prettifyModule = () => {
-    const { currentSandbox } = this.props.store.editor;
-
     this.props.signals.editor.prettifyClicked({
-      moduleShortid: currentSandbox.currentModuleShortid,
+      moduleShortid: this.props.store.editor.currentModuleShortid,
     });
   };
 
@@ -166,12 +170,12 @@ class EditorTabs extends React.Component {
             })}
         </TabsContainer>
         <IconContainer>
-          {/* <Tooltip title="Prettify">
+          <Tooltip title="Prettify">
             <StyledPrettierIcon
               disabled={!this.canPrettify(currentModule)}
               onClick={this.prettifyModule}
             />
-          </Tooltip> */}
+          </Tooltip>
         </IconContainer>
       </Container>
     );

packages/app/src/app/utils/prettify.js

@@ -28,14 +28,18 @@ function getMode(title: string) {
     return 'postcss';
   }
 
-  if (/\.scss$/.test(title)) {
+  if (/\.s[c|a]ss$/.test(title)) {
     return 'postcss';
   }
 
   if (/\.less$/.test(title)) {
     return 'postcss';
   }
 
+  if (/\.vue$/.test(title)) {
+    return 'vue';
+  }
+
   if (/\.gql$/.test(title)) {
     return 'graphql';
   }