Add more ESLint rules and change the formatting scripts (#626)

* Add curly rule in ESLint for consistency

* Fix rules

* More rules

* REturn

* Push

* no else return

* prefer const

* destructing

src/components/ColorPicker.tsx

@@ -109,7 +109,9 @@ const Picker = function({
         <div
           className="colors-gallery"
           ref={el => {
-            if (el) gallery.current = el;
+            if (el) {
+              gallery.current = el;
+            }
           }}
         >
           {colors.map((_color, i) => (
@@ -124,8 +126,12 @@ const Picker = function({
               style={{ backgroundColor: _color }}
               key={_color}
               ref={el => {
-                if (el && i === 0) firstItem.current = el;
-                if (el && _color === color) activeItem.current = el;
+                if (el && i === 0) {
+                  firstItem.current = el;
+                }
+                if (el && _color === color) {
+                  activeItem.current = el;
+                }
               }}
               onFocus={() => {
                 onChange(_color);
@@ -186,7 +192,7 @@ const ColorInput = React.forwardRef(
           onChange={e => {
             const value = e.target.value.toLowerCase();
             if (value.match(colorRegex)) {
-              onChange(value === "transparent" ? "transparent" : "#" + value);
+              onChange(value === "transparent" ? "transparent" : `#${value}`);
             }
             setInnerValue(value);
           }}

src/components/ExportDialog.tsx

@@ -178,7 +178,7 @@ function ExportModal({
                     key={s}
                     size="s"
                     type="radio"
-                    icon={"x" + s}
+                    icon={`x${s}`}
                     name="export-canvas-scale"
                     aria-label={`Scale ${s} x`}
                     id="export-canvas-scale"

src/components/FixedSideContainer.tsx

@@ -12,7 +12,7 @@ export function FixedSideContainer({
   side,
 }: FixedSideContainerProps) {
   return (
-    <div className={"FixedSideContainer FixedSideContainer_side_" + side}>
+    <div className={`FixedSideContainer FixedSideContainer_side_${side}`}>
       {children}
     </div>
   );

src/components/Popover.tsx

@@ -26,11 +26,11 @@ export function Popover({
 
       const viewportWidth = window.innerWidth;
       if (x + width > viewportWidth) {
-        element.style.left = viewportWidth - width + "px";
+        element.style.left = `${viewportWidth - width}px`;
       }
       const viewportHeight = window.innerHeight;
       if (y + height > viewportHeight) {
-        element.style.top = viewportHeight - height + "px";
+        element.style.top = `${viewportHeight - height}px`;
       }
     }
   }, [fitInViewport]);
@@ -42,7 +42,9 @@ export function Popover({
         onClick={onCloseRequest}
         onContextMenu={e => {
           e.preventDefault();
-          if (onCloseRequest) onCloseRequest();
+          if (onCloseRequest) {
+            onCloseRequest();
+          }
         }}
       />
       {children}

src/components/ProjectName.tsx

@@ -16,7 +16,9 @@ export class ProjectName extends Component<Props> {
 
   private handleBlur = (e: React.FocusEvent<HTMLElement>) => {
     const value = e.currentTarget.innerText.trim();
-    if (value !== this.props.value) this.props.onChange(value);
+    if (value !== this.props.value) {
+      this.props.onChange(value);
+    }
     removeSelection();
   };
 

src/components/ToolButton.tsx

@@ -35,7 +35,7 @@ export const ToolButton = React.forwardRef(function(
   React.useImperativeHandle(ref, () => innerRef.current);
   const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
 
-  if (props.type === "button")
+  if (props.type === "button") {
     return (
       <button
         className={`ToolIcon_type_button ToolIcon ${sizeCn}`}
@@ -50,6 +50,7 @@ export const ToolButton = React.forwardRef(function(
         </div>
       </button>
     );
+  }
 
   return (
     <label className="ToolIcon" title={props.title}>