Skip to content
前端开发学习指引

开发工具

SHELL

编辑器

  • Sublime Text :thumbsup: 跨平台开发神器, 有丰富的扩展支持。 付费，可免费无限期试用.
  • Brackets Adobe 出品的跨平台编辑器, 也有许多扩展
  • Atom Github 出品的跨平台编辑器, 仿 Sublime Text, 扩展也很丰富
  • notepad++ windows 平台, 免费开源, 支持多种语言, 多种文件编码, 支持扩展

编程字体选择, 个人推荐fira-code 和 cascadia-code, 这两款字体均支持连字, 更容易阅读.

Sublime Text 相关网站 :thumbsup:

Sublime Text 提供的快捷键相当丰富，若想查看全部的快捷键，从 菜单栏 ➡ Preferences ➡️ Key Bindings - Default 查看所有快捷键的默认配置文件。

编辑器扩展

  • Emmet :thumbsup: 通过易记的缩写形式(支持模糊匹配)来快速生成 HTML 和 CSS, 并配有代码提示, 大大提供输入效率, 减少输错情况.

API 文档查看器 Docset App

集合各种流行编程语言的 API 文档，方便进行检索查询。下列软件，可根据自身需要，择一即可。

  • Devdocs :thumbsup: 在线的 API 文档合集，并且可将数据缓存至浏览器本地
  • Dash :thumbsup: Mac 平台必备的文档查看器，免费版对文档搜索间隔由 8s 限制，可内购后解除限制。还可用于管理代码片段，配合 Alfred，查询开发文档只在弹指之间。有针对各种流行编辑器对插件，可在编辑器内搜索文档。
  • Velocity :thumbsup: Dash 的 windows 版，特性一致。也需要付费才能解除搜索的限制。
  • Zeal :thumbsup: windows 上的文档查看器，免费开源，体验不如前述 App

浏览器特性检测

Git 版本控制工具

  • Try git github 提供的交互教程

包管理器, 构建工具(命令行)

GUI 工具

prepros (跨平台, 付费， 可免费无限期试用) :thumbsup:

prepro 是一款前端工具,内置有 web 服务器,支持编译各种预编译语言代码(less, sass, coffee 等), 自动补全 css 样式属性的浏览器私有属性, 浏览器实时刷新(编写代码时, 保存代码即刷新), 代码合并及压缩等.

官方网站: https://prepros.io/

codekit (Mac 平台, 付费)

codekit 和 prepos 一样, 除了 prepos 的功能, 还支持管理维护第三方库.

官方网站: https://incident57.com/codekit/

Koala (跨平台, 免费)

koala 是一个前端预处理器言图形编译工具，支持 Less、Sass、CoffeeScript，帮助 web 开发者更高效地使用它们进行开发。

官方网站: http://koala-app.com/index-zh.html

前端代码在线练习及代码片段分享网站

你可以在下述网站在线编写前端代码、查看效果(仅需浏览器，电脑无须安装编辑器及服务器)，并分享给他人(一般均需在网站注册)，也可以在网站上搜索他人分享的有用的代码片段。

支持写 html,css, js(包括引入第三方库):

仅支持 html, css:

支持各种语言的playground:

JS 函数性能在线测试

当达成一个目的有多种实现方法，你想选择性能最佳的一个时(比如将字符串转换为数字可以用 +n, parseInt(n, 10), Number(n)), 可在下列网站编写性能测试用例，根据测试结果选择最佳。亦可在下列网站上搜索其他人的性能测试用例。

工具

其他参考