The document discusses several JavaScript tools for code quality and compatibility including Babel, ESLint, and Webpack. It summarizes what each tool is used for, when it should be used, and how to use it. Babel is a compiler that allows using newer JavaScript features and supports plugins. ESLint helps enforce code quality and style standards. Webpack bundles modules and assets and supports plugins and loaders to transform files. The document provides examples of how to install and use each tool.

1. O Rei dos Plugins
Tornando-se produtível e melhorando o seu código
@thiagodorneles

2. Who am I?
Developer and computer scientist. Over 9 years working with
development.
C#, Python, Ruby, Objective-C, Swift, SQL, HTML, JavaScript, …
Backend and fronted developer at Superplayer

3. Superplayer is a music
recommendation
service which aims to
improve every moment
of peoples lives
through the perfect
soundtrack.

4. That's why we carefully
combine human curation
and technology to deliver
taylor made playlists for
each situation and person.

5. jointheband@superplayer.fm

6. WTF "rei dos plugins”?

7. CODE plugins

8. https://babeljs.io/

9. babel
why?
• Use next generation JavaScript, today.
• A compiler / transpiler for your JavaScript
• Pluggable
• Supports: ES6, JSX, Flow, transformers, …

10. babel
when?
• Of course, if you want to use all stable (or not) features of JavaScript
and make it compatible with unsupported browsers and versions

11. babel
how do you use it?
npm install -g babel
babel scripts.js > dis.min.js
babel src -d dist
babel-node scripts.js

20. babel
transformers / plugins
• async / await functions
• decorators
• function-bind
• react (jsx)
• many, many others

21. ESLint
http://eslint.org/

22. ESLint
why?
• The pluggable linting utility for JavaScript
• Standard code pattern across the team
• Prevent code errors
• Real-time code validation*
• Fully customizable

23. ESLint
when?
• To guarantee a unique code style across the team
• Prevent errors, of course
• Performance when coding

24. ESLint
how do you use it?

25. ESLint
how do you use it?
https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c5b48

26. ESLint
how do you use it?
https://github.com/airbnb/javascript

27. ESLint
how do you use it?

28. ESLint
how do you use it?

29. ESLint
how do you use it?

31. ESLint
how do you use it?

32. ESLint
fully customizable

33. ESLint
fully customizable
• "off" or 0 - turn the rule off
• "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
• "error" or 2 - turn the rule on as an error (exit code will be 1)

34. ESLint
fully customizable

35. https://webpack.github.io/

36. Webpack
why?
• Webpack is the latest and greatest in front-end development tools.
• Module bundler (javascript, images, fonts, css)
• Works great with Babel, ReactJS, CommonJS, among others
• Pluggable

37. Webpack
when?
• If you’re building a complex front-end application, Webpack will be
useful for you
• If is a fairly small application, then Webpack is overhead than you
need

38. Webpack
how do you use it?

39. Webpack
how do you use it?

40. Webpack
how do you use it?

41. Webpack
how do you use it?

42. Webpack
why don’t use ES2016 features with Babel?

43. Webpack
why don’t use ES2016 features with Babel?

44. Webpack
why don’t use ES2016 features with Babel?

45. Webpack
how do you use it?

46. Webpack
how do you use it?

47. Webpack
loaders
• Modules to load / import files and transform it
• e.g. transform ES2015 files to make compatible with unsupported
browsers

48. Webpack
plugins
• Plugins are additional modules to transform your final result
• By example:
• uglifyJSPlugin to minimize your JS files

49. Webpack
loaders x plugins
• Loaders: work before building bundle.js
• Plugins: work directly on bundle.js. Final step of build process

51. IDE plugins

52. My atom plugins

53. Recommended Atom plugins
• EditorConfig
• DocBlockr
• Atom TernJS
• Auto-detect indentation
• Sublime-Style-Column-Selection
• Trailing spaces
• Linter plugins
https://medium.com/@satya164/supercharged-javascript-development-in-atom-ea034e22eabc

54. Obrigado!
@thiagodorneles