整理前端代码风格

frontend/.eslintrc.js

@@ -0,0 +1,79 @@
+module.exports = {
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "parser": "babel-eslint"
+  },
+  "extends": [
+    "plugin:vue/essential",
+    "eslint:recommended"
+  ],
+  "rules": {
+    "array-bracket-spacing": ["error", "never"], // 数组括号内不加空格
+    "arrow-parens": ["error", "as-needed"], // 箭头函数单个参数不加括号
+    "arrow-spacing": "error", // 箭头前后加空格
+    "block-spacing": "error", // 块大括号内加空格
+    "brace-style": "error", // 大括号不独占一行
+    "comma-spacing": "error", // 逗号前面不加空格，后面加空格
+    "comma-style": "error", // 逗号在语句后面而不是下一条的前面
+    "computed-property-spacing": "error", // 计算属性名前后不加空格
+    "curly": "error", // 禁止省略大括号
+    "dot-notation": "error", // 使用点访问成员
+    "eol-last": "error", // 文件末尾加换行符
+    "func-call-spacing": "error", // 调用函数名和括号间不加空格
+    "func-style": ["error", "declaration", { "allowArrowFunctions": true }], // 使用函数定义语法，而不是把函数表达式赋值到变量
+    "indent": ["error", 2], // 缩进2空格
+    "key-spacing": ["error", { "mode": "minimum" }],
+    "keyword-spacing": "error", // 关键词前后加空格
+    "lines-between-class-members": "error", // 类成员定义间加空格
+    "max-lines-per-function": ["error", 150], // 每个函数最多行数
+    "max-nested-callbacks": ["error", 3], // 每个函数最多嵌套回调数
+    "new-parens": "error", // new调用构造函数加空格
+    "no-array-constructor": "error", // 使用数组字面量，而不是数组构造函数
+    "no-floating-decimal": "error", // 禁止省略浮点数首尾的0
+    "no-implicit-coercion": "error", // 禁止隐式转换
+    "no-empty": ["error", { "allowEmptyCatch": true }], // 禁止空的块，除了catch
+    "no-extra-parens": ["error", "all", { "nestedBinaryExpressions": false }], // 禁止多余的括号
+    "no-labels": "error", // 禁止使用标签
+    "no-lone-blocks": "error", // 禁止没用的块
+    "no-mixed-operators": "error", // 禁止混用不同优先级的操作符而不加括号
+    "no-multi-spaces": ["error", { "ignoreEOLComments": true }], // 禁止多个空格，除了行尾注释前
+    "no-multiple-empty-lines": "error", // 最多2个连续空行
+    "no-nested-ternary": "error", // 禁止嵌套三元表达式
+    "no-sequences": "error", // 禁止使用逗号操作符
+    "no-tabs": "error", // 禁止使用tab
+    "no-trailing-spaces": ["error", { "skipBlankLines": true }], // 禁止行尾的空格，除了空行
+    "no-unused-expressions": "error", // 禁止没用的表达式
+    "no-useless-concat": "error", // 禁止没用的字符串连接
+    "no-useless-rename": "error", // 禁止没用的模块导入重命名、解构赋值重命名
+    "no-useless-return": "error", // 禁止没用的return
+    "no-var": "error", // 禁止使用var声明变量
+    "no-void": "error", // 禁止使用void
+    "no-whitespace-before-property": "error", // 禁止访问属性的点前后加空格
+    "object-curly-spacing": ["error", "always"], // 对象字面量括号内加空格
+    "operator-assignment": "error", // 尽量使用+=
+    "operator-linebreak": ["error", "before"], // 操作符放行首
+    "prefer-object-spread": "error", // 使用{...obj}，而不是Object.assign
+    "prefer-rest-params": "error", // 使用...args，而不是arguments
+    "prefer-spread": "error", // 使用func(...args)，而不是apply
+    "prefer-template": "error", // 使用模板字符串，而不是字符串连接
+    "rest-spread-spacing": ["error", "never"], // 解包操作符不加空格
+    "semi": ["error", "never"], // 禁止使用多余的分号
+    "semi-spacing": "error", // 分号前面不加空格，后面加空格
+    "semi-style": "error", // 分号在语句后面而不是下一条的前面
+    "space-before-blocks": "error", // 块大括号前加空格
+    "space-before-function-paren": ["error", "never"], // 函数定义名称和括号间不加空格
+    "space-in-parens": "error", // 括号内不加空格
+    "space-infix-ops": "error", // 二元操作符前后加空格
+    "space-unary-ops": "error", // 关键词一元操作符后加空格，符号一元操作符不加
+    "spaced-comment": ["error", "always", { "block": { "balanced": true } }], // 注释前面加空格
+    "template-curly-spacing": "error", // 模板字符串中变量大括号内不加空格
+
+    "no-shadow": "warn", // 变量名和外部作用域重复
+
+    "no-console": "off", // 线上尽量不要用console输出，看不到的
+  }
+}

frontend/jsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "esnext",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": [
+    "./src/**/*.js",
+    "./src/**/*.vue"
+  ]
+}

frontend/src/api/chat/ChatClientDirect/index.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
-import {BrotliDecode} from './brotli_decode'
-import {getUuid4Hex} from '@/utils'
+import { BrotliDecode } from './brotli_decode'
+import { getUuid4Hex } from '@/utils'
 import * as avatar from '../avatar'
 
 const HEADER_SIZE = 16
@@ -37,18 +37,18 @@ const AUTH_REPLY_CODE_OK = 0
 // const AUTH_REPLY_CODE_TOKEN_ERROR = -101
 
 const HEARTBEAT_INTERVAL = 10 * 1000
-const RECEIVE_TIMEOUT = HEARTBEAT_INTERVAL + 5 * 1000
+const RECEIVE_TIMEOUT = HEARTBEAT_INTERVAL + (5 * 1000)
 
 let textEncoder = new TextEncoder()
 let textDecoder = new TextDecoder()
 
 export default class ChatClientDirect {
-  constructor (roomId) {
+  constructor(roomId) {
     // 调用initRoom后初始化，如果失败，使用这里的默认值
     this.roomId = roomId
     this.roomOwnerUid = 0
     this.hostServerList = [
-      {host: "broadcastlv.chat.bilibili.com", port: 2243, wss_port: 443, ws_port: 2244}
+      { host: "broadcastlv.chat.bilibili.com", port: 2243, wss_port: 443, ws_port: 2244 }
     ]
 
     this.onAddText = null
@@ -65,24 +65,24 @@ export default class ChatClientDirect {
     this.receiveTimeoutTimerId = null
   }
 
-  async start () {
+  async start() {
     await this.initRoom()
     this.wsConnect()
   }
 
-  stop () {
+  stop() {
     this.isDestroying = true
     if (this.websocket) {
       this.websocket.close()
     }
   }
 
-  async initRoom () {
+  async initRoom() {
     let res
     try {
-      res = (await axios.get('/api/room_info', {params: {
+      res = (await axios.get('/api/room_info', { params: {
         roomId: this.roomId
-      }})).data
+      } })).data
     } catch {
       return
     }
@@ -93,7 +93,7 @@ export default class ChatClientDirect {
     }
   }
 
-  makePacket (data, operation) {
+  makePacket(data, operation) {
     let body = textEncoder.encode(JSON.stringify(data))
     let header = new ArrayBuffer(HEADER_SIZE)
     let headerView = new DataView(header)
@@ -105,7 +105,7 @@ export default class ChatClientDirect {
     return new Blob([header, body])
   }
 
-  sendAuth () {
+  sendAuth() {
     let authParams = {
       uid: 0,
       roomid: this.roomId,
@@ -116,7 +116,7 @@ export default class ChatClientDirect {
     this.websocket.send(this.makePacket(authParams, OP_AUTH))
   }
 
-  wsConnect () {
+  wsConnect() {
     if (this.isDestroying) {
       return
     }
@@ -129,13 +129,13 @@ export default class ChatClientDirect {
     this.websocket.onmessage = this.onWsMessage.bind(this)
   }
 
-  onWsOpen () {
+  onWsOpen() {
     this.sendAuth()
     this.heartbeatTimerId = window.setInterval(this.sendHeartbeat.bind(this), HEARTBEAT_INTERVAL)
     this.refreshReceiveTimeoutTimer()
   }
 
-  sendHeartbeat () {
+  sendHeartbeat() {
     this.websocket.send(this.makePacket({}, OP_HEARTBEAT))
   }
 
@@ -147,7 +147,7 @@ export default class ChatClientDirect {
   }
 
   onReceiveTimeout() {
-    window.console.warn('接收消息超时')
+    console.warn('接收消息超时')
     this.discardWebsocket()
   }
 
@@ -163,7 +163,7 @@ export default class ChatClientDirect {
     this.onWsClose()
   }
 
-  onWsClose () {
+  onWsClose() {
     this.websocket = null
     if (this.heartbeatTimerId) {
       window.clearInterval(this.heartbeatTimerId)
@@ -178,14 +178,14 @@ export default class ChatClientDirect {
       return
     }
     this.retryCount++
-    window.console.warn('掉线重连中', this.retryCount)
+    console.warn('掉线重连中', this.retryCount)
     window.setTimeout(this.wsConnect.bind(this), 1000)
   }
 
-  onWsMessage (event) {
+  onWsMessage(event) {
     this.refreshReceiveTimeoutTimer()
     if (!(event.data instanceof ArrayBuffer)) {
-      window.console.warn('未知的websocket消息类型，data=', event.data)
+      console.warn('未知的websocket消息类型，data=', event.data)
       return
     }
 
@@ -196,7 +196,7 @@ export default class ChatClientDirect {
     this.retryCount = 0
   }
 
-  parseWsMessage (data) {
+  parseWsMessage(data) {
     let offset = 0
     let dataView = new DataView(data.buffer)
     let packLen = dataView.getUint32(0)
@@ -231,13 +231,13 @@ export default class ChatClientDirect {
     default: {
       // 未知消息
       let body = new Uint8Array(data.buffer, offset + rawHeaderSize, packLen - rawHeaderSize)
-      window.console.warn('未知包类型，operation=', operation, dataView, body)
+      console.warn('未知包类型，operation=', operation, dataView, body)
       break
     }
     }
   }
 
-  parseBusinessMessage (dataView, body) {
+  parseBusinessMessage(dataView, body) {
     let ver = dataView.getUint16(6)
     let operation = dataView.getUint32(8)
 
@@ -255,7 +255,7 @@ export default class ChatClientDirect {
             body = JSON.parse(textDecoder.decode(body))
             this.handlerCommand(body)
           } catch (e) {
-            window.console.error('body=', body)
+            console.error('body=', body)
             throw e
           }
         }
@@ -266,7 +266,7 @@ export default class ChatClientDirect {
       // 认证响应
       body = JSON.parse(textDecoder.decode(body))
       if (body.code !== AUTH_REPLY_CODE_OK) {
-        window.console.error('认证响应错误，body=', body)
+        console.error('认证响应错误，body=', body)
         // 这里应该重新获取token再重连的，但前端没有用到token，所以不重新init了
         this.discardWebsocket()
         throw new Error('认证响应错误')
@@ -276,13 +276,13 @@ export default class ChatClientDirect {
     }
     default: {
       // 未知消息
-      window.console.warn('未知包类型，operation=', operation, dataView, body)
+      console.warn('未知包类型，operation=', operation, dataView, body)
       break
     }
     }
   }
 
-  handlerCommand (command) {
+  handlerCommand(command) {
     let cmd = command.cmd || ''
     let pos = cmd.indexOf(':')
     if (pos != -1) {
@@ -294,7 +294,7 @@ export default class ChatClientDirect {
     }
   }
 
-  async danmuMsgCallback (command) {
+  async danmuMsgCallback(command) {
     if (!this.onAddText) {
       return
     }
@@ -329,10 +329,10 @@ export default class ChatClientDirect {
       authorType: authorType,
       content: info[1],
       privilegeType: privilegeType,
-      isGiftDanmaku: !!info[0][9],
+      isGiftDanmaku: Boolean(info[0][9]),
       authorLevel: info[4][0],
       isNewbie: info[2][5] < 10000,
-      isMobileVerified: !!info[2][6],
+      isMobileVerified: Boolean(info[2][6]),
       medalLevel: roomId === this.roomId ? medalLevel : 0,
       id: getUuid4Hex(),
       translation: '',
@@ -341,7 +341,7 @@ export default class ChatClientDirect {
     this.onAddText(data)
   }
 
-  sendGiftCallback (command) {
+  sendGiftCallback(command) {
     if (!this.onAddGift) {
       return
     }
@@ -362,7 +362,7 @@ export default class ChatClientDirect {
     this.onAddGift(data)
   }
 
-  async guardBuyCallback (command) {
+  async guardBuyCallback(command) {
     if (!this.onAddMember) {
       return
     }
@@ -378,7 +378,7 @@ export default class ChatClientDirect {
     this.onAddMember(data)
   }
 
-  superChatMessageCallback (command) {
+  superChatMessageCallback(command) {
     if (!this.onAddSuperChat) {
       return
     }
@@ -396,7 +396,7 @@ export default class ChatClientDirect {
     this.onAddSuperChat(data)
   }
 
-  superChatMessageDeleteCallback (command) {
+  superChatMessageDeleteCallback(command) {
     if (!this.onDelSuperChat) {
       return
     }
@@ -405,7 +405,7 @@ export default class ChatClientDirect {
     for (let id of command.data.ids) {
       ids.push(id.toString())
     }
-    this.onDelSuperChat({ids})
+    this.onDelSuperChat({ ids })
   }
 }
 

frontend/src/api/chat/ChatClientRelay.js

@@ -11,10 +11,10 @@ const COMMAND_UPDATE_TRANSLATION = 7
 const CONTENT_TYPE_EMOTICON = 1
 
 const HEARTBEAT_INTERVAL = 10 * 1000
-const RECEIVE_TIMEOUT = HEARTBEAT_INTERVAL + 5 * 1000
+const RECEIVE_TIMEOUT = HEARTBEAT_INTERVAL + (5 * 1000)
 
 export default class ChatClientRelay {
-  constructor (roomId, autoTranslate) {
+  constructor(roomId, autoTranslate) {
     this.roomId = roomId
     this.autoTranslate = autoTranslate
 
@@ -32,18 +32,18 @@ export default class ChatClientRelay {
     this.receiveTimeoutTimerId = null
   }
 
-  start () {
+  start() {
     this.wsConnect()
   }
 
-  stop () {
+  stop() {
     this.isDestroying = true
     if (this.websocket) {
       this.websocket.close()
     }
   }
 
-  wsConnect () {
+  wsConnect() {
     if (this.isDestroying) {
       return
     }
@@ -57,7 +57,7 @@ export default class ChatClientRelay {
     this.websocket.onmessage = this.onWsMessage.bind(this)
   }
 
-  onWsOpen () {
+  onWsOpen() {
     this.retryCount = 0
     this.websocket.send(JSON.stringify({
       cmd: COMMAND_JOIN_ROOM,
@@ -72,7 +72,7 @@ export default class ChatClientRelay {
     this.refreshReceiveTimeoutTimer()
   }
 
-  sendHeartbeat () {
+  sendHeartbeat() {
     this.websocket.send(JSON.stringify({
       cmd: COMMAND_HEARTBEAT
     }))
@@ -86,7 +86,7 @@ export default class ChatClientRelay {
   }
 
   onReceiveTimeout() {
-    window.console.warn('接收消息超时')
+    console.warn('接收消息超时')
     this.receiveTimeoutTimerId = null
 
     // 直接丢弃阻塞的websocket，不等onclose回调了
@@ -95,7 +95,7 @@ export default class ChatClientRelay {
     this.onWsClose()
   }
 
-  onWsClose () {
+  onWsClose() {
     this.websocket = null
     if (this.heartbeatTimerId) {
       window.clearInterval(this.heartbeatTimerId)
@@ -109,14 +109,14 @@ export default class ChatClientRelay {
     if (this.isDestroying) {
       return
     }
-    window.console.warn(`掉线重连中${++this.retryCount}`)
+    console.warn(`掉线重连中${++this.retryCount}`)
     window.setTimeout(this.wsConnect.bind(this), 1000)
   }
 
-  onWsMessage (event) {
+  onWsMessage(event) {
     this.refreshReceiveTimeoutTimer()
 
-    let {cmd, data} = JSON.parse(event.data)
+    let { cmd, data } = JSON.parse(event.data)
     switch (cmd) {
     case COMMAND_HEARTBEAT: {
       break
@@ -140,10 +140,10 @@ export default class ChatClientRelay {
         authorType: data[3],
         content: data[4],
         privilegeType: data[5],
-        isGiftDanmaku: !!data[6],
+        isGiftDanmaku: Boolean(data[6]),
         authorLevel: data[7],
-        isNewbie: !!data[8],
-        isMobileVerified: !!data[9],
+        isNewbie: Boolean(data[8]),
+        isMobileVerified: Boolean(data[9]),
         medalLevel: data[10],
         id: data[11],
         translation: data[12],

frontend/src/api/chat/ChatClientTest.js

@@ -1,4 +1,4 @@
-import {getUuid4Hex} from '@/utils'
+import { getUuid4Hex } from '@/utils'
 import * as constants from '@/components/ChatRenderer/constants'
 import * as avatar from './avatar'
 
@@ -19,7 +19,7 @@ const CONTENTS = [
   '有一说一，这件事大家懂的都懂，不懂的，说了你也不明白，不如不说', '让我看看', '我柜子动了，我不玩了'
 ]
 
- // TODO 改成对象？
+// TODO 改成对象？
 const EMOTICONS = [
   '/static/img/emoticons/233.png',
   '/static/img/emoticons/miaoa.png',
@@ -27,13 +27,13 @@ const EMOTICONS = [
 ]
 
 const AUTHOR_TYPES = [
-  {weight: 10, value: constants.AUTHRO_TYPE_NORMAL},
-  {weight: 5, value: constants.AUTHRO_TYPE_MEMBER},
-  {weight: 2, value: constants.AUTHRO_TYPE_ADMIN},
-  {weight: 1, value: constants.AUTHRO_TYPE_OWNER}
+  { weight: 10, value: constants.AUTHRO_TYPE_NORMAL },
+  { weight: 5, value: constants.AUTHRO_TYPE_MEMBER },
+  { weight: 2, value: constants.AUTHRO_TYPE_ADMIN },
+  { weight: 1, value: constants.AUTHRO_TYPE_OWNER }
 ]
 
-function randGuardInfo () {
+function randGuardInfo() {
   let authorType = randomChoose(AUTHOR_TYPES)
   let privilegeType
   if (authorType === constants.AUTHRO_TYPE_MEMBER || authorType === constants.AUTHRO_TYPE_ADMIN) {
@@ -41,16 +41,16 @@ function randGuardInfo () {
   } else {
     privilegeType = 0
   }
-  return {authorType, privilegeType}
+  return { authorType, privilegeType }
 }
 
 const GIFT_INFO_LIST = [
-  {giftName: 'B坷垃', totalCoin: 9900},
-  {giftName: '礼花', totalCoin: 28000},
-  {giftName: '花式夸夸', totalCoin: 39000},
-  {giftName: '天空之翼', totalCoin: 100000},
-  {giftName: '摩天大楼', totalCoin: 450000},
-  {giftName: '小电视飞船', totalCoin: 1245000}
+  { giftName: 'B坷垃', totalCoin: 9900 },
+  { giftName: '礼花', totalCoin: 28000 },
+  { giftName: '花式夸夸', totalCoin: 39000 },
+  { giftName: '天空之翼', totalCoin: 100000 },
+  { giftName: '摩天大楼', totalCoin: 450000 },
+  { giftName: '小电视飞船', totalCoin: 1245000 }
 ]
 
 const SC_PRICES = [
@@ -159,7 +159,7 @@ const MESSAGE_GENERATORS = [
   }
 ]
 
-function randomChoose (nodes) {
+function randomChoose(nodes) {
   if (nodes.length === 0) {
     return null
   }
@@ -187,12 +187,12 @@ function randomChoose (nodes) {
   return null
 }
 
-function randInt (min, max) {
-  return Math.floor(min + (max - min + 1) * Math.random())
+function randInt(min, max) {
+  return Math.floor(min + ((max - min + 1) * Math.random()))
 }
 
 export default class ChatClientTest {
-  constructor () {
+  constructor() {
     this.minSleepTime = 800
     this.maxSleepTime = 1200
 
@@ -206,25 +206,25 @@ export default class ChatClientTest {
     this.timerId = null
   }
 
-  start () {
+  start() {
     this.refreshTimer()
   }
 
-  stop () {
+  stop() {
     if (this.timerId) {
       window.clearTimeout(this.timerId)
       this.timerId = null
     }
   }
 
-  refreshTimer () {
+  refreshTimer() {
     this.timerId = window.setTimeout(this.onTimeout.bind(this), randInt(this.minSleepTime, this.maxSleepTime))
   }
 
-  onTimeout () {
+  onTimeout() {
     this.refreshTimer()
 
-    let {type, message} = randomChoose(MESSAGE_GENERATORS)()
+    let { type, message } = randomChoose(MESSAGE_GENERATORS)()
     switch (type) {
     case constants.MESSAGE_TYPE_TEXT:
       this.onAddText(message)

frontend/src/api/chat/avatar.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 
 export const DEFAULT_AVATAR_URL = '//static.hdslb.com/images/member/noface.gif'
 
-export function processAvatarUrl (avatarUrl) {
+export function processAvatarUrl(avatarUrl) {
   // 去掉协议，兼容HTTP、HTTPS
   let m = avatarUrl.match(/(?:https?:)?(.*)/)
   if (m) {
@@ -15,12 +15,12 @@ export function processAvatarUrl (avatarUrl) {
   return avatarUrl
 }
 
-export async function getAvatarUrl (uid) {
+export async function getAvatarUrl(uid) {
   let res
   try {
-    res = (await axios.get('/api/avatar_url', {params: {
+    res = (await axios.get('/api/avatar_url', { params: {
       uid: uid
-    }})).data
+    } })).data
   } catch {
     return DEFAULT_AVATAR_URL
   }

frontend/src/api/chatConfig.js

@@ -1,4 +1,4 @@
-import {mergeConfig} from '@/utils'
+import { mergeConfig } from '@/utils'
 
 export const DEFAULT_CONFIG = {
   minGiftPrice: 7, // $1
@@ -22,15 +22,15 @@ export const DEFAULT_CONFIG = {
   giftUsernamePronunciation: ''
 }
 
-export function setLocalConfig (config) {
+export function setLocalConfig(config) {
   config = mergeConfig(config, DEFAULT_CONFIG)
   window.localStorage.config = JSON.stringify(config)
 }
 
-export function getLocalConfig () {
+export function getLocalConfig() {
   try {
     return mergeConfig(JSON.parse(window.localStorage.config), DEFAULT_CONFIG)
   } catch {
-    return {...DEFAULT_CONFIG}
+    return { ...DEFAULT_CONFIG }
   }
 }

frontend/src/components/ChatRenderer/MembershipItem.vue

@@ -9,9 +9,9 @@
           <div id="header-content-primary-column" class="style-scope yt-live-chat-membership-item-renderer">
             <div id="header-content-inner-column" class="style-scope yt-live-chat-membership-item-renderer">
               <yt-live-chat-author-chip class="style-scope yt-live-chat-membership-item-renderer">
-                <span id="author-name" dir="auto" class="member style-scope yt-live-chat-author-chip">{{
-                  authorName
-                  }}<!-- 这里是已验证勋章 -->
+                <span id="author-name" dir="auto" class="member style-scope yt-live-chat-author-chip">
+                  <template>{{ authorName }}</template>
+                  <!-- 这里是已验证勋章 -->
                   <span id="chip-badges" class="style-scope yt-live-chat-author-chip"></span>
                 </span>
                 <span id="chat-badges" class="style-scope yt-live-chat-author-chip">
@@ -21,9 +21,9 @@
                 </span>
               </yt-live-chat-author-chip>
             </div>
-            <div id="header-subtext" class="style-scope yt-live-chat-membership-item-renderer">{{title}}</div>
+            <div id="header-subtext" class="style-scope yt-live-chat-membership-item-renderer">{{ title }}</div>
           </div>
-          <div id="timestamp" class="style-scope yt-live-chat-membership-item-renderer">{{timeText}}</div>
+          <div id="timestamp" class="style-scope yt-live-chat-membership-item-renderer">{{ timeText }}</div>
         </div>
       </div>
     </div>

frontend/src/components/ChatRenderer/PaidMessage.vue

@@ -16,16 +16,14 @@
         ></img-shadow>
         <div id="header-content" class="style-scope yt-live-chat-paid-message-renderer">
           <div id="header-content-primary-column" class="style-scope yt-live-chat-paid-message-renderer">
-            <div id="author-name" class="style-scope yt-live-chat-paid-message-renderer">{{authorName}}</div>
-            <div id="purchase-amount" class="style-scope yt-live-chat-paid-message-renderer">{{priceText}}</div>
+            <div id="author-name" class="style-scope yt-live-chat-paid-message-renderer">{{ authorName }}</div>
+            <div id="purchase-amount" class="style-scope yt-live-chat-paid-message-renderer">{{ priceText }}</div>
           </div>
-          <span id="timestamp" class="style-scope yt-live-chat-paid-message-renderer">{{timeText}}</span>
+          <span id="timestamp" class="style-scope yt-live-chat-paid-message-renderer">{{ timeText }}</span>
         </div>
       </div>
       <div id="content" class="style-scope yt-live-chat-paid-message-renderer">
-        <div id="message" dir="auto" class="style-scope yt-live-chat-paid-message-renderer">{{
-          content
-        }}</div>
+        <div id="message" dir="auto" class="style-scope yt-live-chat-paid-message-renderer">{{ content }}</div>
       </div>
     </div>
   </yt-live-chat-paid-message-renderer>
@@ -53,7 +51,7 @@ export default {
       return constants.getPriceConfig(this.price).colors
     },
     priceText() {
-      return 'CN¥' + utils.formatCurrency(this.price)
+      return `CN¥${utils.formatCurrency(this.price)}`
     },
     timeText() {
       return utils.getTimeTextHourMin(this.time)

frontend/src/components/ChatRenderer/TextMessage.vue

@@ -4,7 +4,7 @@
       :imgUrl="avatarUrl"
     ></img-shadow>
     <div id="content" class="style-scope yt-live-chat-text-message-renderer">
-      <span id="timestamp" class="style-scope yt-live-chat-text-message-renderer">{{timeText}}</span>
+      <span id="timestamp" class="style-scope yt-live-chat-text-message-renderer">{{ timeText }}</span>
       <yt-live-chat-author-chip class="style-scope yt-live-chat-text-message-renderer">
         <span id="author-name" dir="auto" class="style-scope yt-live-chat-author-chip" :type="authorTypeText">
           <template>{{ authorName }}</template>
@@ -23,7 +23,7 @@
           :src="emoticon" :alt="content" shared-tooltip-text="" id="emoji"
         >
         <el-badge :value="repeated" :max="99" v-show="repeated > 1" class="style-scope yt-live-chat-text-message-renderer"
-          :style="{'--repeated-mark-color': repeatedMarkColor}"
+          :style="{ '--repeated-mark-color': repeatedMarkColor }"
         ></el-badge>
       </span>
     </div>
@@ -73,7 +73,7 @@ export default {
         color = [0, 0, 0]
         let t = (this.repeated - 2) / (10 - 2)
         for (let i = 0; i < 3; i++) {
-          color[i] = REPEATED_MARK_COLOR_START[i] + (REPEATED_MARK_COLOR_END[i] - REPEATED_MARK_COLOR_START[i]) * t
+          color[i] = REPEATED_MARK_COLOR_START[i] + ((REPEATED_MARK_COLOR_END[i] - REPEATED_MARK_COLOR_START[i]) * t)
         }
       }
       return `hsl(${color[0]}, ${color[1]}%, ${color[2]}%)`

frontend/src/components/ChatRenderer/Ticker.vue

@@ -17,7 +17,7 @@
               <img-shadow id="author-photo" height="24" width="24" class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
                 :imgUrl="message.raw.avatarUrl"
               ></img-shadow>
-              <span id="text" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer">{{message.text}}</span>
+              <span id="text" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer">{{ message.text }}</span>
             </div>
           </div>
         </yt-live-chat-ticker-paid-message-item-renderer>
@@ -40,7 +40,7 @@
 
 <script>
 import * as chatConfig from '@/api/chatConfig'
-import {formatCurrency} from '@/utils'
+import { formatCurrency } from '@/utils'
 import ImgShadow from './ImgShadow.vue'
 import MembershipItem from './MembershipItem.vue'
 import PaidMessage from './PaidMessage.vue'
@@ -142,7 +142,7 @@ export default {
         color2 = config.colors.headerBg
       }
       let pinTime = this.getPinTime(message)
-      let progress = (1 - (this.curTime - message.addTime) / (60 * 1000) / pinTime) * 100
+      let progress = (1 - ((this.curTime - message.addTime) / (60 * 1000) / pinTime)) * 100
       if (progress < 0) {
         progress = 0
       } else if (progress > 100) {
@@ -160,7 +160,7 @@ export default {
       if (message.type === constants.MESSAGE_TYPE_MEMBER) {
         return 'Member'
       }
-      return 'CN¥' + formatCurrency(message.price)
+      return `CN¥${formatCurrency(message.price)}`
     },
     getPinTime(message) {
       if (message.type === constants.MESSAGE_TYPE_MEMBER) {

frontend/src/components/ChatRenderer/constants.js

@@ -100,7 +100,7 @@ export const PRICE_CONFIGS = [
     pinTime: 0
   },
   { // $1蓝
-    price: 1 * EXCHANGE_RATE,
+    price: EXCHANGE_RATE,
     colors: {
       contentBg: 'rgba(30,136,229,1)',
       headerBg: 'rgba(21,101,192,1)',
@@ -113,7 +113,7 @@ export const PRICE_CONFIGS = [
   }
 ]
 
-export function getPriceConfig (price) {
+export function getPriceConfig(price) {
   for (const config of PRICE_CONFIGS) {
     if (price >= config.price) {
       return config
@@ -122,21 +122,21 @@ export function getPriceConfig (price) {
   return PRICE_CONFIGS[PRICE_CONFIGS.length - 1]
 }
 
-export function getShowContent (message) {
+export function getShowContent(message) {
   if (message.translation) {
     return `${message.content}（${message.translation}）`
   }
   return message.content
 }
 
-export function getGiftShowContent (message, showGiftName) {
+export function getGiftShowContent(message, showGiftName) {
   if (!showGiftName) {
     return ''
   }
   return `Sent ${message.giftName}x${message.num}`
 }
 
-export function getShowAuthorName (message) {
+export function getShowAuthorName(message) {
   if (message.authorNamePronunciation && message.authorNamePronunciation !== message.authorName) {
     return `${message.authorName}(${message.authorNamePronunciation})`
   }

frontend/src/components/ChatRenderer/index.vue

@@ -7,7 +7,7 @@
       <div ref="scroller" id="item-scroller" class="style-scope yt-live-chat-item-list-renderer animated" @scroll="onScroll">
         <div ref="itemOffset" id="item-offset" class="style-scope yt-live-chat-item-list-renderer" style="height: 0px;">
           <div ref="items" id="items" class="style-scope yt-live-chat-item-list-renderer" style="overflow: hidden"
-            :style="{transform: `translateY(${Math.floor(scrollPixelsRemaining)}px)`}"
+            :style="{ transform: `translateY(${Math.floor(scrollPixelsRemaining)}px)` }"
           >
             <template v-for="message in messages">
               <text-message :key="message.id" v-if="message.type === MESSAGE_TYPE_TEXT"
@@ -114,7 +114,7 @@ export default {
   },
   computed: {
     canScrollToBottom() {
-      return this.atBottom/* || this.allowScroll*/
+      return this.atBottom/* || this.allowScroll */
     }
   },
   watch: {
@@ -288,7 +288,7 @@ export default {
         this.emitSmoothedMessageTimerId = window.setTimeout(this.emitSmoothedMessages)
       }
     },
-    messageNeedSmooth({type}) {
+    messageNeedSmooth({ type }) {
       return NEED_SMOOTH_MESSAGE_TYPES.indexOf(type) !== -1
     },
     emitSmoothedMessages() {
@@ -355,18 +355,18 @@ export default {
 
       for (let message of messageGroup) {
         switch (message.type) {
-          case constants.MESSAGE_TYPE_TEXT:
-          case constants.MESSAGE_TYPE_GIFT:
-          case constants.MESSAGE_TYPE_MEMBER:
-          case constants.MESSAGE_TYPE_SUPER_CHAT:
-            this.handleAddMessage(message)
-            break
-          case constants.MESSAGE_TYPE_DEL:
-            this.handleDelMessage(message)
-            break
-          case constants.MESSAGE_TYPE_UPDATE:
-            this.handleUpdateMessage(message)
-            break
+        case constants.MESSAGE_TYPE_TEXT:
+        case constants.MESSAGE_TYPE_GIFT:
+        case constants.MESSAGE_TYPE_MEMBER:
+        case constants.MESSAGE_TYPE_SUPER_CHAT:
+          this.handleAddMessage(message)
+          break
+        case constants.MESSAGE_TYPE_DEL:
+          this.handleDelMessage(message)
+          break
+        case constants.MESSAGE_TYPE_UPDATE:
+          this.handleUpdateMessage(message)
+          break
         }
       }
 
@@ -389,7 +389,7 @@ export default {
         }
       }
     },
-    handleDelMessage({id}) {
+    handleDelMessage({ id }) {
       for (let arr of [this.messages, this.paidMessages, this.messagesBuffer]) {
         for (let i = 0; i < arr.length; i++) {
           if (arr[i].id === id) {
@@ -400,7 +400,7 @@ export default {
         }
       }
     },
-    handleUpdateMessage({id, newValuesObj}) {
+    handleUpdateMessage({ id, newValuesObj }) {
       // 遍历滚动的消息
       this.forEachRecentMessage(999999999, message => {
         if (message.id !== id) {
@@ -468,7 +468,7 @@ export default {
         this.lastSmoothChatMessageAddMs = performance.now()
       }
       let interval = performance.now() - this.lastSmoothChatMessageAddMs
-      this.chatRateMs = 0.9 * this.chatRateMs + 0.1 * interval
+      this.chatRateMs = (0.9 * this.chatRateMs) + (0.1 * interval)
       if (this.isSmoothed) {
         if (this.chatRateMs < 400) {
           this.isSmoothed = false

frontend/src/layout/Sidebar.vue

@@ -8,35 +8,35 @@
       :default-active="$route.path"
     >
       <el-menu-item index="/">
-        <i class="el-icon-s-home"></i>{{$t('sidebar.home')}}
+        <i class="el-icon-s-home"></i>{{ $t('sidebar.home') }}
       </el-menu-item>
-      <el-menu-item :index="$router.resolve({name: 'stylegen'}).href">
-        <i class="el-icon-brush"></i>{{$t('sidebar.stylegen')}}
+      <el-menu-item :index="$router.resolve({ name: 'stylegen' }).href">
+        <i class="el-icon-brush"></i>{{ $t('sidebar.stylegen') }}
       </el-menu-item>
-      <el-menu-item :index="$router.resolve({name: 'help'}).href">
-        <i class="el-icon-question"></i>{{$t('sidebar.help')}}
+      <el-menu-item :index="$router.resolve({ name: 'help' }).href">
+        <i class="el-icon-question"></i>{{ $t('sidebar.help') }}
       </el-menu-item>
       <a href="https://github.com/xfgryujk/blivechat" target="_blank">
         <el-menu-item>
-          <i class="el-icon-share"></i>{{$t('sidebar.projectAddress')}}
+          <i class="el-icon-share"></i>{{ $t('sidebar.projectAddress') }}
         </el-menu-item>
       </a>
       <a href="http://link.bilibili.com/ctool/vtuber" target="_blank">
         <el-menu-item>
-          <i class="el-icon-link"></i>{{$t('sidebar.giftRecordOfficial')}}
+          <i class="el-icon-link"></i>{{ $t('sidebar.giftRecordOfficial') }}
         </el-menu-item>
       </a>
       <el-submenu index="null">
         <template slot="title">
           <i class="el-icon-chat-line-square"></i>Language
         </template>
-        <el-menu-item v-for="{locale, name} in [
-            {locale: 'zh', name: '中文'},
-            {locale: 'ja', name: '日本語'},
-            {locale: 'en', name: 'English'}
-          ]" :key="locale"
-          @click="onSelectLanguage(locale)"
-        >{{name}}</el-menu-item>
+        <el-menu-item v-for="{ locale, name } in [
+            { locale: 'zh', name: '中文' },
+            { locale: 'ja', name: '日本語' },
+            { locale: 'en', name: 'English' }
+          ]"
+          :key="locale" @click="onSelectLanguage(locale)"
+        >{{ name }}</el-menu-item>
       </el-submenu>
     </el-menu>
   </el-scrollbar>

frontend/src/layout/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-container class="app-wrapper" :class="{mobile: isMobile}">
+  <el-container class="app-wrapper" :class="{ mobile: isMobile }">
     <div v-show="isMobile && !hideSidebar" class="drawer-bg" @click="hideSidebar = true"></div>
-    <el-aside width="230px" class="sidebar-container" :class="{'hide-sidebar': hideSidebar}">
+    <el-aside width="230px" class="sidebar-container" :class="{ 'hide-sidebar': hideSidebar }">
       <div class="logo-container">
         <router-link to="/">
           <img src="@/assets/img/logo.png" class="sidebar-logo">

frontend/src/main.js

@@ -71,12 +71,12 @@ const router = new VueRouter({
       path: '/',
       component: Layout,
       children: [
-        {path: '', component: Home},
-        {path: 'stylegen', name: 'stylegen', component: StyleGenerator},
-        {path: 'help', name: 'help', component: Help}
+        { path: '', component: Home },
+        { path: 'stylegen', name: 'stylegen', component: StyleGenerator },
+        { path: 'help', name: 'help', component: Help }
       ]
     },
-    {path: '/room/test', name: 'test_room', component: Room, props: route => ({strConfig: route.query})},
+    { path: '/room/test', name: 'test_room', component: Room, props: route => ({ strConfig: route.query }) },
     {
       path: '/room/:roomId',
       name: 'room',
@@ -86,10 +86,10 @@ const router = new VueRouter({
         if (isNaN(roomId)) {
           roomId = null
         }
-        return {roomId, strConfig: route.query}
+        return { roomId, strConfig: route.query }
       }
     },
-    {path: '*', component: NotFound}
+    { path: '*', component: NotFound }
   ]
 })
 

frontend/src/utils/index.js

@@ -1,4 +1,4 @@
-export function mergeConfig (config, defaultConfig) {
+export function mergeConfig(config, defaultConfig) {
   let res = {}
   for (let i in defaultConfig) {
     res[i] = i in config ? config[i] : defaultConfig[i]
@@ -6,14 +6,14 @@ export function mergeConfig (config, defaultConfig) {
   return res
 }
 
-export function toBool (val) {
+export function toBool(val) {
   if (typeof val === 'string') {
     return ['false', 'no', 'off', '0', ''].indexOf(val.toLowerCase()) === -1
   }
-  return !!val
+  return Boolean(val)
 }
 
-export function toInt (val, _default) {
+export function toInt(val, _default) {
   let res = parseInt(val)
   if (isNaN(res)) {
     res = _default
@@ -21,19 +21,19 @@ export function toInt (val, _default) {
   return res
 }
 
-export function formatCurrency (price) {
+export function formatCurrency(price) {
   return new Intl.NumberFormat('zh-CN', {
     minimumFractionDigits: price < 100 ? 2 : 0
   }).format(price)
 }
 
-export function getTimeTextHourMin (date) {
+export function getTimeTextHourMin(date) {
   let hour = date.getHours()
-  let min = ('00' + date.getMinutes()).slice(-2)
+  let min = `00${date.getMinutes()}`.slice(-2)
   return `${hour}:${min}`
 }
 
-export function getUuid4Hex () {
+export function getUuid4Hex() {
   let chars = []
   for (let i = 0; i < 32; i++) {
     let char = Math.floor(Math.random() * 16).toString(16)

frontend/src/utils/pronunciation/index.js

@@ -2,21 +2,21 @@ export const DICT_PINYIN = 'pinyin'
 export const DICT_KANA = 'kana'
 
 export class PronunciationConverter {
-  constructor () {
+  constructor() {
     this.pronunciationMap = new Map()
   }
 
-  async loadDict (dictName) {
+  async loadDict(dictName) {
     let promise
     switch (dictName) {
-      case DICT_PINYIN:
-        promise = import('./dictPinyin')
-        break
-      case DICT_KANA:
-        promise = import('./dictKana')
-        break
-      default:
-        return
+    case DICT_PINYIN:
+      promise = import('./dictPinyin')
+      break
+    case DICT_KANA:
+      promise = import('./dictKana')
+      break
+    default:
+      return
     }
 
     let dictTxt = (await promise).default
@@ -30,7 +30,7 @@ export class PronunciationConverter {
     this.pronunciationMap = pronunciationMap
   }
 
-  getPronunciation (text) {
+  getPronunciation(text) {
     let res = []
     let lastHasPronunciation = null
     for (let char of text) {

frontend/src/views/Help.vue

@@ -1,15 +1,15 @@
 <template>
   <div>
-    <h1>{{$t('help.help')}}</h1>
-    <p>{{$t('help.p1')}}</p>
+    <h1>{{ $t('help.help') }}</h1>
+    <p>{{ $t('help.p1') }}</p>
     <p class="img-container"><el-image fit="scale-down" src="/static/img/tutorial/tutorial-1.png"></el-image></p>
-    <p>{{$t('help.p2')}}</p>
+    <p>{{ $t('help.p2') }}</p>
     <p class="img-container large-img"><el-image fit="scale-down" src="/static/img/tutorial/tutorial-2.png"></el-image></p>
-    <p>{{$t('help.p3')}}</p>
+    <p>{{ $t('help.p3') }}</p>
     <p class="img-container large-img"><el-image fit="scale-down" src="/static/img/tutorial/tutorial-3.png"></el-image></p>
-    <p>{{$t('help.p4')}}</p>
+    <p>{{ $t('help.p4') }}</p>
     <p class="img-container"><el-image fit="scale-down" src="/static/img/tutorial/tutorial-4.png"></el-image></p>
-    <p>{{$t('help.p5')}}</p>
+    <p>{{ $t('help.p5') }}</p>
     <p class="img-container large-img"><el-image fit="scale-down" src="/static/img/tutorial/tutorial-5.png"></el-image></p>
     <p><br><br><br><br><br><br><br><br>--------------------------------------------------------------------------------------------------------</p>
     <p>喜欢的话可以推荐给别人，专栏求支持_(:з」∠)_ <a href="https://www.bilibili.com/read/cv4594365" target="_blank">https://www.bilibili.com/read/cv4594365</a></p>

frontend/src/views/Home.vue

@@ -142,7 +142,7 @@ import _ from 'lodash'
 import axios from 'axios'
 import download from 'downloadjs'
 
-import {mergeConfig} from '@/utils'
+import { mergeConfig } from '@/utils'
 import * as chatConfig from '@/api/chatConfig'
 
 export default {
@@ -189,7 +189,7 @@ export default {
       try {
         this.serverConfig = (await axios.get('/api/server_info')).data.config
       } catch (e) {
-        this.$message.error('Failed to fetch server information: ' + e)
+        this.$message.error(`Failed to fetch server information: ${e}`)
       }
     },
     enterRoom() {
@@ -202,13 +202,13 @@ export default {
       if (isTestRoom && this.form.roomId === '') {
         return ''
       }
-      let query = {...this.form}
+      let query = { ...this.form }
       delete query.roomId
       let resolved
       if (isTestRoom) {
-        resolved = this.$router.resolve({name: 'test_room', query})
+        resolved = this.$router.resolve({ name: 'test_room', query })
       } else {
-        resolved = this.$router.resolve({name: 'room', params: {roomId: this.form.roomId}, query})
+        resolved = this.$router.resolve({ name: 'room', params: { roomId: this.form.roomId }, query })
       }
       return `${window.location.protocol}//${window.location.host}${resolved.href}`
     },
@@ -235,7 +235,7 @@ export default {
             return
           }
           cfg = mergeConfig(cfg, chatConfig.DEFAULT_CONFIG)
-          this.form = {roomId: this.form.roomId, ...cfg}
+          this.form = { roomId: this.form.roomId, ...cfg }
         }
         reader.readAsText(input.files[0])
       }

frontend/src/views/Room.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import {mergeConfig, toBool, toInt} from '@/utils'
+import { mergeConfig, toBool, toInt } from '@/utils'
 import * as pronunciation from '@/utils/pronunciation'
 import * as chatConfig from '@/api/chatConfig'
 import ChatClientTest from '@/api/chat/ChatClientTest'
@@ -29,7 +29,7 @@ export default {
   },
   data() {
     return {
-      config: {...chatConfig.DEFAULT_CONFIG},
+      config: { ...chatConfig.DEFAULT_CONFIG },
       chatClient: null,
       pronunciationConverter: null
     }
@@ -203,7 +203,7 @@ export default {
       if (!this.config.autoTranslate) {
         return
       }
-      this.$refs.renderer.updateMessage(data.id, {translation: data.translation})
+      this.$refs.renderer.updateMessage(data.id, { translation: data.translation })
     },
 
     filterTextMessage(data) {

frontend/src/views/StyleGenerator/Legacy.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-form label-width="150px" size="mini">
-      <h3>{{$t('stylegen.outlines')}}</h3>
+      <h3>{{ $t('stylegen.outlines') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -20,7 +20,7 @@
         </el-form-item>
       </el-card>
 
-      <h3>{{$t('stylegen.avatars')}}</h3>
+      <h3>{{ $t('stylegen.avatars') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -36,7 +36,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.userNames')}}</h3>
+      <h3>{{ $t('stylegen.userNames') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -100,7 +100,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.messages')}}</h3>
+      <h3>{{ $t('stylegen.messages') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -138,7 +138,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.time')}}</h3>
+      <h3>{{ $t('stylegen.time') }}</h3>
       <el-card shadow="never">
         <el-form-item :label="$t('stylegen.showTime')">
           <el-switch v-model="form.showTime"></el-switch>
@@ -169,7 +169,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.backgrounds')}}</h3>
+      <h3>{{ $t('stylegen.backgrounds') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -209,7 +209,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.scAndNewMember')}}</h3>
+      <h3>{{ $t('stylegen.scAndNewMember') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -306,7 +306,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.animation')}}</h3>
+      <h3>{{ $t('stylegen.animation') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -357,7 +357,7 @@ import _ from 'lodash'
 
 import FontSelect from './FontSelect'
 import * as common from './common'
-import {mergeConfig} from '@/utils'
+import { mergeConfig } from '@/utils'
 
 export const DEFAULT_CONFIG = {
   showOutlines: true,
@@ -484,7 +484,7 @@ yt-live-chat-renderer * {
   line-height: ${this.form.messageLineHeight || this.form.messageFontSize}px !important;
 }`
     },
-    showOutlinesStyle () {
+    showOutlinesStyle() {
       if (!this.form.showOutlines || !this.form.outlineSize) {
         return ''
       }
@@ -668,11 +668,11 @@ yt-live-chat-ticker-sponsor-item-renderer * {
       try {
         return mergeConfig(JSON.parse(window.localStorage.stylegenConfig), DEFAULT_CONFIG)
       } catch {
-        return {...DEFAULT_CONFIG}
+        return { ...DEFAULT_CONFIG }
       }
     },
     resetConfig() {
-      this.form = {...DEFAULT_CONFIG}
+      this.form = { ...DEFAULT_CONFIG }
     },
 
     getBgStyleForAuthorType(authorType, color) {

frontend/src/views/StyleGenerator/LineLike.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-form label-width="150px" size="mini">
-      <h3>{{$t('stylegen.avatars')}}</h3>
+      <h3>{{ $t('stylegen.avatars') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -17,7 +17,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.userNames')}}</h3>
+      <h3>{{ $t('stylegen.userNames') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -76,7 +76,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.messages')}}</h3>
+      <h3>{{ $t('stylegen.messages') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -111,7 +111,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.time')}}</h3>
+      <h3>{{ $t('stylegen.time') }}</h3>
       <el-card shadow="never">
         <el-form-item :label="$t('stylegen.showTime')">
           <el-switch v-model="form.showTime"></el-switch>
@@ -142,7 +142,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.backgrounds')}}</h3>
+      <h3>{{ $t('stylegen.backgrounds') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -177,7 +177,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.scAndNewMember')}}</h3>
+      <h3>{{ $t('stylegen.scAndNewMember') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -256,7 +256,7 @@
         </el-row>
       </el-card>
 
-      <h3>{{$t('stylegen.animation')}}</h3>
+      <h3>{{ $t('stylegen.animation') }}</h3>
       <el-card shadow="never">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -307,7 +307,7 @@ import _ from 'lodash'
 
 import FontSelect from './FontSelect'
 import * as common from './common'
-import {mergeConfig} from '@/utils'
+import { mergeConfig } from '@/utils'
 
 export const DEFAULT_CONFIG = {
   showAvatars: true,
@@ -477,8 +477,8 @@ yt-live-chat-text-message-renderer #message::before {
   content: "";
   display: inline-block;
   position: absolute;
-  top: ${this.form.showUserNames ? ((this.form.userNameLineHeight || this.form.userNameFontSize) + 10) : 20}px;
-  left: ${this.form.showAvatars ? (this.form.avatarSize + this.form.avatarSize / 4 - 8) : -8}px;
+  top: ${this.form.showUserNames ? (this.form.userNameLineHeight || this.form.userNameFontSize) + 10 : 20}px;
+  left: ${this.form.showAvatars ? this.form.avatarSize + (this.form.avatarSize / 4) - 8 : -8}px;
   border: 8px solid transparent;
   border-right: 18px solid;
   transform: rotate(35deg);
@@ -586,11 +586,11 @@ yt-live-chat-ticker-sponsor-item-renderer * {
       try {
         return mergeConfig(JSON.parse(window.localStorage.stylegenLineLikeConfig), DEFAULT_CONFIG)
       } catch {
-        return {...DEFAULT_CONFIG}
+        return { ...DEFAULT_CONFIG }
       }
     },
     resetConfig() {
-      this.form = {...DEFAULT_CONFIG}
+      this.form = { ...DEFAULT_CONFIG }
     },
 
     getBgStyleForAuthorType(authorType, color) {

frontend/src/views/StyleGenerator/common.js

@@ -53,7 +53,7 @@ yt-live-chat-membership-item-renderer a {
   text-decoration: none !important;
 }`
 
-export function getImportStyle (allFonts) {
+export function getImportStyle(allFonts) {
   let fontsNeedToImport = new Set()
   for (let font of allFonts) {
     if (fonts.NETWORK_FONTS.indexOf(font) !== -1) {
@@ -67,7 +67,7 @@ export function getImportStyle (allFonts) {
   return res.join('\n')
 }
 
-export function getAvatarStyle (config) {
+export function getAvatarStyle(config) {
   return `/* Avatars */
 yt-live-chat-text-message-renderer #author-photo,
 yt-live-chat-text-message-renderer #author-photo img,
@@ -83,7 +83,7 @@ yt-live-chat-membership-item-renderer #author-photo img {
 }`
 }
 
-export function getTimeStyle (config) {
+export function getTimeStyle(config) {
   return `/* Timestamps */
 yt-live-chat-text-message-renderer #timestamp {
   display: ${config.showTime ? 'inline' : 'none'} !important;
@@ -94,7 +94,7 @@ yt-live-chat-text-message-renderer #timestamp {
 }`
 }
 
-export function getAnimationStyle (config) {
+export function getAnimationStyle(config) {
   if (!config.animateIn && !config.animateOut) {
     return ''
   }
@@ -113,13 +113,13 @@ export function getAnimationStyle (config) {
       : ` transform: translateX(${config.reverseSlide ? 16 : -16}px);`
     } }`)
     curTime += config.fadeInTime
-    keyframes.push(`  ${(curTime / totalTime) * 100}% { opacity: 1; transform: none; }`)
+    keyframes.push(`  ${curTime / totalTime * 100}% { opacity: 1; transform: none; }`)
   }
   if (config.animateOut) {
     curTime += config.animateOutWaitTime * 1000
-    keyframes.push(`  ${(curTime / totalTime) * 100}% { opacity: 1; transform: none; }`)
+    keyframes.push(`  ${curTime / totalTime * 100}% { opacity: 1; transform: none; }`)
     curTime += config.fadeOutTime
-    keyframes.push(`  ${(curTime / totalTime) * 100}% { opacity: 0;${!config.slide ? ''
+    keyframes.push(`  ${curTime / totalTime * 100}% { opacity: 0;${!config.slide ? ''
       : ` transform: translateX(${config.reverseSlide ? -16 : 16}px);`
     } }`)
   }
@@ -136,7 +136,7 @@ yt-live-chat-paid-message-renderer {
 }`
 }
 
-export function cssEscapeStr (str) {
+export function cssEscapeStr(str) {
   let res = []
   for (let char of str) {
     res.push(cssEscapeChar(char))
@@ -144,7 +144,7 @@ export function cssEscapeStr (str) {
   return res.join('')
 }
 
-function cssEscapeChar (char) {
+function cssEscapeChar(char) {
   if (!needEscapeChar(char)) {
     return char
   }
@@ -153,7 +153,7 @@ function cssEscapeChar (char) {
   return `\\${hexCode} `
 }
 
-function needEscapeChar (char) {
+function needEscapeChar(char) {
   let code = char.codePointAt(0)
   if (0x20 <= code && code <= 0x7E) {
     return char === '"' || char === '\\'

frontend/src/views/StyleGenerator/index.vue

@@ -11,21 +11,21 @@
       </el-tabs>
 
       <el-form label-width="150px" size="mini">
-        <h3>{{$t('stylegen.result')}}</h3>
+        <h3>{{ $t('stylegen.result') }}</h3>
         <el-card shadow="never">
           <el-form-item label="CSS">
             <el-input v-model="inputResult" ref="result" type="textarea" :rows="20"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="copyResult">{{$t('stylegen.copy')}}</el-button>
-            <el-button @click="resetConfig">{{$t('stylegen.resetConfig')}}</el-button>
+            <el-button type="primary" @click="copyResult">{{ $t('stylegen.copy') }}</el-button>
+            <el-button @click="resetConfig">{{ $t('stylegen.resetConfig') }}</el-button>
           </el-form-item>
         </el-card>
       </el-form>
     </el-col>
 
     <el-col :sm="24" :md="8">
-      <div :style="{position: 'relative', top: `${exampleTop}px`}">
+      <div :style="{ position: 'relative', top: `${exampleTop}px` }">
         <el-form inline style="line-height: 40px">
           <el-form-item :label="$t('stylegen.playAnimation')" style="margin: 0">
             <el-switch v-model="playAnimation" @change="onPlayAnimationChange"></el-switch>
@@ -34,7 +34,7 @@
             <el-switch v-model="exampleBgLight" :active-text="$t('stylegen.light')" :inactive-text="$t('stylegen.dark')"></el-switch>
           </el-form-item>
         </el-form>
-        <div id="example-container" :class="{light: exampleBgLight}">
+        <div id="example-container" :class="{ light: exampleBgLight }">
           <div id="fakebody">
             <room ref="room"></room>
           </div>