V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Kei001
V2EX  ›  问与答

求一个 vite+react 的 js 版本脚手架

  •  
  •   Kei001 · 2022-04-14 10:53:34 +08:00 · 2253 次点击
    这是一个创建于 961 天前的主题,其中的信息可能已经有所发展或是发生改变。

    开始学习 React ,自己想用 Vite 作为开发环境,但是被配置 eslint 和 prettier 卡主了,看网上文章每个教的都不太一样,搞不懂 eslint plugin 到底要装哪些,于是想找个脚手架直接上,但是看网上基本上都是 ts 版的脚手架,想问问有没有 V 友能分享一下在维护的 js 版本的 vite 脚手架

    16 条回复    2022-07-01 15:09:20 +08:00
    xujiahui
        1
    xujiahui  
       2022-04-14 11:17:47 +08:00   ❤️ 1
    放弃 eslint 就简单了,https://github.com/vitejs/awesome-vite 这个里面有各种各样的模板
    Removable
        2
    Removable  
       2022-04-14 11:22:44 +08:00
    @xujiahui #1 哈哈哈我也不用 eslint ,只用 prettier ( ps:后端选手业余写写 react
    stille
        3
    stille  
       2022-04-14 11:28:28 +08:00
    最近学习 vue 也是 eslint 搞懵逼了,脚手架里一套,vscode 插件又一套.实在不知道该怎么配了.
    TWorldIsNButThis
        4
    TWorldIsNButThis  
       2022-04-14 11:37:06 +08:00   ❤️ 1
    这个之前搞了我好几天,也是各种冲突和不适用的老规则
    最后定下来是用 eslint 驱动 prettier ,装
    eslint-config-prettier
    eslint-plugin-prettier
    然后在 eslintrc 里写 eslint 和 prettier 的配置

    {
    "env": {"browser": true, "es2021": true},
    "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {"ecmaFeatures": {"jsx": true}, "ecmaVersion": "latest", "sourceType": "module"},
    "settings": {
    "react": {
    "version": "detect"
    }
    },
    "plugins": ["react", "@typescript-eslint"],
    "rules": {
    "quotes": ["error", "single"],
    "semi": ["error", "never"],
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": [
    "error",
    {
    "trailingComma": "es5",
    "singleQuote": true,
    "printWidth": 120,
    "semi": false,
    "plugins": ["prettier-plugin-tailwindcss"],
    "tailwindConfig": "./tailwind.config.js",
    "endOfLine": "auto"
    }
    ]
    },
    "ignorePatterns": ["**/*.config.*", "dist/**/*"]
    }
    guzzhao
        5
    guzzhao  
       2022-04-14 12:04:10 +08:00 via Android   ❤️ 1
    https://github.com/guzzhao/my-react-app
    可以看看我这个,完成度不咋高,eslint 用的腾讯的
    guzzhao
        6
    guzzhao  
       2022-04-14 12:04:31 +08:00 via Android
    me221
        7
    me221  
       2022-04-14 13:06:51 +08:00
    刚开始学就别用什么 lint 了吧
    zhaol
        8
    zhaol  
       2022-04-14 14:39:25 +08:00
    如果只是学了自己玩玩可以不学 ts ,如果是为了工作的话,建议还是一起学了,很多公司都有这个要求。其实上手也很快,不用很深入。
    ccyu220
        9
    ccyu220  
       2022-04-14 17:28:10 +08:00
    @stille Vue 的话直接用官方的配置,yarn create @vue/latest
    ccyu220
        10
    ccyu220  
       2022-04-14 17:30:51 +08:00
    @stille 写错了,上面的实效了,现在是 yarn create vue@latest
    dengqing
        11
    dengqing  
       2022-04-14 20:57:33 +08:00 via iPhone
    如果是后台可以用这个

    vite-ant-design-pro 完成度还可以
    https://github.com/1247748612/vite-ant-design-pro

    创建项目
    pnpm create ant-design-pro
    molvqingtai
        12
    molvqingtai  
       2022-04-15 00:19:50 +08:00 via Android   ❤️ 1
    有写过 eslint 配置的文章,其实挺简单的
    https://juejin.cn/post/6971812117993226248#heading-5
    me221
        13
    me221  
       2022-04-15 08:27:54 +08:00   ❤️ 1
    Linter 上手完全指南: https://github.yanhaixiang.com/linter-guide/#%E7%9B%AE%E7%9A%84

    一个 v 友写的,但找不到帖子链接了
    Kei001
        14
    Kei001  
    OP
       2022-04-15 10:15:47 +08:00
    @TWorldIsNButThis #4 感谢,可否分享一下你的 package.json 呢
    Kei001
        15
    Kei001  
    OP
       2022-04-15 10:16:25 +08:00
    @xujiahui #1 很有用,感谢分享
    Dragonphy
        16
    Dragonphy  
       2022-07-01 15:09:20 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2575 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:28 · PVG 12:28 · LAX 20:28 · JFK 23:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.