01-01 前端开发工具选择 - 图1


前端开发工具选择

1、导读

工欲善其事,必先利其器!在面对高强度的编程环境下,选择一种开发编程语音开发工具,往往可以事半功倍。
开发前端项目,编写前端代码,也需要良好的开发工具做副手,那开发前端项目,都有哪些工具呢?

2、编辑器

2-1 概括

前端开发,可以选择的编辑器有 SublimeWebSotrmHBuilder 以及 Atom 等众多编辑器。
市面上也有很多从事着后台语音的开发者,他们也有着或多或少写前端页面的需求,而他们往往采用着原本开发后台语言的编辑器,如 IntelliJ IDEAPycharmPhpStorm

2-2 各编辑器比较

  1. - Sublime、Atom:适合学习阶段使用,轻量级
  2. - WebStorm、HBuilder X:适合项目开发,环境集成高
  3. - IntelliJ IDEA、Pycharm、PhpStorm:后台语言开发者,不换编辑器也可写前端

总结

这些编辑器都可以进行前端页面的编写,功能都很相近,本篇文章我们就来了解一下Sublime这个编辑器软件。它相比其他编辑器而言,免费且轻量级,很适合小白入门前端,界面风格友好,支持功能插件拓展,简约而不简单。
**
01-01 前端开发工具选择 - 图2

3、编辑器安装

进入官网:https://www.sublimetext.com/ 选择适合自己电脑版本的进行下载安装(傻瓜式安装)

01-01 前端开发工具选择 - 图3

4、Sublime插件的安装

安装了Sublime后,我们就可以用它帮助我们编写前端页面代码,但是它还可以通过安装一些优秀的插件来辅助我们更好的编写代码,如代码提示、菜单增强与赏心悦目的操作界面。
安装各个插件前,我们需要安装一个 插件管理器:https://packagecontrol.io,插件管理器本身也是一个插件,它就相当于一个管理其他插件的应用商城,为我们管理以及不断丰富Sublime这款软件

4-1 安装流程

  • 进入插件安装界面

**
01-01 前端开发工具选择 - 图4

  • 选择与Sublime版本一致的命令

01-01 前端开发工具选择 - 图5

  • Sublime 3可直接复制

    1. import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
  • 在Sublime主窗口敲Ctrl + `填入指令回车安装

01-01 前端开发工具选择 - 图6

4-2、插件管理器使用

  • 安装插件

    1. 1)打开全局检索:cmd + shift + p | ctrl + shift + p
    2. 2)进入安装:键入 install 回车
    3. 3)输入插件名:回车 安装
  • 常用插件

    1. 1)代码提示:Emmet
    2. 2)菜单增强:SideBarEnhancements
    3. 3)主题风格:Material Theme
  • 卸载插件

    1. 1)打开全局检索:cmd + shift + p | ctrl + shift + p
    2. 2)进入安装:键入 remove 回车
    3. 3)选取插件名:回车 卸载
  • 主动退出功能选择

    1. 1)退出任何功能界面:esc