Merge pull request #57 from KUIT-Space/feat#eslint

Feat#eslint

.eslintrc.cjs

@@ -2,17 +2,46 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "plugin:react/recommended", // 리액트 추천 룰셋
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended", // 타입스크립트 추천 룰셋
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended", // eslint의 포매팅 기능을 prettier로 사용함. 항상 마지막에 세팅 되어야 함. (eslint-plugin-prettier)
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh", "simple-import-sort"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        groups: [
+          // Packages `react` related packages come first.
+          ["^react", "^@?\\w"],
+          // Internal packages.
+          ["^(@|components)(/.*|$)"],
+          // Side effect imports.
+          ["^\\u0000"],
+          // Parent imports. Put `..` last.
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+          // Style imports.
+          ["^.+\\.?(css)$"],
+        ],
+      },
     ],
+    "prettier/prettier": [
+      "warn",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "react/react-in-jsx-scope": "off",
+  },
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: "latest",
   },
-}
+};

.prettierrc

@@ -1,9 +1,10 @@
 {
   "singleQuote": false,
+  "endOfLine": "auto",
   "parser": "typescript",
   "semi": true,
   "tabWidth": 2,
   "useTabs": false,
   "trailingComma": "all",
   "printWidth": 100
-}
+}

.vscode/settings.json

@@ -1,12 +1,27 @@
 {
+  // vscode
   "editor.codeActionsOnSave": {
-    "source.fixAll": "always",
+    "source.fixAll": "never",
+    "source.fixAll.eslint": "explicit",
   },
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.formatOnPaste": true,
   "editor.formatOnSave": true,
-  "editor.tabSize": 2,
+  "files.insertFinalNewline": true,
+
+  // ESLint
+  // ref: https://github.com/microsoft/vscode-eslint
+  // plugin: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
+  "eslint.codeActionsOnSave.mode": "problems",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact", 
+    "typescript",
+    "typescriptreact"
+  ],
 
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-}
+  // "editor.defaultFormatter": "esbenp.prettier-vscode",
+  // "[javascript]": {
+  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
+  // },
+}

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint--fix": "eslint --fix . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -31,10 +32,12 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "prettier": "^3.3.2",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "prettier": "^3.3.3",
     "typescript": "^5.2.2",
     "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2"

src/pages/ChatPage/ChatCreatePage/ChatCreatePage.styled.ts

@@ -1,7 +1,8 @@
-import { Input } from "@/components/Input";
 import styled from "styled-components";
+
 import SearchIcon from "@/assets/ChatPage/icon_search.svg";
 import { BottomBtn } from "@/components/BottomBtn";
+import { Input } from "@/components/Input";
 
 export const ChatroomAddImgBtn = styled.label<{ $backgroundImage: string | null | undefined }>`
   display: flex;

src/pages/ChatPage/ChatCreatePage/ChatCreatePage.tsx

@@ -1,17 +1,19 @@
-import TopBarText, { LeftEnum } from "@/components/TopBarText";
+import { useEffect, useState } from "react";
+import { choseongIncludes, hangulIncludes } from "es-hangul";
+
 import ChatroomImg from "@/assets/ChatPage/btn_chatroom_img.svg";
+import CheckBox from "@/components/CheckBox";
+import { Input } from "@/components/Input";
+import TopBarText, { LeftEnum } from "@/components/TopBarText";
+
 import {
+  ChatCreateBottomBtn,
   ChatCreateContainer,
   ChatroomAddImgBtn,
   ChatroomName,
   InviteInput,
   Member,
-  ChatCreateBottomBtn,
 } from "./ChatCreatePage.styled";
-import { Input } from "@/components/Input";
-import { useEffect, useState } from "react";
-import { hangulIncludes, choseongIncludes } from "es-hangul";
-import CheckBox from "@/components/CheckBox";
 
 interface member {
   userId: number;

src/pages/ChatPage/ChatPage.tsx

@@ -1,8 +1,10 @@
-import TopBarText, { LeftEnum } from "@/components/TopBarText";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { ChatListContainer, ChatContainer } from "./ChatPage.styled";
+
+import TopBarText, { LeftEnum } from "@/components/TopBarText";
+
 import { AddChatBtn } from "./ChatAddBtn.styled";
+import { ChatContainer, ChatListContainer } from "./ChatPage.styled";
 
 const ChatPage = () => {
   const navigate = useNavigate();

vite.config.ts

@@ -1,19 +1,19 @@
+import react from "@vitejs/plugin-react-swc";
 import * as path from "path";
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
 import vitePluginSvgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [react(), vitePluginSvgr()],
-	resolve: {
-		alias: {
-			"@": path.resolve(__dirname, "./src"),
-		},
-	},
-	build: {
-		rollupOptions: {
-			external: ["react", "react-dom", "styled-components"],
-		},
-	},
+  plugins: [react(), vitePluginSvgr()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    rollupOptions: {
+      external: ["react", "react-dom", "styled-components"],
+    },
+  },
 });