feat: add typescript-eslint, typescript-version

Author: yeonjuan

package-lock.json

@@ -30,17 +30,18 @@
   },
   "homepage": "https://github.com/yeonjuan/typescript-eslint-demo#readme",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.4.0",
-    "@typescript-eslint/parser": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "4.4.0",
+    "@typescript-eslint/parser": "4.4.0",
     "bootstrap": "^4.5.2",
     "codemirror": "^5.58.1",
     "core-js": "^3.6.5",
     "eslint": "^7.10.0",
     "esquery": "^1.3.1",
+    "query-string": "^6.13.5",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
     "react-dom": "^16.13.1",
-    "typescript": "^4.0.3"
+    "typescript": "4.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",

package.json

@@ -1,9 +1,17 @@
 import React from "react";
 import type { FC } from "react";
 import "@/css/header.css";
+import pkgJson from "../../package.json";
 
 export const Header: FC = () => (
   <header>
     <h2 style={{ color: "#666" }}>TypeScript ESlint Demo</h2>
+    <ul className="versions">
+      <li>
+        TypeScript-ESLint v
+        {pkgJson.dependencies["@typescript-eslint/eslint-plugin"]}
+      </li>
+      <li>TypeScript v{pkgJson.dependencies["typescript"]}</li>
+    </ul>
   </header>
 );

src/components/Header.tsx

@@ -3,6 +3,11 @@ header {
 }
 
 header h2 {
+  display: inline;
   margin: 0 0 10px;
   padding: 0;
 }
+
+.versions {
+  float: right;
+}

src/css/header.css

@@ -12,7 +12,8 @@
       "@/*": ["./src/*"]
     },
     "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
   },
   "exclude": ["node_modules"]
 }