➕ (lint) add prettier

Author: an-lee

.prettierignore

@@ -0,0 +1,5 @@
+# Add files here to ignore them from prettier formatting
+
+package.json
+node_modules/**/*
+app/javascript/apps/graphql/**/documents.tsx

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true,
+  "jsxSingleQuote": true,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

app/javascript/apps/application/app.tsx

@@ -1,33 +1,30 @@
-import React from "react";
-import { Layout, Menu } from "antd";
+import { IStyles } from '@/shared';
+import { Layout, Menu } from 'antd';
+import React from 'react';
 
-type IClass = {
-  [className: string]: React.CSSProperties;
-};
-
-const style: IClass = {
+const style: IStyles = {
+  content: {
+    background: '#fff',
+    padding: '1rem',
+  },
+  footer: {
+    textAlign: 'center',
+  },
   menu: {
-    lineHeight: "inherit"
+    lineHeight: 'inherit',
   },
   page: {
-    minHeight: "calc(100vh - 64px)",
-    padding: "1rem"
-  },
-  content: {
-    background: "#fff",
-    padding: "1rem"
+    minHeight: 'calc(100vh - 64px)',
+    padding: '1rem',
   },
-  footer: {
-    textAlign: "center"
-  }
 };
 
 export default function App(_props: any) {
   return (
     <Layout>
       <Layout.Header>
-        <Menu style={style.menu} theme="dark" mode="horizontal">
-          <Menu.Item key="home">Home</Menu.Item>
+        <Menu style={style.menu} theme='dark' mode='horizontal'>
+          <Menu.Item key='home'>Home</Menu.Item>
         </Menu>
       </Layout.Header>
       <Layout style={style.page}>

app/javascript/apps/shared/index.ts

@@ -0,0 +1 @@
+export * from './interfaces';

app/javascript/apps/shared/interfaces.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export interface IStyles {
+  [className: string]: React.CSSProperties;
+}

app/javascript/channels/consumer.js

@@ -1,6 +1,6 @@
 // Action Cable provides the framework to deal with WebSockets in Rails.
 // You can generate new channels where WebSocket features live using the `rails generate channel` command.
 
-import { createConsumer } from "@rails/actioncable"
+import { createConsumer } from '@rails/actioncable';
 
-export default createConsumer()
+export default createConsumer();

app/javascript/channels/index.js

@@ -1,5 +1,5 @@
 // Load all the channels within this directory and all subdirectories.
 // Channel files must be named *_channel.js.
 
-const channels = require.context('.', true, /_channel\.js$/)
-channels.keys().forEach(channels)
+const channels = require.context('.', true, /_channel\.js$/);
+channels.keys().forEach(channels);

app/javascript/packs/application.js

@@ -1,8 +1,8 @@
-require("@rails/ujs").start()
+require('@rails/ujs').start();
 // require("turbolinks").start()
-require("@rails/activestorage").start()
-require("channels")
+require('@rails/activestorage').start();
+require('channels');
 
-const componentRequireContext = require.context("apps/application", true);
-const ReactRailsUJS = require("react_ujs");
+const componentRequireContext = require.context('apps/application', true);
+const ReactRailsUJS = require('react_ujs');
 ReactRailsUJS.useContext(componentRequireContext);

package.json

@@ -1,6 +1,10 @@
 {
   "name": "payin",
   "private": true,
+  "scripts": {
+    "lint": "prettier --write app/**/*.{tsx,ts,js,gql}",
+    "lint-check": "prettier --check app/**/*.{tsx,ts,js,gql}"
+  },
   "dependencies": {
     "@babel/preset-react": "^7.8.3",
     "@rails/actioncable": "^6.0.0",
@@ -25,6 +29,7 @@
   },
   "version": "0.1.0",
   "devDependencies": {
+    "prettier": "^1.19.1",
     "webpack-dev-server": "^3.10.3"
   }
 }

tsconfig.json

@@ -1,21 +1,22 @@
 {
+  "typeRoots": ["app/javascript/apps/types", "./node_modules/@types"],
   "compilerOptions": {
+    "rootDir": ".",
     "allowSyntheticDefaultImports": true,
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": ["es6", "dom"],
-    "module": "es6",
+    "lib": ["es6", "dom", "dom.iterable", "esnext"],
+    "module": "esnext",
     "moduleResolution": "node",
     "sourceMap": true,
     "target": "es5",
-    "jsx": "react"
+    "jsx": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["app/javascript/apps/*"]
+    }
   },
-  "exclude": [
-    "**/*.spec.ts",
-    "node_modules",
-    "vendor",
-    "public"
-  ],
+  "exclude": ["**/*.spec.ts", "node_modules", "vendor", "public"],
   "compileOnSave": false
 }