💄 style: Update ESLint configuration and add Prettier configuration

.eslintignore

@@ -11,3 +11,4 @@ jest*
 /docs
 /dist
 /javascript
+style.css

.eslintrc.js

@@ -1,7 +1,15 @@
 module.exports = {
   extends: require.resolve('@umijs/lint/dist/config/eslint'),
+  plugins: ['simple-import-sort', 'import', 'typescript-sort-keys'],
   rules: {
-    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
-    'no-param-reassign': 1,
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/no-duplicates': 'error',
+    'typescript-sort-keys/interface': 'error',
+    'typescript-sort-keys/string-enum': 'error',
+    'react/jsx-sort-props': 'error',
+    'react/jsx-no-useless-fragment': 'error',
   },
-}
+};

.gitpod.yml

@@ -0,0 +1,3 @@
+tasks:
+  - init: pnpm install
+    command: pnpm run start

.prettierignore

@@ -25,4 +25,4 @@ yarn-error.log
 .env
 .env.local
 style.css
-javascript/index.js
+javascript/

.prettierrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  pluginSearchDirs: false,
+  plugins: [
+    require.resolve('prettier-plugin-organize-imports'),
+    require.resolve('prettier-plugin-packagejson'),
+  ],
+  printWidth: 100,
+  proseWrap: 'never',
+  singleQuote: true,
+  trailingComma: 'all',
+  overrides: [
+    {
+      files: '*.md',
+      options: {
+        proseWrap: 'preserve',
+      },
+    },
+  ],
+};

.stylelintignore

@@ -0,0 +1 @@
+style.css

package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "build": "umi build",
     "dev": "umi build",
-    "lint": "eslint \"{src,javascript}/**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
     "prepare": "husky install",
     "prettier": "prettier -c --write \"**/**\" && npm run lint && npm run stylelint",
     "release": "semantic-release",
@@ -24,25 +24,27 @@
     "type-check": "tsc -p tsconfig-check.json"
   },
   "lint-staged": {
-    "*.less": [
+    "*.{css,less}": [
       "stylelint --fix",
       "prettier --write"
     ],
     "*.{md,json}": [
       "prettier --write --no-error-on-unmatched-pattern"
     ],
-    "*.json": [
-      "prettier --write --no-error-on-unmatched-pattern"
-    ],
-    "*.jsx": [
+    "*.{js,jsx}": [
+      "stylelint --fix",
       "eslint --fix",
       "prettier --write"
     ],
     "*.{ts,tsx}": [
+      "stylelint --fix",
       "eslint --fix",
       "prettier --parser=typescript --write"
     ]
   },
+  "dependencies": {
+    "lucide-react": "^0.224.0"
+  },
   "devDependencies": {
     "@ant-design/icons": "^5",
     "@commitlint/cli": "^17",
@@ -67,6 +69,9 @@
     "eslint": "^8",
     "eslint-import-resolver-alias": "^1",
     "eslint-import-resolver-typescript": "^3",
+    "eslint-plugin-import": "^2",
+    "eslint-plugin-simple-import-sort": "^10",
+    "eslint-plugin-typescript-sort-keys": "^2",
     "husky": "^8",
     "lightningcss": "^1",
     "lint-staged": "^13",
@@ -99,8 +104,5 @@
     "use-merge-value": "^1",
     "webpack-shell-plugin-next": "^2",
     "zustand": "^4"
-  },
-  "dependencies": {
-    "lucide-react": "^0.224.0"
   }
 }

src/components/Content/index.tsx

@@ -1,9 +1,10 @@
 // import { useAppStore } from '@/store'
-import { FloatButton } from 'antd'
-import React, { useRef } from 'react'
-import styled from 'styled-components'
-import { useAppStore } from '@/store'
-import { shallow } from 'zustand/shallow'
+import { FloatButton } from 'antd';
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import { shallow } from 'zustand/shallow';
+
+import { useAppStore } from '@/store';
 
 const ContentView = styled.div<{ isPromptResizable: boolean }>`
   overflow-x: hidden;
@@ -17,23 +18,23 @@ const ContentView = styled.div<{ isPromptResizable: boolean }>`
   [id$='2img_neg_prompt'] textarea {
     max-height: ${({ isPromptResizable }) => (isPromptResizable ? 'unset' : '84px')};
   }
-`
+`;
 
 interface ContentProps {
-  children: React.ReactNode
-  loading?: boolean
+  children: React.ReactNode;
+  loading?: boolean;
 }
 
 const Content: React.FC<ContentProps> = ({ children }) => {
-  const ref: any = useRef(null)
-  const [setting] = useAppStore((st) => [st.setting], shallow)
+  const ref: any = useRef(null);
+  const [setting] = useAppStore((st) => [st.setting], shallow);
 
   return (
-    <ContentView ref={ref} isPromptResizable={setting.promotTextarea === 'resizable'}>
+    <ContentView isPromptResizable={setting.promotTextarea === 'resizable'} ref={ref}>
       {children}
       <FloatButton.BackTop target={() => ref.current} />
     </ContentView>
-  )
-}
+  );
+};
 
-export default React.memo(Content)
+export default React.memo(Content);