Formatting TypeScript

TypeScriptのフォーマットに関して
We Are Javascritpters #13

Transcript

1. Formatting
   TypeScript
   

   View Slide

2. せ⵸: @brn (ꫬꅿ⨳ⵃ)
   耵噟: ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص،
   ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger
   ـؚٗ: http://abcdef.gets.b6n.ch/
   Twitter: https://twitter.com/brn227
   GitHub: https://github.com/brn
   

   View Slide

3. 鳞ְֿה
   ؝٦ر؍ؚٝ鋉秈⡲׶׋ֻזְկ
   ٖؽُ٦׃׋ֻזְկ
   

   View Slide

4. tslintָ֮׷
   ֽוְׇ׈ְfixתד׃ַ׃גֻ׸זְկ
   

   View Slide

5. prettier
   ׅ׀ֻؿؓ٦وحز׃גֻ׸תׅיկ
   

   View Slide

6. Conflict
   ֮ծֽוֿֿtslintהעאַ׏גתׅי…
   

   View Slide

7. tslint-plugin-prettier
   conflictׅ׷ٕ٦ٕכ搀⸬ח׃ת׃׳ֲկ׉ֲ׃ת׃׳ֲկ
   

   View Slide

8. tslint׃䘌׸׷
   ➂꟦דַׅ׵יկ
   pre-commitؿحؙ剅ֹת׃׳ֲ
   

   View Slide

9. #!/bin/sh!
   !
   for file in $(git diff --cached --name-only --diff-
   filter=ACM | grep '\.tsx\?$' | tr '\n' ' ')!
   do!
   echo "prettier $file";!
   # Prettify all staged .js files!
   ./node_modules/.bin/tslint $file -c ./tslint.json --
   exclude 'src/**/*.css' --project tsconfig.json --fix!
   !
   # Add back the modified/prettified files to staging!
   git add $file!
   !
   done!
   

   View Slide

10. husky and lint-staged
    荈ⴓד剅ֻ״׶嚂דׅיկ
    huskyדpre-commit鏣㹀׃גlint-stagedדlint׾剅ֻ
    

    View Slide

11. TypeScriptFormatter
    https://github.com/vvakame/typescript-formatter
    @vvakameׁ׿ָ⡲׏׋װא
    LanguageService⢪׏גؿؓ٦وحز׃תׅ
    

    View Slide

12. View Slide

13. תה׭
    ؝٦سךؿؓ٦وحزכⰋג荈⹛⻉ׅ׷׿װד
    

    View Slide