setup linter for typescript

.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+};

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "none"
+}

Makefile

@@ -9,3 +9,7 @@ docs:
 
 publish:
 	nix-shell --run 'cd docs && mdbook build'
+
+lint:
+	./node_modules/.bin/prettier --check web/src
+	./node_modules/.bin/eslint web/src --ext .js,.jsx,.ts,.tsx

package.json

@@ -14,6 +14,12 @@
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "nodemon": "^2.0.15"
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "eslint": "^8.15.0",
+    "eslint-config-prettier": "^8.5.0",
+    "nodemon": "^2.0.15",
+    "prettier": "2.6.2",
+    "typescript": "^4.6.4"
   }
 }

web/src/allocation.ts

@@ -1,5 +1,4 @@
 import * as d3 from "d3";
-import { group } from "d3";
 import legend from "d3-svg-legend";
 import dayjs from "dayjs";
 import _ from "lodash";
@@ -221,7 +220,7 @@ function renderAllocationTimeline(
     .attr("class", "legendOrdinal")
     .attr("transform", "translate(40,0)");
 
-  var legendOrdinal = legend
+  const legendOrdinal = legend
     .legendColor()
     .shape("rect")
     .orient("horizontal")

web/src/gain.ts

@@ -62,7 +62,7 @@ const lineScale = d3
 function renderTable(gain: Gain) {
   const tbody = d3.select(this);
   const current = _.last(gain.overview_timeline);
-  tbody.html(function (d) {
+  tbody.html(function () {
     return `
 <tr>
   <td>Account</td>
@@ -120,7 +120,7 @@ function renderOverviewSmall(
       ]),
     z = d3.scaleOrdinal<string>(colors).domain(areaKeys);
 
-  let area = (y0, y1) =>
+  const area = (y0, y1) =>
     d3
       .area<Overview>()
       .curve(d3.curveBasis)

web/src/investment.ts

@@ -80,7 +80,7 @@ function renderInvestmentTimeline(
     end = dayjs().startOf("month");
   const ts = _.groupBy(postings, (p) => p.timestamp.format(timeFormat));
 
-  let points: {
+  const points: {
     date: dayjs.Dayjs;
     month: string;
     [key: string]: number | string | dayjs.Dayjs;
@@ -162,7 +162,7 @@ function renderInvestmentTimeline(
       d3
         .axisBottom(x)
         .ticks(5)
-        .tickFormat(skipTicks(30, width, points.length, (d, i) => d.toString()))
+        .tickFormat(skipTicks(30, width, points.length, (d) => d.toString()))
     )
     .selectAll("text")
     .attr("y", 10)
@@ -227,7 +227,7 @@ function renderInvestmentTimeline(
     .attr("class", "legendOrdinal")
     .attr("transform", "translate(40,0)");
 
-  var legendOrdinal = legend
+  const legendOrdinal = legend
     .legendColor()
     .shape("rect")
     .orient("horizontal")

web/src/ledger.ts

@@ -92,8 +92,7 @@ function renderBreakdowns(breakdowns: Breakdown[]) {
     .append("tr")
     .merge(trs as any)
     .html((b) => {
-      let changePercentage = 0,
-        changeClass = "";
+      let changeClass = "";
 
       const gain = b.market_amount + b.withdrawal_amount - b.investment_amount;
       if (gain > 0) {
@@ -101,7 +100,6 @@ function renderBreakdowns(breakdowns: Breakdown[]) {
       } else if (gain < 0) {
         changeClass = "has-text-danger";
       }
-      changePercentage = 0;
       const indent = _.repeat("&emsp;&emsp;", depth(b.group) - 1);
       return `
        <td style='max-width: 200px; overflow: hidden;'>${indent}${lastName(

web/src/overview.ts

@@ -1,5 +1,4 @@
 import * as d3 from "d3";
-import { ContainerElement } from "d3";
 import legend from "d3-svg-legend";
 import dayjs from "dayjs";
 import _ from "lodash";
@@ -65,7 +64,7 @@ function renderOverview(points: Overview[], element: Element) {
       ]),
     z = d3.scaleOrdinal<string>(colors).domain(areaKeys);
 
-  let area = (y0, y1) =>
+  const area = (y0, y1) =>
     d3
       .area<Overview>()
       .curve(d3.curveBasis)

web/src/utils.ts

@@ -1,5 +1,4 @@
 import dayjs from "dayjs";
-import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
 import { sprintf } from "sprintf-js";
 import _ from "lodash";
 import * as d3 from "d3";
@@ -161,7 +160,7 @@ export function skipTicks(
 }
 
 export function setHtml(selector: string, value: string) {
-  var node = document.querySelector(".d3-" + selector);
+  const node = document.querySelector(".d3-" + selector);
   node.innerHTML = value;
 }