react-demo:项目使用ESLint和prettier(不使用create-react-app脚手架)

为了在不使用 create-react-app 脚手架的情况下设置一个 React 项目，使用 ESLint 和 Prettier 来统一代码风格和质量，你需要按照以下步骤操作：

1. 初始化一个新的 npm 项目：

npm init -y

2. 安装 React 和必要的开发依赖：

npm install react react-dom
npm install --save-dev @babel/core @babel/preset-react

3. 创建一个基本的 index.html 和入口文件 index.js。
4. 设置 .babelrc 或在 package.json 中配置 Babel：

"babel": {
  "presets": ["@babel/preset-react"]
}

5. 安装 Webpack 和相关的开发依赖：

npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm install --save-dev babel-loader css-loader style-loader

6. 创建 webpack.config.js 文件并配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000,
    open: true,
  },
};

7. 安装 ESLint 和 Prettier，并创建 .eslintrc.js 配置文件：

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

.eslintrc.js:

module.exports = {
  extends: ['react-app', 'prettier'],
  rules: {
    // 在这里添加或覆盖规则
  },
};

8. 在 package.json 中添加脚本来运行 ESLint 和 Webpack：

"scripts": {
  "start": "webpack-dev-server",
  "lint": "eslint ."
}

9. 安装其他 ESLint 插件和 Prettier 插件，以确保更好的集成：

npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks
npm install --save-dev prettier

完成以上步骤后，你可以通过运行 npm start 来启动开发服务器，使用 npm run lint 来检查代码质量。

请注意，这个例子是一个非常基础的配置，根据你的项目需求，你可能需要添加更多的配置和依赖项。