小洛的前端技术博客Appearance
react18配置eslint和prettier
需要安装的依赖库
bash
# ESLint 核心库
npm install eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh prettier eslint-config-prettier eslint-plugin-prettier --save-dev
# TypeScript 支持（如果用 TS）
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev# ESLint 核心库
npm install eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh prettier eslint-config-prettier eslint-plugin-prettier --save-dev
# TypeScript 支持（如果用 TS）
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev配置对应的文件
eslintrc.js文件
js
module.exports = {
env: {
"browser": true,
"es2021": true,
"node": true
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended",
// 新增 React Refresh 规则（必须放在 Prettier 前）
"plugin:react-refresh/recommended"
],
parserOptions: {
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
settings: {
"react": {
"version": "18.2.0"
}
},
rules: {
"react/prop-types": "off",
"react/react-in-jsx-scope": "off",
"prettier/prettier": "warn",
// 可选：手动添加 React Refresh 规则（如果未自动生效）
"react-refresh/only-export-components": "warn"
}
}module.exports = {
env: {
"browser": true,
"es2021": true,
"node": true
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended",
// 新增 React Refresh 规则（必须放在 Prettier 前）
"plugin:react-refresh/recommended"
],
parserOptions: {
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
settings: {
"react": {
"version": "18.2.0"
}
},
rules: {
"react/prop-types": "off",
"react/react-in-jsx-scope": "off",
"prettier/prettier": "warn",
// 可选：手动添加 React Refresh 规则（如果未自动生效）
"react-refresh/only-export-components": "warn"
}
}.prettierrc.js格式化文件
js
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid"
}{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid"
}package.jsonp文件的配置
json
{
"scripts": {
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
"prettier": "prettier --write ."
}
}{
"scripts": {
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
"prettier": "prettier --write ."
}
}