01 前端开发工具选择

前端开发工具选择

1、导读

​ 工欲善其事，必先利其器！在面对高强度的编程环境下，选择一种开发编程语音开发工具，往往可以事半功倍。

​ 开发前端项目，编写前端代码，也需要良好的开发工具做副手，那开发前端项目，都有哪些工具呢？

2、编辑器

2-1 概括

​ 前端开发，可以选择的编辑器有 Sublime、WebSotrm、HBuilder 以及 Atom 等众多编辑器。

​ 市面上也有很多从事着后台语音的开发者，他们也有着或多或少写前端页面的需求，而他们往往采用着原本开发后台语言的编辑器，如 IntelliJ IDEA、Pycharm、PhpStorm。

2-2 各编辑器比较

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

总结

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

3、编辑器安装

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

4、Sublime插件的安装

​ 安装了Sublime后，我们就可以用它帮助我们编写前端页面代码，但是它还可以通过安装一些优秀的插件来辅助我们更好的编写代码，如代码提示、菜单增强与赏心悦目的操作界面。

​ 安装各个插件前，我们需要安装一个 插件管理器：https://packagecontrol.io，插件管理器本身也是一个插件，它就相当于一个管理其他插件的应用商城，为我们管理以及不断丰富Sublime这款软件

4-1 安装流程

• 进入插件安装界面

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

• Sublime 3可直接复制

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 + `填入指令回车安装

4-2、插件管理器使用

• 安装插件

1）打开全局检索：cmd + shift + p  |  ctrl + shift + p
2）进入安装：键入 install 回车
3）输入插件名：回车 安装

• 常用插件

1）代码提示：Emmet
2）菜单增强：SideBarEnhancements
3）主题风格：Material Theme

• 卸载插件

1）打开全局检索：cmd + shift + p  |  ctrl + shift + p
2）进入安装：键入 remove 回车
3）选取插件名：回车 卸载

• 主动退出功能选择

1）退出任何功能界面：esc