formatting src jsx

Author: bahmutov

.vscode/settings.json

@@ -2,5 +2,6 @@
  "git.ignoreLimitWarning": true,
  "eslint.enable": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
- "editor.formatOnSave": true
+ "editor.formatOnSave": true,
+ "editor.formatOnPaste": false
 }

package.json

@@ -13,7 +13,8 @@
  "watch": "tsc -w",
  "pretest": "npm run lint && npm run transpile",
  "lint": "standard --verbose --fix *.js src cypress/integration",
- "semantic-release": "semantic-action pre && npm run transpile && npm publish && semantic-action post"
+ "semantic-release": "semantic-action pre && npm run transpile && npm publish && semantic-action post",
+ "format": "prettier --write 'src/*.jsx' 'integration/**/*.js(x)'"
  },
  "files": [
  "dist",

src/Button.jsx

@@ -2,15 +2,15 @@ import React from 'react'
 import './Button.css'
 
 export class Button extends React.Component {
- handleClick () {
+ handleClick() {
  this.props.clickHandler(this.props.name)
  }
 
- render () {
+ render() {
  const className = [
  'component-button',
  this.props.orange ? 'orange' : '',
- this.props.wide ? 'wide' : ''
+ this.props.wide ? 'wide' : '',
  ]
 
  return (
@@ -20,4 +20,3 @@ export class Button extends React.Component {
  )
  }
 }
-

src/CssInJsComponent.jsx

@@ -1,20 +1,20 @@
 // https://emotion.sh/docs/introduction
 /** @jsx jsx */
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from '@emotion/core'
 
 // several Emotion examples
 
 export const Emotion = () => {
  return (
  <div
  css={{
- color: "hotpink"
+ color: 'hotpink',
  }}
  >
  Emotion 😈
  </div>
- );
-};
+ )
+}
 
 export const Emotion2 = () => {
  return (

src/counter-with-hooks.jsx

@@ -1,17 +1,18 @@
-import React from "react";
+import React from 'react'
 
 export default function CounterWithHooks({ initialCount = 0 }) {
- const [count, setCount] = React.useState(initialCount);
+ const [count, setCount] = React.useState(initialCount)
 
  const handleCountIncrement = React.useCallback(() => {
- setCount(count + 1);
- }, [count]);
+ setCount(count + 1)
+ }, [count])
 
  return (
  <>
  <div className="counter">{count}</div>
- <button id="increment" onClick={handleCountIncrement}>+</button>
+ <button id="increment" onClick={handleCountIncrement}>
+ +
+ </button>
  </>
- );
+ )
 }
-

src/counter.jsx

@@ -1,20 +1,20 @@
-import React from "react";
+import React from 'react'
 
 export class Counter extends React.Component {
  constructor(props) {
- super(props);
+ super(props)
  this.state = {
- count: 0
- };
+ count: 0,
+ }
  }
 
  click = () => {
  this.setState({
- count: this.state.count + 1
- });
- };
+ count: this.state.count + 1,
+ })
+ }
 
  render() {
- return <p onClick={this.click}>count: {this.state.count}</p>;
+ return <p onClick={this.click}>count: {this.state.count}</p>
  }
 }

src/counter2-with-hooks.jsx

@@ -1,12 +1,12 @@
 // example from https://reactjs.org/docs/hooks-overview.html
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react'
 
 export default function Counter2WithHooks() {
- const [count, setCount] = useState(0);
+ const [count, setCount] = useState(0)
 
  useEffect(() => {
- document.title = `You clicked ${count} times`;
- });
+ document.title = `You clicked ${count} times`
+ })
 
  return (
  <div>
@@ -15,5 +15,5 @@ export default function Counter2WithHooks() {
  Click me
  </button>
  </div>
- );
+ )
 }

src/error-boundary.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 
 export class ErrorBoundary extends React.Component {
- constructor (props) {
+ constructor(props) {
  super(props)
  this.state = { error: null, info: '' }
  }
 
- static getDerivedStateFromError (error) {
+ static getDerivedStateFromError(error) {
  console.error(error)
  return { error }
  }
@@ -15,12 +15,12 @@ export class ErrorBoundary extends React.Component {
  // Catch errors in any components below and re-render with error message
  this.setState({
  error: error,
- info: errorInfo
+ info: errorInfo,
  })
  // You can also log error messages to an error reporting service here
  }
 
- render () {
+ render() {
  const { name } = this.props
  const { error } = this.state
  if (error) {

src/forward-ref.jsx

@@ -1,5 +1,9 @@
-import React from 'react';
+import React from 'react'
 
-const Button = React.forwardRef(({ children, ...rest }, ref) => <button {...rest} ref={ref}>{children}</button>);
+const Button = React.forwardRef(({ children, ...rest }, ref) => (
+ <button {...rest} ref={ref}>
+ {children}
+ </button>
+))
 
-export default Button;
+export default Button

src/hello-world.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export class HelloWorld extends React.Component {
- render () {
+ render() {
  return <p>Hello World!</p>
  }
 }