1. 编辑器：Visual Studio Code / Sublime Text / Atom。
2. 包管理工具：npm / Yarn。
3. 版本控制工具：Git。
4. 自动化构建工具：Webpack / Gulp / Grunt。
5. CSS 预处理器：Sass / Less。
6. JavaScript 框架：React / Vue.js / Angular。
7. UI 组件库：Bootstrap / Ant Design / Material UI。
8. 图标库：Font Awesome / Material Icons。
9. 图片优化工具：ImageOptim / TinyPNG。
10. 浏览器开发工具：Chrome DevTools / Firefox Developer Edition"。
Web前端一般用什么开发工具
编辑器: sublime, webstorm, atom, vim等
调试工具: 浏览器自带的devtools，移动端页面远程调试等
构建工具: gulp, grunt, webpack
包管理工具: bower
远程服务器工具: filezilla/shell
工具主要作用就是帮工程师减少工作量，自动化处理，如压缩css, 合并js/css, 上传cdn, 图片优化, 管理jquery等三方库
当下web前端用得最多的开发工具是什么 知乎
一般是hbuilder、webstrom、sublime这三个。
hbuilder为纯国产，比较适合国人使用习惯，挺好用的，能敲几个字母再回车就能产生一个代码块，比如header的内容可以很快写出来，而且有边改边看模式，并且有自己的h5+、mui这些做混合app的框架，很好用。
webstrom相对来说也有代码提示，而且不用ctrl+s保存就能自动识别代码是否正确，而hbuilder需要保存一下才会验证代码。
sublime没有用过，不过据说也有代码提示，需要设置。
这三个都是看自己的个人使用习惯，我比较喜欢hbuilder，你可以用这几个软件试着写写页面，感受一下，看看哪个比较适合自己。