🚨 improve lint config

Author: ymyqwe

.eslintrc

@@ -3,7 +3,7 @@
   "parserOptions": {
     "sourceType": "module"
   },
-  "extends": ["google", "eslint:recommended", "plugin:react/recommended"],
+  "extends": ["alloy", "alloy/react", "alloy/typescript"],
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
     "no-console": 1,

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   parserOptions: {
     sourceType: 'module'
   },
-  extends: ['google', 'eslint:recommended', 'plugin:react/recommended'],
+  extends: ['alloy', 'alloy/react', 'alloy/typescript'],
   plugins: ['react', '@typescript-eslint'],
   rules: {
     'no-console': 1,

package.json

@@ -43,6 +43,7 @@
     "babel-preset-react": "^6.22.0",
     "clean-webpack-plugin": "^2.0.1",
     "css-loader": "^3.2.0",
+    "eslint-config-alloy": "^3.5.0",
     "eslint-plugin-react": "^7.11.1",
     "express": "^4.14.1",
     "file-loader": "^3.0.1",

src/components/ChatInput.tsx

@@ -1,9 +1,18 @@
 import React, { Component } from 'react';
 
-interface MyProps { socket: any; myId: string; myName: string }
-interface MyState { socket: any; message: string; myId: string; myName: string }
+interface MyProps {
+  socket: any;
+  myId: string;
+  myName: string;
+}
+interface MyState {
+  socket: any;
+  message: string;
+  myId: string;
+  myName: string;
+}
 export default class ChatInput extends Component<MyProps, MyState> {
-  constructor(props) {
+  public constructor(props: MyProps) {
     super(props);
     this.state = {
       socket: props.socket,
@@ -14,25 +23,26 @@ export default class ChatInput extends Component<MyProps, MyState> {
   }
 
   // 监控input变化
-  handleChange(e) {
+  public handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     this.setState({ message: e.target.value });
   }
 
   // 点击提交或按回车
 
-  handleClick(e) {
+  public handleClick(e: MouseEvent) {
     e.preventDefault();
     this.sendMessage();
   }
-  handleKeyPress(e) {
-    if (e.key == 'Enter') {
+
+  public handleKeyPress(e: KeyboardEvent): boolean {
+    if (e.key === 'Enter') {
       this.sendMessage();
     }
     return false;
   }
 
   // 发送聊天信息
-  sendMessage() {
+  public sendMessage(): boolean {
     const message = this.state.message;
     const socket = this.state.socket;
     if (message) {
@@ -46,7 +56,7 @@ export default class ChatInput extends Component<MyProps, MyState> {
     }
     return false;
   }
-  render() {
+  public render(): JSX.Element {
     return (
       <div className="bottom-area">
         <div className="input-box">

src/components/ChatRoom.tsx

@@ -5,15 +5,15 @@ import { Context } from '../context';
 
 // 生成消息id
 const generateMsgId = () => {
-  return new Date().getTime() + '' + Math.floor(Math.random() * 899 + 100);
+  return String(new Date().getTime()) + Math.floor(Math.random() * 899 + 100);
 };
 
 // 时间格式
 const generateTime = () => {
   const hour = new Date().getHours();
   const minute = new Date().getMinutes();
-  const hourText = hour === 0 ? '00' : hour + '';
-  const minuteText = minute < 10 ? '0' + minute : minute + '';
+  const hourText = hour === 0 ? '00' : String(hour);
+  const minuteText = minute < 10 ? '0' + minute : String(minute);
   return hourText + ':' + minuteText;
 };
 

src/components/Messages.tsx

@@ -2,10 +2,10 @@ import React, { useContext, useEffect, useRef } from 'react';
 import { Context } from '../context';
 
 const Message = (props) => {
-  if (props.msgType == 'system') {
+  if (props.msgType === 'system') {
     return (
       <div className="one-message system-message">
-        {props.msgUser} {props.action == 'login' ? '进入了聊天室' : '离开了聊天室'} <span className="time">&nbsp;{props.time}</span>
+        {props.msgUser} {props.action === 'login' ? '进入了聊天室' : '离开了聊天室'} <span className="time">&nbsp;{props.time}</span>
       </div>
     );
   } else {
@@ -33,7 +33,7 @@ const Messages = (props) => {
   return (
     <div className="messages" ref={messageList}>
       {messages.map((message) => (
-        <Message key={message.msgId} msgType={message.type} msgUser={message.username} action={message.action} isMe={uid == message.uid ? true : false} time={message.time} />
+        <Message key={message.msgId} msgType={message.type} msgUser={message.username} action={message.action} isMe={uid === message.uid ? true : false} time={message.time} />
       ))}
     </div>
   );

src/container/App.tsx

@@ -9,7 +9,7 @@ const userState = (username) => {
 };
 
 const generateUid = () => {
-  return new Date().getTime() + '' + Math.floor(Math.random() * 999 + 1);
+  return String(new Date().getTime()) + Math.floor(Math.random() * 999 + 1);
 };
 
 const App = (props) => {
@@ -24,7 +24,7 @@ const App = (props) => {
     state.socket.emit('login', { uid, username });
   };
   const handleKeyPress = (e) => {
-    if (e.key == 'Enter') {
+    if (e.key === 'Enter') {
       handleLogin();
     }
     return false;