Add ESLint with basic rules

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/vue3-essential"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "parser": "@typescript-eslint/parser",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "vue"
+  ],
+  "rules": {
+    "indent": [
+      "error",
+      2
+    ],
+    "linebreak-style": 0,
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "never"
+    ]
+  }
+}

package.json

@@ -20,9 +20,13 @@
   "devDependencies": {
     "@types/node": "^18.11.12",
     "@types/tryghost__content-api": "1.3.11",
+    "@typescript-eslint/eslint-plugin": "6.7.5",
+    "@typescript-eslint/parser": "6.7.5",
     "@vicons/fluent": "0.12.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/tsconfig": "^0.1.3",
+    "eslint": "8.51.0",
+    "eslint-plugin-vue": "9.17.0",
     "naive-ui": "2.34.3",
     "npm-run-all": "^4.1.5",
     "typescript": "~4.7.4",

src/components/LastFourGamesBattingTable.vue

@@ -35,6 +35,7 @@
           </tr>
         </thead>
         <tbody id="last4-batting">
+          <!-- eslint-disable-next-line vue/require-v-for-key -->
           <tr v-for="gameStat in last4GamesBatting">
             <td>{{ makeWxGyFromGame(gameStat.game) }}</td>
             <td>{{ gameStat.pa }}</td>
@@ -85,7 +86,7 @@ interface MinimalAggregateFieldingStat {
 }
 
 export default {
-  name: "LastFourGamesBattingTable",
+  name: 'LastFourGamesBattingTable',
   props: {
     last4GamesBatting: { type: Array<BattingStat>, required: true },
     last4GamesFielding: { type: Array<FieldingStat>, required: true }

src/components/LastFourGamesPitchingTable.vue

@@ -25,6 +25,7 @@
           </tr>
         </thead>
         <tbody id="last4-pitching">
+          <!-- eslint-disable-next-line vue/require-v-for-key -->
           <tr v-for="gameStat in last4GamesPitching">
             <td>{{ makeWxGyFromGame(gameStat.game) }}</td>
             <td>{{ gameStat.win }}</td>
@@ -56,7 +57,7 @@ import type { PitchingStat } from '@/services/pitchingStatsService'
 import { outsToInnings } from '@/services/utilities'
 
 export default {
-  name: "LastFourGamesPitchingTable",
+  name: 'LastFourGamesPitchingTable',
   props: {
     last4GamesPitching: { type: Array<PitchingStat>, required: true }
   },

src/components/NavBar.vue

@@ -41,7 +41,7 @@
       <form class="form-inline" @submit.stop.prevent="searchPlayers">
         <input type="text" name="name" placeholder="Player Search" list="player-names" v-model="searchPlayerName">
         <datalist id="player-names">
-          <option v-for=" name  in  sortedPlayerNames " :value="name">{{ name }}</option>
+          <option v-for="name in sortedPlayerNames" :key="name" :value="name">{{ name }}</option>
         </datalist>
       </form>
 
@@ -77,13 +77,16 @@ import { fetchPlayers, type Player } from '@/services/playersService'
 import { CURRENT_SEASON } from '@/services/utilities'
 import type { Team } from '@/services/apiResponseTypes'
 import { fetchActiveTeamByOwnerId } from '@/services/teamsService'
-import { authenticate, clearCookie, completeAuthentication, getOwnerId, isDiscordAuthenticated, parseCookie } from '@/services/authenticationService'
+import { authenticate, clearCookie, completeAuthentication, getOwnerId, isDiscordAuthenticated } from '@/services/authenticationService'
 
 export default {
   name: 'NavBar',
+  components: {
+    RouterLink
+  },
   data() {
     return {
-      isAuthenticated: false as Boolean,
+      isAuthenticated: false as boolean,
       userTeam: undefined as Team | undefined,
       players: [] as Player[],
       searchPlayerName: undefined
@@ -282,7 +285,7 @@ export default {
       ]
     },
     sortedPlayerNames(): string[] {
-      return this.players.sort((p1, p2) => p2.wara - p1.wara).map(p => p.name)
+      return [...this.players].sort((p1, p2) => p2.wara - p1.wara).map(p => p.name)
     },
     ownerId(): string | undefined {
       return getOwnerId()

src/components/TeamScheduleTable.vue

@@ -22,7 +22,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="row in firstHalfRows">
+              <tr v-for="row in firstHalfRows" :key="row.week">
                 <td>{{ row.week }}</td>
                 <td>
                   <RouterLink
@@ -64,7 +64,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="row in secondHalfRows">
+              <tr v-for="row in secondHalfRows" :key="row.week">
                 <td>{{ row.week }}</td>
                 <td>
                   <RouterLink
@@ -108,7 +108,7 @@ interface ScheduleRow {
 }
 
 export default {
-  name: "TeamScheduleTable",
+  name: 'TeamScheduleTable',
   data() {
     return {
       schedule: [] as Game[]

src/router/index.ts

@@ -44,21 +44,21 @@ export const routes: RouteRecordRaw[] = [
   },
 ]
 
-function castTeamsRouteParams(route: any) {
+function castTeamsRouteParams(route: { params: { teamAbbreviation: string, seasonNumber: string } }) {
   return {
     teamAbbreviation: route.params.teamAbbreviation,
     seasonNumber: Number(route.params.seasonNumber)
   }
 }
 
-function castPlayersRouteParams(route: any) {
+function castPlayersRouteParams(route: { params: { playerName: string, seasonNumber: string } }) {
   return {
     playerName: route.params.playerName,
     seasonNumber: Number(route.params.seasonNumber)
   }
 }
 
-function castScheduleRouteParams(route: any) {
+function castScheduleRouteParams(route: { params: { seasonNumber: string, weekNumber: string } }) {
   return {
     seasonNumber: Number.isNaN(Number.parseInt(route.params.seasonNumber)) ? undefined : Number(route.params.seasonNumber),
     weekNumber: Number.isNaN(Number.parseInt(route.params.weekNumber)) ? undefined : Number(route.params.weekNumber)

src/services/apiResponseTypes.ts

@@ -1,19 +1,19 @@
 export interface Team {
   abbrev: string
-  auto_draft: any
+  // auto_draft: any
   color: string // hex code
   dice_color: string // hex code
   division: Division
-  division_legacy: any
+  // division_legacy: any
   gmid: number
   gmid2: number
-  gsheet: any
+  // gsheet: any
   id: number
   lname: string
   manager1: Manager
   manager2: Manager
-  manager_legacy: any
+  // manager_legacy: any
-  mascot: any
+  // mascot: any
   season: number
   sname: string
   stadium: string

src/services/authenticationService.ts

@@ -67,5 +67,5 @@ export function saveOwnerIdCookie(ownerId: string): void {
 }
 
 export function clearCookie(): void {
-  document.cookie = "discord=;-1;path=/"
+  document.cookie = 'discord=;-1;path=/'
 }

src/services/battingStatsService.ts

@@ -137,7 +137,7 @@ export async function fetchBattingStatsForLastFourGamesBySeasonAndPlayerId(seaso
 }
 
 export function aggregateBattingStats(battingStats: BattingStat[]): BattingStat {
-  let totalStat: BattingStat = {
+  const totalStat: BattingStat = {
     player: battingStats[0].player,
     team: battingStats[0].team,
     game: 'TOT',

src/services/fieldingStatsService.ts

@@ -28,16 +28,16 @@ interface FieldingStatRaw {
   player: Player
   team: Team
   pos: 'P' | 'C' | '1B' | '2B' | '3B' | 'SS' | 'LF' | 'CF' | 'RF' | 'TOT'
-  "x-ch": number
+  'x-ch': number
   hit: number
   error: number
-  "sb-ch": number
+  'sb-ch': number
   sb: number
   cs: number
   pb: number
   wpa: number
-  "wf%": number
+  'wf%': number
-  "cs%": number | ''
+  'cs%': number | ''
 }
 
 interface LegacyFieldingStat {
@@ -166,7 +166,7 @@ export function aggregateFieldingStats(fieldingStats: FieldingStat[]): FieldingS
 export function totaledFieldingStats(fieldingStats: FieldingStat[]): FieldingStat | undefined {
   if (fieldingStats.length === 0) return undefined
 
-  let totalStat: FieldingStat = {
+  const totalStat: FieldingStat = {
     game: 'TOT',
     player: fieldingStats[0].player,
     team: fieldingStats[0].team,

src/services/gameService.ts

@@ -3,7 +3,7 @@ import { MODERN_STAT_ERA_START, SITE_URL } from './utilities'
 
 export async function fetchGamesBySeasonAndTeamId(seasonNumber: number, teamId: number): Promise<Game[]> {
   if (seasonNumber < MODERN_STAT_ERA_START) {
-    console.warn(`Cannot use games endpoint to fetch stats before season 8`)
+    console.warn('Cannot use games endpoint to fetch stats before season 8')
     return []
   }
 
@@ -19,7 +19,7 @@ export async function fetchGamesBySeasonAndTeamId(seasonNumber: number, teamId:
 
 export async function fetchGamesBySeasonAndWeek(seasonNumber: number, weekNumber: number): Promise<Game[]> {
   if (seasonNumber < MODERN_STAT_ERA_START) {
-    console.warn(`Cannot use games endpoint to fetch stats before season 8`)
+    console.warn('Cannot use games endpoint to fetch stats before season 8')
     return []
   }
 

src/services/newsService.ts

@@ -29,7 +29,7 @@ export async function getPosts() {
   const newsApi = new GhostContentAPI({
     url: 'https://sbanews.manticorum.com',
     key: '37abf30917ce55d6d9155b537d',
-    version: "v5.0"
+    version: 'v5.0'
   })
 
   const posts: PostsOrPages = await newsApi.posts.browse({

src/services/pitchingStatsService.ts

@@ -1,6 +1,6 @@
 import type { Game, Team } from './apiResponseTypes'
 import type { Player } from './playersService'
-import { MODERN_STAT_ERA_START, SITE_URL, avg, obp, ops, slg, woba } from './utilities'
+import { MODERN_STAT_ERA_START, SITE_URL, avg, slg, woba } from './utilities'
 
 // TODO make a stats object that has properties for current regular season, current post season, 
 // last 4 games, historical seasons, career totals
@@ -101,9 +101,9 @@ interface PitchingStatRaw {
   slg: number
   ops: number
   woba: number
-  "k/9": number
+  'k/9': number
-  "bb/9": number
+  'bb/9': number
-  "k/bb": number
+  'k/bb': number
 }
 
 interface LegacyPitchingStat {
@@ -203,7 +203,7 @@ export async function fetchPitchingStatsForLastFourGamesBySeasonAndPlayerId(seas
 }
 
 export function aggregatePitchingStats(pitchingStats: PitchingStat[]): PitchingStat {
-  let totalStat: PitchingStat = {
+  const totalStat: PitchingStat = {
     player: pitchingStats[0].player,
     team: pitchingStats[0].team,
     game: 'TOT',
@@ -254,38 +254,38 @@ export function aggregatePitchingStats(pitchingStats: PitchingStat[]): PitchingS
   }
 
   pitchingStats.forEach(stat => {
-    totalStat.tbf += stat.tbf,
+    totalStat.tbf += stat.tbf
-      totalStat.outs += stat.outs,
+    totalStat.outs += stat.outs
-      totalStat.games += stat.games,
+    totalStat.games += stat.games
-      totalStat.gs += stat.gs,
+    totalStat.gs += stat.gs
-      totalStat.win += stat.win,
+    totalStat.win += stat.win
-      totalStat.loss += stat.loss,
+    totalStat.loss += stat.loss
-      totalStat.hold += stat.hold,
+    totalStat.hold += stat.hold
-      totalStat.save += stat.save,
+    totalStat.save += stat.save
-      totalStat.bsave += stat.bsave,
+    totalStat.bsave += stat.bsave
-      totalStat.ir += stat.ir,
+    totalStat.ir += stat.ir
-      totalStat.ir_sc += stat.ir_sc,
+    totalStat.ir_sc += stat.ir_sc
-      totalStat.ab += stat.ab,
+    totalStat.ab += stat.ab
-      totalStat.run += stat.run,
+    totalStat.run += stat.run
-      totalStat.e_run += stat.e_run,
+    totalStat.e_run += stat.e_run
-      totalStat.hits += stat.hits,
+    totalStat.hits += stat.hits
-      totalStat.double += stat.double,
+    totalStat.double += stat.double
-      totalStat.triple += stat.triple,
+    totalStat.triple += stat.triple
-      totalStat.hr += stat.hr,
+    totalStat.hr += stat.hr
-      totalStat.bb += stat.bb,
+    totalStat.bb += stat.bb
-      totalStat.so += stat.so,
+    totalStat.so += stat.so
-      totalStat.hbp += stat.hbp,
+    totalStat.hbp += stat.hbp
-      totalStat.sac += stat.sac,
+    totalStat.sac += stat.sac
-      totalStat.ibb += stat.ibb,
+    totalStat.ibb += stat.ibb
-      totalStat.gidp += stat.gidp,
+    totalStat.gidp += stat.gidp
-      totalStat.sb += stat.sb,
+    totalStat.sb += stat.sb
-      totalStat.cs += stat.cs,
+    totalStat.cs += stat.cs
-      totalStat.bphr += stat.bphr,
+    totalStat.bphr += stat.bphr
-      totalStat.bpfo += stat.bpfo,
+    totalStat.bpfo += stat.bpfo
-      totalStat.bp1b += stat.bp1b,
+    totalStat.bp1b += stat.bp1b
-      totalStat.bplo += stat.bplo,
+    totalStat.bplo += stat.bplo
-      totalStat.wp += stat.wp,
+    totalStat.wp += stat.wp
-      totalStat.balk += stat.balk,
+    totalStat.balk += stat.balk
     totalStat.wpa += stat.wpa
   })
 
@@ -410,9 +410,9 @@ function normalizePitchingStat(rawStat: PitchingStatRaw): PitchingStat {
     slg: rawStat.slg,
     ops: rawStat.ops,
     woba: rawStat.woba,
-    kPer9: rawStat["k/9"],
+    kPer9: rawStat['k/9'],
-    bbPer9: rawStat["bb/9"],
+    bbPer9: rawStat['bb/9'],
-    kPerBB: rawStat["k/bb"]
+    kPerBB: rawStat['k/bb']
   }
 }
 

src/services/playersService.ts

@@ -4,9 +4,9 @@ import { SITE_URL } from './utilities'
 export interface Player {
   bbref_id: string
   demotion_week: number
-  headshot: any
+  headshot: string //url
   id: number
-  il_return: any
+  il_return: string
   image: string
   image2: string
   injury_rating: string //could strongly type as XpYY

src/views/HomeView.vue

@@ -50,7 +50,7 @@ import { CURRENT_SEASON } from '@/services/utilities'
 import { getPosts, type NewsPost } from '@/services/newsService'
 
 export default {
-  name: "HomeView",
+  name: 'HomeView',
   components: {
     StandingsTable,
     NewsPreview

src/views/ManagerView.vue

@@ -107,7 +107,7 @@
 <script lang="ts">
 
 export default {
-  name: "ManagerView",
+  name: 'ManagerView',
   props: {
     managerName: { type: String, required: true },
   }

src/views/PlayerView.vue

@@ -100,7 +100,7 @@
                 </tr>
               </thead>
               <tbody id="transactions-table">
-                <tr v-for="transaction in transactions">
+                <tr v-for="transaction in transactions" :key="transaction.id">
                   <td>{{ transaction.season }}</td>
                   <td>{{ transaction.week }}</td>
                   <td>{{ transaction.player.name }}</td>
@@ -125,7 +125,7 @@
                 </tr>
               </thead>
               <tbody id="team-awards">
-                <tr v-for="award in awards">
+                <tr v-for="award in awards" :key="award.id">
                   <td>{{ award.season }}</td>
                   <td>{{ award.name }}</td>
                   <td>{{ award.player?.name }}</td>
@@ -164,7 +164,7 @@ import { fetchTransactionsForCurrentSeasonByPlayerName, type Transaction } from
 import { fetchAwardsByPlayerName, type Award } from '@/services/awardsService'
 
 export default {
-  name: "PlayerView",
+  name: 'PlayerView',
   data() {
     return {
       isAuthenticated: false,

src/views/RulesView.vue

@@ -26,6 +26,6 @@
 
 <script lang="ts">
 export default {
-  name: "RulesView",
+  name: 'RulesView',
 }
 </script>

src/views/ScheduleView.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable indent -->
 <template>
   <div class="schedule-view">
 
@@ -13,7 +14,7 @@
           </div>
           <!-- Matchups -->
           <div class="row">
-            <div v-for="matchup in gamesGroupedByMatchup" class="col-sm-auto">
+            <div v-for="(matchup, index) in gamesGroupedByMatchup" :key="index" class="col-sm-auto">
               <div class="table-responsive-sm" style="text-align: center">
                 <table class="table table-sm table-striped">
                   <thead class="thead-dark">
@@ -24,7 +25,7 @@
                     </tr>
                   </thead>
                   <tbody id="matchup-1">
-                    <tr v-for="game in matchup">
+                    <tr v-for="game in matchup" :key="game.id">
                       <td>
                         <RouterLink
                           :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: game.away_team.abbrev } }">
@@ -80,7 +81,7 @@
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="weekNumber in 21">
+                  <tr v-for="weekNumber in 21" :key="weekNumber">
                     <td>
                       <RouterLink
                         :to="{ name: 'schedule', params: { seasonNumber: seasonNumber, weekNumber: weekNumber } }">
@@ -133,7 +134,7 @@ dayjs.extend(customParseFormat)
 const SEASON_START_DATE: dayjs.Dayjs = dayjs('07-31-2023', 'MM/DD/YYYY')
 
 export default {
-  name: "ScheduleView",
+  name: 'ScheduleView',
   data() {
     return {
       currentWeekNumber: 0,
@@ -204,27 +205,17 @@ export default {
       return SEASON_START_DATE.add((weekNumber * 7) - 1, 'd').format('MM/DD/YYYY')
     },
     weekSpecialInfo(weekNumber: number): string {
-      switch (weekNumber) {
+      if (weekNumber === 1) return 'Spring Begins'
-        case 1:
+      if (weekNumber === 6) return 'Summer Begins'
-          return 'Spring Begins'
+      if (weekNumber === 14) return 'Trade Deadline'
-        case 6:
+      if (weekNumber === 15) return 'Fall Begins'
-          return 'Summer Begins'
+      if (weekNumber === 18) return 'Regular Season Ends'
-        case 14:
+      if (weekNumber === 19) return 'Division Series - Best of 5'
-          return 'Trade Deadline'
+      if (weekNumber === 20) return 'League Championship Series - Best of 7'
-        case 15:
+      if (weekNumber === 21) return 'World Series Best of 7'
-          return 'Fall Begins'
+
-        case 18:
-          return 'Regular Season Ends'
-        case 19:
-          return 'Division Series - Best of 5'
-        case 20:
-          return 'League Championship Series - Best of 7'
-        case 21:
-          return 'World Series Best of 7'
-        default:
       return ''
     }
   }
 }
-}
 </script>

src/views/StandingsView.vue

@@ -51,7 +51,10 @@ import { fetchCurrentLeagueInfo, type LeagueInfo } from '@/services/currentServi
 import { CURRENT_SEASON } from '@/services/utilities'
 
 export default {
-  name: "StandingsView",
+  name: 'StandingsView',
+  components: {
+    StandingsTable
+  },
   data() {
     return {
       seasonNumber: CURRENT_SEASON as number,

src/views/TeamView.vue

@@ -45,7 +45,7 @@
               </tr>
             </thead>
             <tbody id="active-roster">
-              <tr v-for="player in sortedPlayers(players)">
+              <tr v-for="player in sortedPlayers(players)" :key="player.id">
                 <td>{{ player.pos_1 }}</td>
                 <td :title="player.il_return ? `Injured until ${player.il_return}` : ''">
                   {{ player.il_return ? '🏥' : '' }}
@@ -89,7 +89,7 @@
               </tr>
             </thead>
             <tbody id="minors-roster">
-              <tr v-for="player in sortedPlayers(playersMinors)">
+              <tr v-for="player in sortedPlayers(playersMinors)" :key="player.id">
                 <td>{{ player.pos_1 }}</td>
                 <td>
                   <RouterLink :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: player.name } }">
@@ -116,7 +116,7 @@
               </tr>
             </thead>
             <tbody id="short-il-roster">
-              <tr v-for="player in sortedPlayers(playersInjuredList)">
+              <tr v-for="player in sortedPlayers(playersInjuredList)" :key="player.id">
                 <td>{{ player.pos_1 }}</td>
                 <td>
                   <RouterLink :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: player.name } }">
@@ -144,7 +144,7 @@
               </tr>
             </thead>
             <tbody id="transactions-body"></tbody>
-            <tr v-for="row in transactionRows">
+            <tr v-for="row in transactionRows" :key="row.week">
               <td>{{ row.week }}</td>
               <td>{{ row.playerName }}</td>
               <td>{{ row.oldTeam }}</td>
@@ -193,7 +193,7 @@ import TeamBattingTable from '@/components/TeamBattingTable.vue'
 import TeamFieldingTable from '@/components/TeamFieldingTable.vue'
 
 export default {
-  name: "TeamView",
+  name: 'TeamView',
   components: {
     TeamScheduleTable,
     TeamPitchingTable,
@@ -309,7 +309,7 @@ export default {
     allPositions(player: Player): string {
       let positions = []
       positions.push(player.pos_1, player.pos_2, player.pos_3, player.pos_4, player.pos_5, player.pos_6, player.pos_7)
-      return positions.join(" ")
+      return positions.join(' ')
     },
     swarTotal(players: Player[]): number {
       return players.map(p => p.wara).reduce((prev, curr) => prev + curr, 0)