config: 🔧 新增Prettier/ESlint/StyleLint/EditorConfig代码规范

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+/build
+/dist

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+        node: true
+    },
+    extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
+    overrides: [],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+    },
+    settings: {
+        'import/resolver': {
+            node: {
+                extensions: ['.tsx', '.ts', '.js', '.json']
+            },
+            typescript: {}
+        }
+    },
+    plugins: ['react', '@typescript-eslint'],
+    rules: {
+        'import/extensions': [
+            ERROR,
+            'ignorePackages',
+            {
+                ts: 'never',
+                tsx: 'never',
+                js: 'never'
+            }
+        ]
+    }
+};

.stylelintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+    extends: ['stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-config-prettier'],
+    plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties', 'stylelint-scss'],
+    rules: {
+        'plugin/declaration-block-no-ignored-properties': true,
+        'comment-empty-line-before': null,
+        'declaration-empty-line-before': null,
+        'function-name-case': 'lower',
+        'no-descending-specificity': null,
+        'no-invalid-double-slash-comments': null,
+        'block-no-empty': null,
+        'value-keyword-case': null,
+        'rule-empty-line-before': ['always', {except: ['after-single-line-comment', 'first-nested']}],
+        'at-rule-no-unknown': null,
+        'scss/at-rule-no-unknown': true
+    },
+    ignoreFiles: ['node_modules/**/*', 'build/**/*', 'dist/**/*', 'src/assets/font/*']
+};

package.json

@@ -30,6 +30,23 @@
         "ie >= 9",
         "not op_mini all"
     ],
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged",
+            "commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS"
+        }
+    },
+    "lint-staged": {
+        "*.{ts,tsx,js}": [
+            "eslint --config .eslintrc.js"
+        ],
+        "*.{css,less,scss}": [
+            "stylelint --config .stylelintrc.js"
+        ],
+        "*.{ts,tsx,js,json,html,yml,css,less,scss,md}": [
+            "prettier --write"
+        ]
+    },
     "devDependencies": {
         "@babel/cli": "^7.20.7",
         "@babel/core": "^7.20.12",
@@ -40,22 +57,29 @@
         "@babel/runtime-corejs3": "^7.20.13",
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
+        "@typescript-eslint/eslint-plugin": "^5.51.0",
+        "@typescript-eslint/parser": "^5.51.0",
         "autoprefixer": "^10.4.13",
         "babel-loader": "8.2.2",
         "chalk": "4.1.2",
         "clean-webpack-plugin": "^4.0.0",
         "compression-webpack-plugin": "^10.0.0",
         "copy-webpack-plugin": "^11.0.0",
+        "core-js": "^3.27.2",
         "css-loader": "^6.7.3",
         "css-minimizer-webpack-plugin": "^4.2.2",
         "detect-port-alt": "^1.1.6",
         "env-cmd": "^10.1.0",
         "error-overlay-webpack-plugin": "^1.1.1",
+        "eslint": "^8.33.0",
+        "eslint-plugin-react": "^7.32.2",
         "fork-ts-checker-webpack-plugin": "^7.3.0",
         "html-webpack-plugin": "^5.5.0",
+        "husky": "^8.0.3",
         "ip": "^1.1.8",
         "less": "^4.1.3",
         "less-loader": "^11.1.0",
+        "lint-staged": "^13.1.0",
         "mini-css-extract-plugin": "^2.7.2",
         "node-sass": "^8.0.0",
         "postcss-flexbugs-fixes": "^5.0.2",
@@ -66,6 +90,13 @@
         "prettier": "^2.8.3",
         "sass-loader": "^13.2.0",
         "style-loader": "^3.3.1",
+        "stylelint": "^14.16.1",
+        "stylelint-config-prettier": "^9.0.4",
+        "stylelint-config-rational-order": "^0.1.2",
+        "stylelint-config-standard": "^29.0.0",
+        "stylelint-declaration-block-no-ignored-properties": "^2.6.0",
+        "stylelint-order": "^6.0.1",
+        "stylelint-scss": "^4.3.0",
         "terser-webpack-plugin": "^5.3.6",
         "typescript": "^4.9.4",
         "webpack": "^5.75.0",

src/App.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
+import Home from '@/view/Home';
 import '@/styles/index.scss';
 
 function App() {
-    return <div className='app'>React App</div>;
+    return (
+        <div className='app'>
+            <Home name='React App' />
+        </div>
+    );
 }
 
 export default App;

src/interface/index.md

@@ -0,0 +1 @@
+## ts类型定义

src/view/Home.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './home.scss';
+
+interface HomeProps {
+    name: string;
+}
+
+const Home: React.FC<HomeProps> = (props) => {
+    const {name} = props;
+    return (
+        <div className='home-root'>
+            <span className='text'>{`Hello ${name}`}</span>
+        </div>
+    );
+};
+
+export default Home;

src/view/home.scss

@@ -0,0 +1,13 @@
+.home-root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 500px;
+    height: 300px;
+    font-size: 50px;
+    background: #9ae37533;
+
+    .text {
+        color: #252525;
+    }
+}