V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xlsepiphone
V2EX  ›  程序员

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

  •  
  •   xlsepiphone · 2021-09-16 16:28:22 +08:00 · 1279 次点击
    这是一个创建于 925 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    9 条回复    2021-09-24 14:52:12 +08:00
    withoutxx
        1
    withoutxx  
       2021-09-16 16:38:45 +08:00   ❤️ 1
    @umijs/fabric 试试这个
    rioshikelong121
        2
    rioshikelong121  
       2021-09-16 18:23:36 +08:00
    cra 不是自带么。
    XTTX
        3
    XTTX  
       2021-09-16 18:24:29 +08:00   ❤️ 1
    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
        4
    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
        5
    XTTX  
       2021-09-16 18:26:30 +08:00
    airbnb 的规范 我很多都搞不懂,我在不停地添加 rules, 改成 “off” 或者“warn"
    7anshuai
        6
    7anshuai  
       2021-09-16 18:59:14 +08:00   ❤️ 1
    https://github.com/vikpe/react-webpack-typescript-starter 这个是极简风的,可以根据自己需求添加规则
    beginor
        7
    beginor  
       2021-09-16 19:02:16 +08:00 via Android   ❤️ 1
    喜欢严格模式的话,可以看看我的这个

    https://github.com/beginor/rollup-react
    myCupOfTea
        8
    myCupOfTea  
       2021-09-24 14:51:07 +08:00
    直接用 vite 的模版 然后装 prettier 和 eslint 就好了
    myCupOfTea
        9
    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",
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4814 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 09:45 · PVG 17:45 · LAX 02:45 · JFK 05:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.