求一个针对 React+TSX 的 ESLint+Prettier 的 Boilerplate

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 1187 天前的主题，其中的信息可能已经有所发展或是发生改变。

想优化一下自己的配置，但是感觉又无从下手（之前从 Google 抄的，感觉是个缝合怪，所以不敢乱改，怕配坏了，折腾半天），如果 ESLint 和 Prettier 能够合并成一个工具那就好了，主要是我看到 eslint 兼容 prettier 的那堆配置，我心里发慌，不敢乱动。

所以 RT，求一个针对 React+TSX 的 ESLint+Prettier 的 Boilerplate，最好是主流常用的。

楼主非专业前端，看到一大堆配置就发慌，轻喷。

9 条回复 • 2021-09-24 14:52:12 +08:00

withoutxx

2021-09-16 16:38:45 +08:00

@umijs/fabric 试试这个

rioshikelong121

2021-09-16 18:23:36 +08:00

cra 不是自带么。

XTTX

2021-09-16 18:24:29 +08:00

https://github.com/wesbos/eslint-config-wesbos
========================================
tsconfig
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}

XTTX

2021-09-16 18:25:32 +08:00

eslintrc
======================================
{
"extends": ["wesbos", "wesbos/typescript"],
"parserOptions": {
"project": ["./tsconfig.json"]
},
"rules": {
"no-use-before-define": "off",
"no-shadow": "off",
"@typescript-eslint/no-unsafe-assignment": "off",
"@typescript-eslint/no-unsafe-call": "off",
"@typescript-eslint/no-unsafe-member-access": "off",
"@typescript-eslint/no-unsafe-return": "warn",
"@typescript-eslint/no-floating-promises": "warn",
"@typescript-eslint/no-use-before-define": "error",
"@typescript-eslint/require-await": "off",
"@typescript-eslint/restrict-plus-operands": "off",
"prefer-template": "off",
"arrow-body-style": "off",
"react/button-has-type": "off",
"@typescript-eslint/restrict-template-expressions": "off",
"no-console": "off",
"prettier/prettier": [
"warn",
{
"endOfLine": "auto",
"singleQuote": true,
"semi": false
}
]
}
}

XTTX

2021-09-16 18:26:30 +08:00

airbnb 的规范我很多都搞不懂，我在不停地添加 rules, 改成 “off” 或者“warn"

7anshuai

2021-09-16 18:59:14 +08:00

https://github.com/vikpe/react-webpack-typescript-starter 这个是极简风的，可以根据自己需求添加规则

beginor

2021-09-16 19:02:16 +08:00 via Android

喜欢严格模式的话，可以看看我的这个

https://github.com/beginor/rollup-react

myCupOfTea

2021-09-24 14:51:07 +08:00

直接用 vite 的模版然后装 prettier 和 eslint 就好了

myCupOfTea

2021-09-24 14:52:12 +08:00

"@typescript-eslint/eslint-plugin": "^4.29.0",
"@typescript-eslint/parser": "^4.29.0",
"@typescript-eslint/typescript-estree": "^4.29.0",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jest": "^24.4.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-unicorn": "^35.0.0",
"prettier-eslint": "^13.0.0",
"prettier-eslint-cli": "^5.0.1",