perf: 优化stylelint、eslint，格式化代码等

huangmingfu · Dec 16, 2024 · e3449a1 · e3449a1
1 parent 3975e17
commit e3449a1
Show file tree

Hide file tree

Showing 13 changed files with 32 additions and 172 deletions.
diff --git a/README.en-US.md b/README.en-US.md
@@ -122,4 +122,8 @@ The **React-Ts-Template** project template aims to reduce developers' tedious co
 > [React-Ts-Template](https://github.com/huangmingfu/react-ts-template)
 
 ## Note
-> Some UI libraries have not yet supported React 19. Please be cautious when installing and using them.
+> Currently, some UI libraries do not support React 19. Please be cautious when installing and using them.
+> This project does not use any features specific to version 19. If needed, you can directly downgrade to version 18 using the following command.
+```bash
+pnpm install react@18.3.1 react-dom@18.3.1
+```
diff --git a/README.md b/README.md
@@ -124,4 +124,8 @@ GitHub 项目地址：[React-Ts-Template](https://github.com/huangmingfu/react-t
 > [React-Ts-Template](https://github.com/huangmingfu/react-ts-template)
 
 ## 注意
-> 目前有一些ui库还未支持React19，注意甄别安装使用。
+> 目前有一些ui库还未支持React19，注意甄别安装使用。  
+> 本项目并未使用19版本的相关特性，如需要，可以直接使用如下命令降级到18版本。  
+```bash
+pnpm install react@18.3.1 react-dom@18.3.1
+```
diff --git a/eslint.config.js b/eslint.config.js
@@ -6,7 +6,7 @@ import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
-  { ignores: ['dist', '/dist*', '/config/', '/build/', '/node_modules/*', '/*.js'] },
+  { ignores: ['dist', 'dist*', 'node_modules'] },
   {
     settings: { react: { version: '19.0' } },
     extends: [js.configs.recommended, ...tseslint.configs.recommended],

diff --git a/package.json b/package.json
@@ -29,9 +29,9 @@
     "preview:dev": "pnpm vite preview -m dev",
     "preview:test": "pnpm vite preview -m test",
     "preview:pro": "pnpm vite preview -m pro",
-    "lint:eslint": "eslint --max-warnings 0  \"{src,mock,build}/**/*.{ts,tsx,js,jsx,cjs,mjs}\" --fix",
-    "lint:format": "prettier --write \"./**/*.{ts,tsx,js,jsx,cjs,mjs,html}\"",
-    "lint:style": "stylelint \"./**/*.{css,scss}\" --fix",
+    "lint:eslint": "eslint --max-warnings 0  \"**/*.{ts,tsx,js,jsx,cjs,mjs}\" --fix",
+    "lint:format": "prettier --write \"**/*.{ts,tsx,js,jsx,cjs,mjs,html}\"",
+    "lint:style": "stylelint \"**/*.{css,scss}\" --fix",
     "lint:all": "pnpm run lint:eslint && pnpm run lint:style && pnpm run lint:format",
     "lint:lint-staged": "lint-staged",
     "prepare": "husky install",

diff --git a/src/api/guild.ts → src/api/test.ts b/src/api/guild.ts → src/api/test.ts
diff --git a/src/components/loading/index.scss b/src/components/loading/index.scss
@@ -3,11 +3,11 @@
   inset: 0;
   z-index: 9999999;
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
   background-color: rgba($color: #000, $alpha: 20%);
-  justify-content: center;
-  align-items: center;
 
   svg {
     width: 100px;

diff --git a/src/styles/css/reset.css b/src/styles/css/reset.css
@@ -1,8 +1,8 @@
 *,
 *::after,
 *::before {
-  outline: none;
   box-sizing: border-box;
+  outline: none;
 }
 
 html,
@@ -145,8 +145,8 @@ sub {
 }
 
 table {
-  border-collapse: collapse;
   border-spacing: 0;
+  border-collapse: collapse;
 }
 
 input,
@@ -160,9 +160,9 @@ button {
 select {
   text-indent: 0.01px;
   text-overflow: '';
+  appearance: none;
   border: 0;
   border-radius: 0;
-  appearance: none;
 }
 
 select::-ms-expand {

diff --git a/src/styles/scss/global.scss b/src/styles/scss/global.scss
@@ -21,12 +21,12 @@
 
 .route-loading::before {
   position: absolute;
+  inset: 0 100% 0 0;
   margin: 2px;
+  content: '';
   background: currentcolor;
   border-radius: inherit;
-  content: '';
   animation: l6 2s infinite;
-  inset: 0 100% 0 0;
 
   @keyframes l6 {
     100% {

diff --git a/src/styles/scss/tools.scss b/src/styles/scss/tools.scss
@@ -5,8 +5,8 @@
 
 /** 滚动条 */
 @mixin scrollbar($size: 7px, $color: rgba(0, 0, 0, 0.5)) {
-  scrollbar-width: thin;
   scrollbar-color: $color transparent;
+  scrollbar-width: thin;
 
   &::-webkit-scrollbar-thumb {
     background-color: $color;

diff --git a/src/views/home/index.scss b/src/views/home/index.scss
@@ -1,16 +1,16 @@
 .pg-home {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   height: 100vh;
   padding-top: 200px;
   text-align: center;
-  flex-direction: column;
-  align-items: center;
 
   .logo {
     height: 6em;
     padding: 1.5em;
-    will-change: filter;
     transition: filter 300ms;
+    will-change: filter;
   }
 
   .logo:hover {
@@ -57,10 +57,10 @@
 
   body {
     display: flex;
+    place-items: center;
     min-width: 320px;
     min-height: 100vh;
     margin: 0;
-    place-items: center;
   }
 
   h1 {

diff --git a/src/views/test/count/index.scss b/src/views/test/count/index.scss
@@ -1,12 +1,12 @@
 $prefix-cls: 'pg-guild-count';
 
 .#{$prefix-cls} {
-  display: flex;
-  font-size: 17px;
   box-sizing: border-box;
+  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  font-size: 17px;
 
   &__count {
     font-weight: bold;

diff --git a/src/views/test/create/index.scss b/src/views/test/create/index.scss
@@ -1,7 +1,7 @@
 .pg-guild-create {
+  box-sizing: border-box;
   width: 155px;
   font-size: 17px;
-  box-sizing: border-box;
 
   &__count {
     font-weight: bold;

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -3,8 +3,9 @@ export default {
   root: true,
   // 继承某些已有的规则
   extends: [
-    'stylelint-config-standard', // 配置 stylelint 拓展插件
-    'stylelint-config-standard-scss' // 配置 stylelint scss 插件
+    'stylelint-config-standard', // css 标准配置
+    'stylelint-config-standard-scss', // scss 标准配置
+    'stylelint-config-recess-order' // CSS 属性排序配置
   ],
   plugins: ['stylelint-order'],
   rules: {
@@ -19,155 +20,6 @@ export default {
       {
         ignorePseudoClasses: ['global', 'export']
       }
-    ],
-    // css属性排序
-    'order/properties-order': [
-      'position',
-      'top',
-      'right',
-      'bottom',
-      'left',
-      'z-index',
-      'display',
-      'float',
-      'width',
-      'height',
-      'max-width',
-      'max-height',
-      'min-width',
-      'min-height',
-      'padding',
-      'padding-top',
-      'padding-right',
-      'padding-bottom',
-      'padding-left',
-      'margin',
-      'margin-top',
-      'margin-right',
-      'margin-bottom',
-      'margin-left',
-      'margin-collapse',
-      'margin-top-collapse',
-      'margin-right-collapse',
-      'margin-bottom-collapse',
-      'margin-left-collapse',
-      'overflow',
-      'overflow-x',
-      'overflow-y',
-      'clip',
-      'clear',
-      'font',
-      'font-family',
-      'font-size',
-      'font-smoothing',
-      'osx-font-smoothing',
-      'font-style',
-      'font-weight',
-      'hyphens',
-      'src',
-      'line-height',
-      'letter-spacing',
-      'word-spacing',
-      'color',
-      'text-align',
-      'text-decoration',
-      'text-indent',
-      'text-overflow',
-      'text-rendering',
-      'text-size-adjust',
-      'text-shadow',
-      'text-transform',
-      'word-break',
-      'word-wrap',
-      'white-space',
-      'vertical-align',
-      'list-style',
-      'list-style-type',
-      'list-style-position',
-      'list-style-image',
-      'pointer-events',
-      'cursor',
-      'background',
-      'background-attachment',
-      'background-color',
-      'background-image',
-      'background-position',
-      'background-repeat',
-      'background-size',
-      'border',
-      'border-collapse',
-      'border-top',
-      'border-right',
-      'border-bottom',
-      'border-left',
-      'border-color',
-      'border-image',
-      'border-top-color',
-      'border-right-color',
-      'border-bottom-color',
-      'border-left-color',
-      'border-spacing',
-      'border-style',
-      'border-top-style',
-      'border-right-style',
-      'border-bottom-style',
-      'border-left-style',
-      'border-width',
-      'border-top-width',
-      'border-right-width',
-      'border-bottom-width',
-      'border-left-width',
-      'border-radius',
-      'border-top-right-radius',
-      'border-bottom-right-radius',
-      'border-bottom-left-radius',
-      'border-top-left-radius',
-      'border-radius-topright',
-      'border-radius-bottomright',
-      'border-radius-bottomleft',
-      'border-radius-topleft',
-      'content',
-      'quotes',
-      'outline',
-      'outline-offset',
-      'opacity',
-      'filter',
-      'visibility',
-      'size',
-      'zoom',
-      'transform',
-      'box-align',
-      'box-flex',
-      'box-orient',
-      'box-pack',
-      'box-shadow',
-      'box-sizing',
-      'table-layout',
-      'animation',
-      'animation-delay',
-      'animation-duration',
-      'animation-iteration-count',
-      'animation-name',
-      'animation-play-state',
-      'animation-timing-function',
-      'animation-fill-mode',
-      'transition',
-      'transition-delay',
-      'transition-duration',
-      'transition-property',
-      'transition-timing-function',
-      'background-clip',
-      'backface-visibility',
-      'resize',
-      'appearance',
-      'user-select',
-      'interpolation-mode',
-      'direction',
-      'marks',
-      'page',
-      'set-link-source',
-      'unicode-bidi',
-      'speak'
     ]
   },
   ignoreFiles: [