As a front end developer, my toolkits are not that comprehensive, here are some of the tools I have been using:
Machine:
Macbook (I prefer using Macbook for front end work rather than windows laptop etc)
Console:
For Macbook: iTerm2 is better
For Windows:
ConsoleZ
PowerShell (it is open source now and can be used in different OSs)
IDE：
Free / Open Source version:
Visual Studio Code (stable release) or Visual Studio Insiders (latest release every day): it is my favourite, especially if you are using typescript)
Atom: pretty nice one to use but a bit slower than vscode
Nuclide (Atom package): It provides a first-class development environment for React Native, Hack and Flow projects.
Sublime3: require some setup and good to use to quickly browser some code since it is very fast compared to all of the other IDEs)
Paid version:
WebStorm: 2018.1 release candidate is out, I used to use it but don’t feel like having to use nowadays since vscode/atom provide a lot of functionalities you can use for free.
Visual Studio 2017 (do not like to use it if just for front end development, heavy and slow, but it is getting better)
Online IDEs / Code Editors:
jsbin: general js / html / css
jsfiddle: general js / html / css
codepen: general js / html / css
codesandbox: very cool one for react/angular/vuejs etc
stackblitz: powered by vscode, angular/react.ts
plunker: general js / html / css, realtime code collaboration
cssdeck: more for css
CI build:
Jenkins: my default option if I am setting up a CI in my own build environment
JavaScript Library / Framework:
Angular / Angular CLI: pretty comprehensive and learning curve is a bit high but it is getting easier with the new versions. angular 6.0.0-rc.0 is out a few days ago.
reactjs / create-react-app: no need to say more, must learn if you want to be a front end developer
vuejs: very nice one to start building some apps with
Testing Framework:
mocha (testing framework, test runner) + chai (assertion) + sion (spies/stub/mock) + instanbul (code coverage): very flexible combo to use but require some setup.
Jesmine: default option when using angular, it provides test runner, assertion, spies/stub/mock, code coverage.
Jest / snapshot: default option when using reactjs, it provides test runner, assertion, spies/stub/mock and code coverage.
Linting Tools:
eslint: default one to use
tslint: if you are using angular
standardjs: more than linting, it isJavaScript style guide, linter, and formatter
Learning Resources:
Nowadays, I would google something with this pattern below awesome something .
awesome react: https://github.com/enaqx/awesome-react
awesome react components: https://github.com/brillout/awesome-react-components
awesome angular： https://github.com/gdi2290/awesome-angular
awesome vuejs: https://github.com/vuejs/awesome-vue
awesome testing: https://github.com/TheJambo/awesome-testing
awesome regression testing: https://github.com/mojoaxel/awesome-regression-testing
awesome testing automation: https://github.com/atinfo/awesome-test-automation
I will keep update this list and what is your favourite?
