为了在不使用 create-react-app 脚手架的情况下设置一个 React 项目，使用 ESLint 和 Prettier 来统一代码风格和质量，你需要按照以下步骤操作：
- 初始化一个新的 npm 项目：
npm init -y
- 安装 React 和必要的开发依赖：
npm install react react-dom
npm install --save-dev @babel/core @babel/preset-react
- 创建一个基本的
index.html 和入口文件 index.js。 - 设置
.babelrc 或在 package.json 中配置 Babel：
"babel": {
"presets": ["@babel/preset-react"]
}
- 安装 Webpack 和相关的开发依赖：
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm install --save-dev babel-loader css-loader style-loader
- 创建
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,
},
};
- 安装 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: {
// 在这里添加或覆盖规则
},
};
- 在
package.json 中添加脚本来运行 ESLint 和 Webpack：
"scripts": {
"start": "webpack-dev-server",
"lint": "eslint ."
}
- 安装其他 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 来检查代码质量。
请注意，这个例子是一个非常基础的配置，根据你的项目需求，你可能需要添加更多的配置和依赖项。