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

写了一份前端 Linter 的总结教程

  •  3
     
  •   Haixiang ·
    haixiangyan · 2022-01-18 15:23:37 +08:00 · 3680 次点击
    这是一个创建于 800 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在搞项目的基建,在配置 ESLint 和 Prettier 的时候感觉非常痛苦:NPM 的包太多了,而且名字又太像: eslint-plugin-prettier, eslint-prettier, eslint-config-prettier...

    不仅配好了 ESLint 还要考虑 ESLint x TypeScript 结合,ESLint x LintStaged 结合等等一堆东西。受不了了,所以直接重新学习了一下前端 Linter 这块的内容,最后写了一份总结:

    上手教程网站

    Github

    希望可以帮助前端 er 来理解这些概念。如何你看完这个教程后再看自己项目的 .eslintrc, .prettierrc 以及 package.json 里相关 NPM 包时,都能知道他们什么意思,那这个教程的目的就达到了。

    因为网上对这些工具的介绍都比较简单,所以我能参考的资源也比较少,一般来自文档、Issue 和 Wiki ,所以如果你发现了错误,或者你有更好的配置方案,也可以提 Issue ,不要喷太重哈~ 小弟我已经尽力了。

    这里依然有两个问题我没能解决:

    目前我翻看了网上一些文章和文档,都没找到更好的解决方案,小弟我已经尽力了。

    48 条回复    2022-01-20 16:58:50 +08:00
    TomatoYuyuko
        1
    TomatoYuyuko  
       2022-01-18 15:40:59 +08:00
    好东西 谢谢分享 以前每次从零开始做基建搞这玩意是真的痛苦,每次都得从头查
    defunct9
        2
    defunct9  
       2022-01-18 15:44:14 +08:00
    不错不错。
    wu67
        3
    wu67  
       2022-01-18 16:00:44 +08:00
    其实还行吧. 设置 vsc 的快捷键用 prettier 格式化一下(我的是 vue 的, 不知道其他两大框架行不行), 然后设置 vsc 的保存动作 调 eslint 格式化当前文件, 这样就很快乐了.
    Haixiang
        4
    Haixiang  
    OP
       2022-01-18 16:13:19 +08:00
    @defunct9 👍
    Haixiang
        5
    Haixiang  
    OP
       2022-01-18 16:13:34 +08:00
    @TomatoYuyuko 这些小工具是很蛋疼
    datian9966
        6
    datian9966  
       2022-01-18 16:14:01 +08:00
    写的真好,谢谢分享~ 前端的东西太多太复杂了且各自为战=。= 希望以后有机会能看到作者写的前端其他方面的这种小书
    喜欢 Opinionated
    Haixiang
        7
    Haixiang  
    OP
       2022-01-18 16:14:22 +08:00
    @wu67 现在的 IDE 和 vscode 都集成得很好了,这里主要是梳理一下这些工具之间的关系~
    Haixiang
        8
    Haixiang  
    OP
       2022-01-18 16:14:54 +08:00
    @datian9966 thx 🤟
    shyling
        9
    shyling  
       2022-01-18 16:21:51 +08:00
    呃,eslinit 有 --init 吧,没必要从 0 开始创建 .eslintrc 吧
    DrakeXiang
        10
    DrakeXiang  
       2022-01-18 16:24:38 +08:00
    看完了,很清楚,不过我感觉下次建项目还是会忘。。
    Trim21
        11
    Trim21  
       2022-01-18 16:28:29 +08:00
    第二个问题的解决方法:

    https://github.com/unlight/eslint-plugin-tsc

    "*.ts": "eslint --max-warnings=0 --plugin tsc --rule 'tsc/config: [2, {configFile: \"./tsconfig.json\"}]'",
    makelove
        12
    makelove  
       2022-01-18 17:00:56 +08:00
    linter 千万不要做格式相关事情,那个全交给 prettier 就行了,否则性能不好,开发体验也不好。
    直接设置 vscode 保存时调 prettier 格式化是最优做法。
    lankunblue
        13
    lankunblue  
       2022-01-18 17:08:56 +08:00
    @makelove linter 能格式化的东西可比 prettier 多。可以包含 prettier 的规则
    Haixiang
        14
    Haixiang  
    OP
       2022-01-18 17:15:34 +08:00
    @makelove 我刚开始也是这么想的,不过 eslint x prettier 可在 IDE 里直接有提示自动修复还是挺好的,而且也能自动有报错提示,不跑 eslint --fix 其实还好~
    Haixiang
        15
    Haixiang  
    OP
       2022-01-18 17:16:58 +08:00
    @Trim21 哦,把这玩意忘了,看 Issue 的时候是看过,当时看这 Github star 太少了,感觉不是很官方就给忘了,回头试试
    Haixiang
        16
    Haixiang  
    OP
       2022-01-18 17:18:11 +08:00
    @shyling 是的,这些配置都可以用 --init 来初始化,这里主要是不想写太多干扰项~以及方便引出后续~
    connection
        17
    connection  
       2022-01-18 18:02:30 +08:00
    eslint fix 能做的东西虽然更多,但是在我看来略带 “危险”
    它可以静默更改约定的 eslint fix code 方法是插件实现的。

    我的工作流是 save 的时候 prettier , pre-commit eslint 检测。

    但是我如今配 vue 的时候,vue sfc 还是很难配。因为我期望是渐进式的,同时支持 vue3 + js 或者 vue3 + ts ,并且支持不同的 lint rules 。
    但是我目前仍未有很好的解决方式。
    zhuangzhuang1988
        18
    zhuangzhuang1988  
       2022-01-18 18:11:57 +08:00
    放弃这些就好了.
    Haixiang
        19
    Haixiang  
    OP
       2022-01-18 18:36:47 +08:00
    @connection 这里你说的 pre-commit eslint 检测是指不用 prettier 插件来 fix 么?但是如果这样的话,就用不了 prettier/prettier 规则了,在 IDE 不会报错诶
    wiirhan
        20
    wiirhan  
       2022-01-18 18:58:47 +08:00
    🐂的
    darknoll
        21
    darknoll  
       2022-01-18 19:06:44 +08:00
    支持
    WhateverYouLike
        22
    WhateverYouLike  
       2022-01-18 19:42:30 +08:00 via Android
    点赞,完全命中我的困扰
    robinlovemaggie
        23
    robinlovemaggie  
       2022-01-18 20:36:02 +08:00
    当你熟读这些个格式规则烂熟于心并能做到兼收并蓄之后,你会发现你的项目进度已经接近 deadline ,而项目经理完全不屑你搞的这些劳什子。
    Haixiang
        24
    Haixiang  
    OP
       2022-01-18 20:39:35 +08:00
    @robinlovemaggie 所以我才把它们都总结起来,方便其它人可以在 ddl 前搞完项目
    EPr2hh6LADQWqRVH
        25
    EPr2hh6LADQWqRVH  
       2022-01-18 20:51:39 +08:00
    我进来是要喷规则的,LZ 你在规则上竟然不站队,太不男人了,shame on you.

    我想说的是,prettier 懂个屁,已禁。

    airbnb 规则蠢就算了,邪说还舔脸放出来,天灭 airbnb, 壮哉我大 Covid, 坐等你家倒闭。

    最后一条,分号不是给编译器看的,是给程序员潜意识降低心智负担的,谁不写分号还拒绝归化的,立刻🔥
    connection
        26
    connection  
       2022-01-18 20:53:57 +08:00
    @Haixiang 我的是 eslint 仅仅用来 check ,不使用它的 fix.
    kensoz
        27
    kensoz  
       2022-01-19 07:56:31 +08:00
    期待 eslint-plugin-import 的配置,配置一次恶心一次
    steins2628
        28
    steins2628  
       2022-01-19 09:02:01 +08:00
    写的真好 收藏收藏
    a1248499257
        29
    a1248499257  
       2022-01-19 09:23:54 +08:00
    prettier 格式化的时候某些地方会多一些 ;;; 有没有大佬遇到过🤔️
    Haixiang
        30
    Haixiang  
    OP
       2022-01-19 09:26:07 +08:00
    Haixiang
        31
    Haixiang  
    OP
       2022-01-19 09:26:24 +08:00
    @kensoz 还有这玩意,我研究研究
    Haixiang
        32
    Haixiang  
    OP
       2022-01-19 09:27:03 +08:00
    @a1248499257 这倒是没有,可以给 eslint-plugin-prettier 提个 Issue
    Haixiang
        33
    Haixiang  
    OP
       2022-01-19 09:28:27 +08:00
    @kensoz 看了一下主要是支持 import/export 语法的吧,这个如果用 TS 的话,可以用 TypeScript 的 Parser 解决,如果写 JS 一般也可以用 Babel Parser 解决。
    a1248499257
        34
    a1248499257  
       2022-01-19 11:19:16 +08:00
    @Haixiang 老早之前就有人提了,open 了好几年没解决
    kensoz
        35
    kensoz  
       2022-01-19 11:55:57 +08:00
    @Haixiang
    是,就是检查 import/export ,貌似国内用的不多
    一般的导入导出检查 ts 就可以了,适用于需要自定义的场合
    下面这是我的 lint 全家福( react 开发)
    "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.9.1",
    "@typescript-eslint/parser": "^5.9.1",
    "eslint": "^8.6.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-html": "^6.2.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "prettier": "^2.5.1"
    }

    我现在有时间也会研究 lint ,目前有这么几个课题
    1.react 开发只配置过 airbnb ,上面这套就是 airbnb 的常用配置,不知道 Google 和 Standard 是怎么配置
    2.vue 开发纯复制粘贴老项目的,没用过 eslint init
    3.extends 和 plugins 的区别
    4."prettier"到底写在哪里

    lint 的坑太多了
    Haixiang
        36
    Haixiang  
    OP
       2022-01-19 14:50:11 +08:00   ❤️ 1
    @kensoz 说下我自己的理解哈:
    1. 这个应该查一下 eslint-config-google , eslint-config-standard ,然后 extends 一下就好了, eslint-config-xxx 就是 xxx 的规则集
    2. vue 的规则比 react 感觉简单很多,eslint-plugin-vue 就搞定了,除了可以识别 .vue 文件,还有自己一些规则
    3. extends 一般是 extends 规则,但是也可以作为一些配置“缩写”的方式,可以参考 eslint-config-prettier 的配置,plugins 一般是用来识别不同的框架、文件下缀的,比如 eslint-plugin-vue, eslint-plugin-react 。这里和 Parser 又是不一回事,像我们用到的 Parser ,eslint 本身就自带了一个 ES 的 Parser ,TypeScript 还有自己的 parser ,Babel 也有对应的 ESLint Parser
    4. prettier 作为规则是要写成 'prettier/prettier': 'error'
    如果你用 typescript 的 parser 来解析 TS 文件,其实 jsx, react, import/export, es6 这些语法都能通过 tsconfig.json 来配置识别,可以不需要重复的 esling-plugin-xxx
    newbieRenew
        37
    newbieRenew  
       2022-01-19 15:36:56 +08:00
    没那么多条条框框。统一用 standardJS, 保存后 ALE 后台自动执行格式化、Fix
    kensoz
        38
    kensoz  
       2022-01-19 17:34:11 +08:00
    @Haixiang
    给力老哥,我先研究一下,你这么一说我又想折腾折腾了
    kensoz
        39
    kensoz  
       2022-01-19 17:39:18 +08:00
    @Haixiang
    关于第四条,4."prettier"到底写在哪里
    是因为有很多网上的教程不仅把 prettier 写到 plugins 里
    还经常以 plugins/prettier... 的形式写到 extend 里,有点头大
    在怀疑是不是和 prettier 版本有关
    Haixiang
        40
    Haixiang  
    OP
       2022-01-19 19:22:39 +08:00
    ```
    {
    "extends": ["plugin:prettier/recommended"]
    }
    ```
    是下面的缩写
    ```
    {
    "extends": ["prettier"],
    "plugins": ["prettier"],
    "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
    }
    }
    ```
    大概就是总让人困惑的原因吧, https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
    xujiahui
        41
    xujiahui  
       2022-01-19 19:22:41 +08:00
    厉害,第一次这么全的了解 lint ,不过我挺不喜欢用 eslint 的,语法问题现在的 IDE 都提示的挺好了,格式化代码用 prettier 是真香,但是挺多同事不知道这个,老项目也没法改
    Haixiang
        42
    Haixiang  
    OP
       2022-01-19 19:24:24 +08:00
    @Haixiang 可以看看 https://github.com/prettier/eslint-plugin-prettier Github 的 Exactly what does plugin:prettier/recommended do? Well, this is what it expands to: 这里
    Haixiang
        43
    Haixiang  
    OP
       2022-01-19 19:25:56 +08:00
    @xujiahui eslint 主要还是团队内一些规则约定吧,不能保证所有人的 IDE 都能这么智能地提示
    xujiahui
        44
    xujiahui  
       2022-01-19 19:48:03 +08:00
    @Haixiang 现在前端 IDE 基本就 WebStorm 和 VSCode 了吧,eslint 本身配置项太多太麻烦,有时候临时写的调试代码还会触发 error ,得用注释禁用 eslint ,就感觉挺烦的
    Ritr
        45
    Ritr  
       2022-01-19 22:32:17 +08:00
    有没有那种一键配置好的,真不想配这玩意,太费劲啦
    Haixiang
        46
    Haixiang  
    OP
       2022-01-20 09:23:43 +08:00
    @Ritr 这也是我觉得很痛苦的一点,前端的工具除了要各自为战,还有一个原因是前端发展太快了,时不时出新东西,后面的工具就像打补丁一样,要么出 NPM 包,要么自身的 Issue 没解决完
    GeekJason
        47
    GeekJason  
       2022-01-20 15:42:01 +08:00
    最近在设计前端团队协作规范,巧合看到了 OP 的帖子,非常有用,感谢分享
    Haixiang
        48
    Haixiang  
    OP
       2022-01-20 16:58:50 +08:00
    @GeekJason 🤟
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   953 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 21:35 · PVG 05:35 · LAX 14:35 · JFK 17:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.