add arrowParens to prettier config (codesandbox#1700)

* add arrowParens to prettier config

* add to modal too

* fix bind

* re add overflow

Author: SaraVieira

packages/app/src/app/components/CodeEditor/Configuration/elements.ts

@@ -4,8 +4,8 @@ export const Container = styled.div`
   padding: 1rem;
   color: rgba(255, 255, 255, 0.8);
   box-sizing: border-box;
-
   overflow: auto;
+  max-height: 100%;
 `;
 
 export const Title = styled.h1`

packages/app/src/app/components/CodeEditor/VSCode/Configuration/elements.ts

@@ -4,7 +4,7 @@ export const Container = styled.div`
   padding: 1rem;
   color: rgba(255, 255, 255, 0.8);
   box-sizing: border-box;
-
+  max-height: 100%;
   overflow: auto;
 `;
 

packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.js

@@ -130,6 +130,16 @@ function Prettier({ store, signals }) {
           Put the `{'>'}` of a multi-line JSX element at the end of the last
           line instead of being alone on the next line.
         </SubDescription>
+        <Rule />
+        <PaddedPreference
+          title="Arrow Function Parentheses"
+          type="dropdown"
+          options={['avoid', 'always']}
+          {...bindValue('arrowParens')}
+        />
+        <SubDescription>
+          Include parentheses around a sole arrow function parameter.
+        </SubDescription>
       </PreferenceContainer>
     </SubContainer>
   );

packages/common/src/templates/configuration/prettierRC/ui.tsx

@@ -152,6 +152,19 @@ export class ConfigWizard extends React.Component<ConfigurationUIProps> {
             line instead of being alone on the next line.
           </ConfigDescription>
         </PaddedConfig>
+        <PaddedConfig>
+          <ConfigItem>
+            <PaddedPreference
+              title="Arrow Function Parentheses"
+              type="dropdown"
+              options={['avoid', 'always']}
+              {...this.bindValue(parsedFile, 'arrowParens')}
+            />
+          </ConfigItem>
+          <ConfigDescription>
+            Include parentheses around a sole arrow function parameter.
+          </ConfigDescription>
+        </PaddedConfig>
       </div>
     );
   }