react | 创建新项目 | 配置eslint和prettier 、 use-immer 、 sass

react官网：zh-hans.react.dev/learn

配置eslint和prettier

初始化项目

npx create-react-app my-app
cd my-app

//启动
npm start

安装 ESLint 和 Prettier

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier：关闭所有不必要或可能与 Prettier 冲突的 ESLint 规则。
eslint-plugin-prettier：将 Prettier 作为 ESLint 规则来运行，并且报告格式错误为 ESLint 错误

配置 ESLint

在项目根目录下创建一个 .eslintrc.json 文件，并添加以下内容：

{
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:prettier/recommended"
  ],
  "rules": {
    // 在这里可以添加自定义的 ESLint 规则
  }
}

配置 Prettier

在项目根目录下创建一个 .prettierrc 文件，或者使用 .prettierrc.json，并添加你的 Prettier 配置。例如：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80
}

配置 VSCode

为了使 ESLint 和 Prettier 在 VSCode 中生效，可以在项目中创建一个 .vscode/settings.json 文件（如果没有的话），并添加以下内容：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

或者一般在vscode的设置里找：

安装 VSCode 插件

确保你已经安装了以下 VSCode 插件：

ESLint
Prettier - Code formatter

添加格式化脚本（可选）

在 package.json 中，添加以下脚本以便手动运行格式化：

"scripts": {
  "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
}

运行 ESLint 检查

你可以在项目根目录中运行以下命令来检查 ESLint 错误：

npx eslint src/**/*.{js,jsx,ts,tsx}

简化项目

删除不必要的文件

简化代码

在src/App.js中:

import React from 'react';

function App() {
    return (
        <div className="App">
            <h1>This is React App</h1>
        </div>
    );
}

export default App;

在src/index.js中:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
);

在public/index.html中：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

配置use-immer库

如果你的 state 有多层的嵌套，你或许应该考虑将其扁平化。但是，如果你不想改变 state 的数据结构，你可能更喜欢用一种更便捷的方式来实现嵌套展开的效果。Immer 是一个非常流行的库，它可以让你使用简便但可以直接修改的语法编写代码，并会帮你处理好复制的过程。通过使用 Immer，你写出的代码看起来就像是你“打破了规则”而直接修改了对象：

npm install use-immer

import { useImmer } from 'use-immer';

export default function Form() {
  function handleNameChange(e) {
    updatePerson(draft => {
      draft.name = e.target.value;
    });
  }
 }

配置sass

sass官网：sass-lang.com/

npm install -g sass

在需要引入的组件app.js文件:

import './index.scss'

export default function Home(){
    return(
        <div className="father">
            <div className="son"></div>
        </div>
    )
}

在index.scss文件中：

.father{
    .son{
    }
}

最后页面如下：