Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Walking through the source code of an OSS library(ESLint)

Walking through the source code of an OSS library(ESLint)

kkeeth

May 21, 2022
Tweet

More Decks by kkeeth

Other Decks in Programming

Transcript

  1. Walking through the source
    code of an OSS library(ESLint)
    'SPOUFOE&OHJOFFS-5#FFS#BTI
    @kkeeth @kuwahara_jsri @kkeeth

    View full-size slide

  2. Who am I
    const my_info = {


    Name: ‘Kuwahara KEETH Kiyohito’,


    Company: ‘Yumemi Inc’,


    Position: ‘Servant Leader/Board’,


    Skills: ‘Riot.js/Next.js/Chit-chat’,


    }

    View full-size slide

  3. OQNKTDPNdLLFFUI

    View full-size slide

  4. 🙇 Sorry … 🙇


    This slide is written in English. However, I am
    still learning English, and there may be some
    inappropriate expressions.


    Plz feedback for me called “Masakari”
    about my talk!!

    View full-size slide

  5. Let’s start 😆

    View full-size slide

  6. one day in development 💁

    View full-size slide

  7. *NDPODFSOFEBCPVUUIFCFIBWJPS
    PGUIJTEFQFOEFOUMJCSBSZ🤔
    *TOUUIBUBIVSEMFUPCFHJOXJUI
    $BOZPVSFBMMZSFBEJU
    me
    my “inner voice”
    -FUTSFBEUIFDPEFPGUIJTMJCSBSZ
    me

    View full-size slide

  8. :FT CVU*EPOUVOEFSTUBOEXIBU
    UIJTMJCSBSZJTEPJOHBOE
    .BZCFZPVEPOUIBWFUIFUJNF
    *TUIBUFTTFOUJBMMZXIBUZPVXBOUUP
    TPMWF
    me
    my “inner voice”
    *UEFQFOETPOUIFUIJOH CVU
    JOUFSJNTVQQPSUDBOCFBMJBCJMJUZ
    MBUFSPO
    me

    View full-size slide

  9. #VUFWFOJGZPVVOEFSTUBOEUIF
    TPVSDFDPEF XIBUEPZPVEPXJUI
    JU
    my “inner voice”
    *GJUTBCVH JUTCFTUUPDSFBUFBO
    JTTVFPS13
    me
    8IFOEPZPVUIJOLUIBUXJMMCF
    SFTPMWFE %PZPVUIJOLJUXJMMCF
    EPOFPOUJNF
    my “inner voice”

    View full-size slide

  10. *GOPU UIFXPSTUUIBUDBOIBQQFOJT
    UIBUXFGPSLUIFSFQPTJUPSZBOE
    MPBEUIFDIBOHFT
    8IPJTHPJOHUPNBJOUBJOJU

    8IBUTUIFDPTU
    me
    my “inner voice”
    )NNN*HVFTTTP0LBZ MFUT
    KVTUBTTVNFUIBUTUIFEFTJHOJUT
    TVQQPTFEUPCF😅
    me

    View full-size slide

  11. *GOPU UIFXPSTUUIBUDBOIBQQFOJT
    UIBUXFGPSLUIFSFQPTJUPSZBOE
    MPBEUIFDIBOHFT
    8IPJTHPJOHUPNBJOUBJOJU

    8IBUTUIFDPTU
    me
    my “inner voice”
    )NNN*HVFTTTP0LBZ MFUT
    KVTUBTTVNFUIBUTUIFEFTJHOJUT
    TVQQPTFEUPCF😅
    me
    none of your business ʘ(^o^)ʗ

    View full-size slide

  12. I feel like I could
    learn more from
    reading codes 😆

    View full-size slide

  13. Then, let's read the source code
    of ESLint!

    View full-size slide

  14. *NBHFCZIUUQTFTMJOUPSH

    View full-size slide

  15. Basically, we start
    from the module
    written in the main of
    package.json💁

    View full-size slide

  16. Next, let’s look at


    “bin” dir.

    View full-size slide

  17. Only 3 helper
    functions and an
    executable
    function here💁

    View full-size slide

  18. Next, let’s look at “lib/cli.js”
    fi
    le.

    View full-size slide

  19. “cli.js” depends on “ESLint” module


    “ESLint” module depends on “CLIEngine” module

    View full-size slide

  20. I found out later that...

    View full-size slide

  21. There exists a
    dependency map💁
    *NBHFCZIUUQTHJUIVCDPNFTMJOUFTMJOUCMPCNBJOEPDTTSDEFWFMPQFSHVJEFBSDIJUFDUVSFEFQFOEFODZTWH

    View full-size slide

  22. Knowledge 1:


    Overall design

    View full-size slide

  23. Unified format


    for writing each module📝

    View full-size slide

  24. Uni
    fi
    ed format


    for writing each
    module

    View full-size slide

  25. Uni
    fi
    ed format


    for writing each
    module

    View full-size slide

  26. util objects rich in methods📝

    View full-size slide

  27. w /PEFKTlVUJMzPCKFDU
    w MJCSVMFTVUJMTBTUVUJMT
    w MJCTIBSFETUSJOHVUJMT
    w MJCTIBSFETBTUVUJMT NFUIPET SFHHFYQBUUFSOT

    w MJCTPVSDFDPEFUPLFOTUPSFVUJMT
    the number of using methods

    View full-size slide

  28. Knowledge 2:


    Node.js’s “util”
    module is useful

    View full-size slide

  29. w VUJMJOTQFDU
    w VUJMGPSNBU
    w VUJMJOIFSJUT
    w VUJMMQSPNJTJGZ ˡ8IBUTVSQSJTFENFXBTUIJT

    Methods used by ESLint

    View full-size slide

  30. *NBHFCZIUUQTOPEFKTPSHBQJVUJMIUNM

    View full-size slide

  31. Knowledge 3:


    Generator functions


    in JavaScript

    View full-size slide

  32. Do you understand


    the following code?💁

    View full-size slide

  33. Let's take a look at


    some sample codes💁

    View full-size slide

  34. more detail, show MDN👉

    View full-size slide

  35. An afterthought

    View full-size slide

  36. An afterthought
    w /PUXSJUUFOJOUZQFTDSJQU UZQFEF
    fi
    OJUJPOTBSFXSJUUFO

    w "OZXBZ UIFEPDVNFOUBUJPOJTFYUFOTJWF
    w +4%PDJTXFMMEPDVNFOUFE BTJTNE
    w %PDVNFOUBUJPOJTVTJOH&MFWFOUZKT UZ

    w 5PPMTGPS44(
    w %PDVNFOUBUJPOBQQJTFBTJFSUPWJFXUIBOUIFP
    ff
    i
    DJBMTJUF
    w 5IFSFBSFBMTPDPODFQUTPGMBZPVUBOEDPNQPOFOUT

    View full-size slide

  37. Thoughts💁

    View full-size slide

  38. Thoughts
    w 8FEPOUIBWFUPVOEFSTUBOEJUUPUBMZ👍
    w %FTJHOJOHGBNPVTMJCSBSJFTJTBHSFBUMFBSOJOHFYQFSJFODF👍
    w 8FDBOJNQSPWFNZTLJMMTGPSTVSF👍
    w *GZPV
    fi
    OEJUEJ
    ff
    i
    DVMU ZPVDBOSFBEJUXJUITPNFPOFFMTF👍
    w *GZPVIBWFUSPVCMF JU`THPPEUPSFBEGSPNUIFUFTUDPEF👍

    View full-size slide