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

2021 年 9 月 16 日
 xlsepiphone

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

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

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

2217 次点击
所在节点    程序员
9 条回复
withoutxx
2021 年 9 月 16 日
@umijs/fabric 试试这个
rioshikelong121
2021 年 9 月 16 日
cra 不是自带么。
XTTX
2021 年 9 月 16 日
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 年 9 月 16 日
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 年 9 月 16 日
airbnb 的规范 我很多都搞不懂，我在不停地添加 rules, 改成 “off” 或者“warn"
7anshuai
2021 年 9 月 16 日
https://github.com/vikpe/react-webpack-typescript-starter 这个是极简风的，可以根据自己需求添加规则
beginor
2021 年 9 月 16 日
喜欢严格模式的话，可以看看我的这个

https://github.com/beginor/rollup-react
myCupOfTea
2021 年 9 月 24 日
直接用 vite 的模版 然后装 prettier 和 eslint 就好了
myCupOfTea
2021 年 9 月 24 日
"@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",

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/802325

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX