💄 style: Update ESLint configuration and add Prettier configuration

The commit updates eslint configuration by adding new rules to improve code organization. The changes include importing plugins for sorting imports, enforcing import order, and sorting object keys in TypeScript interfaces. Additionally, the commit adds a new prettier configuration file while deleting the old one. The new prettier configuration includes settings for organizing imports, formatting package.json files, and overriding settings for markdown files.

.changelogrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  displayTypes: ['feat', 'fix', 'styles', 'pref'],
-}
+  displayTypes: ['feat', 'fix', 'style', 'pref', 'build'],
+};

.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',
   },
-}
+};

.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',
+      },
+    },
+  ],
+};

.releaserc.js

@@ -1,4 +1,3 @@
 module.exports = {
   extends: ['semantic-release-config-gitmoji'],
-  branches: ['master'],
-}
+};

package.json

@@ -69,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",
     "lint-staged": "^13",
     "postcss-less": "^6",

src/components/Header/Logo.tsx

@@ -1,16 +1,19 @@
-import { darkLogo, lightLogo } from '@/components/Header/style'
-import { useThemeMode } from 'antd-style'
-import React from 'react'
+import { useThemeMode } from 'antd-style';
+import React from 'react';
+
+import { darkLogo, lightLogo } from '@/components/Header/style';
 
 interface LogoProps {
-  size?: number
+  size?: number;
 
-  style?: React.CSSProperties
+  style?: React.CSSProperties;
 }
 
 const Logo: React.FC<LogoProps> = ({ size = 20, style }) => {
-  const { isDarkMode } = useThemeMode()
-  return <img src={isDarkMode ? darkLogo : lightLogo} alt="logo" style={{ height: size, ...style }} />
-}
+  const { isDarkMode } = useThemeMode();
+  return (
+    <img alt="logo" src={isDarkMode ? darkLogo : lightLogo} style={{ height: size, ...style }} />
+  );
+};
 
-export default React.memo(Logo)
+export default React.memo(Logo);

src/components/Header/index.tsx

@@ -1,12 +1,14 @@
-import PackageJson from '@/../package.json'
-import { useAppStore } from '@/store'
-import { GithubOutlined } from '@ant-design/icons'
-import { Button, Dropdown, Space } from 'antd'
-import React, { ReactNode } from 'react'
-import styled from 'styled-components'
-import { shallow } from 'zustand/shallow'
-import Logo from './Logo'
-import { ThemeList, themeIcon } from './style'
+import { GithubOutlined } from '@ant-design/icons';
+import { Button, Dropdown, Space } from 'antd';
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import { shallow } from 'zustand/shallow';
+
+import PackageJson from '@/../package.json';
+import { useAppStore } from '@/store';
+
+import Logo from './Logo';
+import { themeIcon, ThemeList } from './style';
 
 /******************************************************
  *********************** Style *************************
@@ -21,41 +23,42 @@ const View = styled.div`
 
   background: ${({ theme }) => theme.colorBgContainer};
   border-bottom: 1px solid ${({ theme }) => theme.colorBorderSecondary};
-`
+`;
 
 /******************************************************
  ************************* Dom *************************
  ******************************************************/
 
 interface HeaderProps {
-  children?: ReactNode
+  children?: ReactNode;
 }
 
 const Header: React.FC<HeaderProps> = ({ children }) => {
-  const [themeMode, onSetThemeMode] = useAppStore((st) => [st.themeMode, st.onSetThemeMode], shallow)
+  const [themeMode, onSetThemeMode] = useAppStore(
+    (st) => [st.themeMode, st.onSetThemeMode],
+    shallow,
+  );
 
   return (
-    <>
-      <View>
-        <Logo />
-        <Space>
-          {children}
-          <a href={PackageJson.repository.url} target="_blank" rel="noreferrer">
-            <Button icon={<GithubOutlined />} />
-          </a>
-          <Dropdown
-            trigger={['click']}
-            placement="bottomRight"
-            menu={{
-              items: ThemeList({ onSetThemeMode }),
-            }}
-          >
-            <Button icon={themeIcon[themeMode]} />
-          </Dropdown>
-        </Space>
-      </View>
-    </>
-  )
-}
+    <View>
+      <Logo />
+      <Space>
+        {children}
+        <a href={PackageJson.repository.url} rel="noreferrer" target="_blank">
+          <Button icon={<GithubOutlined />} />
+        </a>
+        <Dropdown
+          menu={{
+            items: ThemeList({ onSetThemeMode }),
+          }}
+          placement="bottomRight"
+          trigger={['click']}
+        >
+          <Button icon={themeIcon[themeMode]} />
+        </Dropdown>
+      </Space>
+    </View>
+  );
+};
 
-export default React.memo(Header)
+export default React.memo(Header);

src/components/Header/style.tsx

@@ -1,34 +1,36 @@
-import { MenuProps } from 'antd'
+import { MenuProps } from 'antd';
 
-export const darkLogo = 'https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg'
-export const lightLogo = 'https://gw.alipayobjects.com/zos/bmw-prod/e146116d-c65a-4306-a3d2-bb8d05e1c49b.svg'
+export const darkLogo =
+  'https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg';
+export const lightLogo =
+  'https://gw.alipayobjects.com/zos/bmw-prod/e146116d-c65a-4306-a3d2-bb8d05e1c49b.svg';
 
 export const themeIcon = {
   auto: (
-    <span role="img" className="anticon anticon-github">
-      <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor">
+    <span className="anticon anticon-github" role="img">
+      <svg fill="currentColor" height="1em" viewBox="0 0 16 16" width="1em">
         <path d="M14.595 8a6.595 6.595 0 1 1-13.19 0 6.595 6.595 0 0 1 13.19 0ZM8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm0 2.014v11.972A5.986 5.986 0 0 0 8 2.014Z"></path>
       </svg>
     </span>
   ),
   light: (
-    <span role="img" className="anticon anticon-github">
-      <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor">
+    <span className="anticon anticon-github" role="img">
+      <svg fill="currentColor" height="1em" viewBox="0 0 16 16" width="1em">
         <path d="M8 13a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1ZM8 3a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v1a1 1 0 0 1-1 1Zm7 4a1 1 0 1 1 0 2h-1a1 1 0 1 1 0-2h1ZM3 8a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1Zm9.95 3.536.707.707a1 1 0 0 1-1.414 1.414l-.707-.707a1 1 0 0 1 1.414-1.414Zm-9.9-7.072-.707-.707a1 1 0 0 1 1.414-1.414l.707.707A1 1 0 0 1 3.05 4.464Zm9.9 0a1 1 0 0 1-1.414-1.414l.707-.707a1 1 0 0 1 1.414 1.414l-.707.707Zm-9.9 7.072a1 1 0 0 1 1.414 1.414l-.707.707a1 1 0 0 1-1.414-1.414l.707-.707ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 6.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"></path>
       </svg>
     </span>
   ),
   dark: (
-    <span role="img" className="anticon anticon-github">
-      <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor">
+    <span className="anticon anticon-github" role="img">
+      <svg fill="currentColor" height="1em" viewBox="0 0 16 16" width="1em">
         <path d="M8.218 1.455c3.527.109 6.327 3.018 6.327 6.545 0 3.6-2.945 6.545-6.545 6.545a6.562 6.562 0 0 1-6.036-4h.218c3.6 0 6.545-2.945 6.545-6.545 0-.91-.182-1.745-.509-2.545m0-1.455c-.473 0-.909.218-1.2.618-.29.4-.327.946-.145 1.382.254.655.4 1.31.4 2 0 2.8-2.291 5.09-5.091 5.09h-.218c-.473 0-.91.22-1.2.62-.291.4-.328.945-.146 1.38C1.891 14.074 4.764 16 8 16c4.4 0 8-3.6 8-8a7.972 7.972 0 0 0-7.745-8h-.037Z"></path>
       </svg>
     </span>
   ),
-}
+};
 
 export const ThemeList = ({ onSetThemeMode }: any): MenuProps['items'] => [
   { icon: themeIcon.auto, label: 'Auto', key: 'auto', onClick: () => onSetThemeMode('auto') },
   { icon: themeIcon.light, label: 'Light', key: 'light', onClick: () => onSetThemeMode('light') },
   { icon: themeIcon.dark, label: 'Dark', key: 'dark', onClick: () => onSetThemeMode('dark') },
-]
+];

src/layouts/index.tsx

@@ -1,11 +1,14 @@
-import { Header } from '@/components'
-import { useAppStore } from '@/store'
-import { ThemeProvider, setupStyled } from 'antd-style'
-import 'antd/dist/reset.css'
-import styled, { ThemeContext } from 'styled-components'
-import { Outlet } from 'umi'
-import { shallow } from 'zustand/shallow'
-import GlobalStyle from './GlobalStyle'
+import 'antd/dist/reset.css';
+
+import { setupStyled, ThemeProvider } from 'antd-style';
+import styled, { ThemeContext } from 'styled-components';
+import { Outlet } from 'umi';
+import { shallow } from 'zustand/shallow';
+
+import { Header } from '@/components';
+import { useAppStore } from '@/store';
+
+import GlobalStyle from './GlobalStyle';
 
 /******************************************************
  *********************** Style *************************
@@ -19,7 +22,7 @@ const View = styled.div`
 
   width: 100vw;
   height: 100vh;
-`
+`;
 
 const Content = styled.div`
   position: relative;
@@ -29,15 +32,15 @@ const Content = styled.div`
   flex: 1;
 
   width: 100vw;
-`
+`;
 
 /******************************************************
  ************************* Dom *************************
  ******************************************************/
 
 const Layout: React.FC = () => {
-  const [themeMode] = useAppStore((st) => [st.themeMode], shallow)
-  setupStyled({ ThemeContext })
+  const [themeMode] = useAppStore((st) => [st.themeMode], shallow);
+  setupStyled({ ThemeContext });
   return (
     <ThemeProvider themeMode={themeMode}>
       <GlobalStyle />
@@ -48,7 +51,7 @@ const Layout: React.FC = () => {
         </Content>
       </View>
     </ThemeProvider>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;

src/pages/App.tsx

@@ -1,6 +1,7 @@
-import React from 'react'
+import React from 'react';
+
 const App: React.FC = () => {
-  return <div>CanisMinor Template</div>
-}
+  return <div>CanisMinor Template</div>;
+};
 
-export default App
+export default App;

src/store/index.tsx

@@ -1,17 +1,17 @@
-import { ThemeMode } from 'antd-style'
-import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
+import { ThemeMode } from 'antd-style';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
 
 export interface AppState {
-  themeMode: ThemeMode
-  onSetThemeMode: (themeMode: ThemeMode) => void
+  onSetThemeMode: (themeMode: ThemeMode) => void;
+  themeMode: ThemeMode;
 }
 
 export const useAppStore = create<AppState>()(
   devtools((set) => ({
     themeMode: 'auto',
     onSetThemeMode: (themeMode) => {
-      set(() => ({ themeMode }), false, 'onSetThemeMode')
+      set(() => ({ themeMode }), false, 'onSetThemeMode');
     },
-  }))
-)
+  })),
+);