前端入门选择编辑器

什么是编辑器?

在我接触前端开发的这段时间,编辑器对我来说就是写代码的一个工具,简称--IDE.每一款编辑器的用法大致都一样,如果你会使用其中一个,那么其他的你都会了.(不要去看官方的解释,呵呵...).

在我学习前端开发对的这段时间所接触的编辑器中,个人认为webStorm和Sublime这两款还不错.

我们先说一下WebStorm

WebStorm=PhpStorm-PHP-Database-support

总体印象只专注Web前端开发

优点:

1:代码导航:Shift+Shift快速查文件和代码,Ctrl+B跳转.

2:Shift+Ctrl+A快速调用编辑器提供的各种功能.

3:CodeGlance插件在代码右侧提供了minimap.

4:Ctrl+Q快速查看当前代码的文档,并且还可以查看外部的联机文档.

5:自带git集成,文件在folder和tab上用不同的颜色标示不同的版本状态,并且修改的代码在左右侧有颜色提示.不过Folder里的目录没有版本状态标示.

6:强大的插件管理功能.打开不支持的文件格式时,会提示下载相关插件.

7:CSS文件左侧显示所见即所得的颜色.

必要的插件:

ideaVim:提供Vim编辑模式.

CodeGlance:代码右侧的minimap.

Apache config(.htaccess) support:Apache配置文件格式支持.

缺陷:不支持PHP是硬伤.启动速度慢.不支持Twig.

Sublime:

总体印象:启动速度超快,不过安装插件会难倒一大片人。

选用理由:
1:代码导航:Ctrl+P调出Goto Anything快速查找文件和代码。F12跳转,遗憾的是跳转后不能像Vim那样返回。
2:Shift+Ctrl+P调出Command Palette快速调用功能。
3:编辑器右侧有整个文件的mini-map,方便快速定位代码位置,不过这个mini-map比Atom的minimap要差些。
4:SublimeLinter插件提供编辑时的语法检查,无须保存文件后才能检查。不过需要为每种语言都安装语法检查插件,为啥不能像Vim那样只安装一个插件就支持所有语言?
5:Vintageous插件提供了较为完整的Vim编辑模式,包括命令模式、插入模式、底线命令模式。支持增量高亮搜索(/,?,#,,g#,g);支持替换命令(:s, :%s)。
6:GitGutter提供代码修改状态,不过功能远不如Atom自带的功能强大,例如minimap里就看不到修改状态,folder里的文件也看不到代码修改状态。
7:Xdebug Client插件提供了PHP可视化调试功能。

必要的插件:
Vintageous:提供Vim编辑模式。
SublimeLinter, SublimeLinter-php, SublimeLinter-jshint, SublimeLinter-shellcheck:提供语法检查,保证代码不出现语法错误。
sublime-phpcs:PHP代码审查,保证代码符合规范。
PHP-Twig:Twig文件格式。
BracketHighlighter:括号和HTML标签匹配高亮。
Highlighter:高亮不正常的字符,例如尾部空格等。
DocBlockr:快速写注释。
GitGutter:查看代码修改状态。
Git:git功能集成。
jQuery Snippets pack:jQuery函数模板。
Drupal:Drupal框架函数模板、自动补齐、info文件语法高亮等功能。
Xdebug Client:PHP可视化调试。

缺陷:

解决ibus等中文录入的问题比较麻烦。
Javascript语法检查不起作用。

以上就是这段时间我对这两款编辑器的看法和总结,如有不对或遗漏的地方欢迎评论补充.

时间: 2024-10-20 22:22:24

前端入门选择编辑器的相关文章

转摘_结合个人经历总结的前端入门方法

转载请注明出处: https://github.com/qiu-deqing/FE-learning Table of Contents generated with DocToc FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 LingyuCoder的学习经历 工具 技能 语言基础 进阶 项目 未来 其他 入门书 一些不错的网站 历程 MrRaindrop的学习经历 缘起 项目,下一个项目 收集癖和知识管理 跟对神 读书 前端的定位 最

前端入门方法(大全)

转载请注明出处: https://github.com/qiu-deqing/FE-learning Table of Contents generated with DocToc FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 LingyuCoder的学习经历 工具 技能 语言基础 进阶 项目 未来 其他 入门书 一些不错的网站 历程 MrRaindrop的学习经历 缘起 项目,下一个项目 收集癖和知识管理 跟对神 读书 前端的定位 最

HBuilder:一个不错的web前端IDE(代码编辑器)

Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS方面就弱爆了.DW虽然支持JS语法高亮也支持JQuery JqueryMobile 甚至还支持Phonegap.但是对于JS的支持到了有的程度而已,语法高亮.语法提示仅此而已了.我们需要的是什么呢? 1.高度匹配的语法提示,例如我定义了哪些空间,语法提示至少可以自动提示控件的ID,控件对应的方法函数,自定义函数的语法提示. 2.JS与HTML的大纲导航 3.J

Web前端入门学习(2)——HTML常用标签

HTML标签 a标签 a标签是一个超链接标签,用于从一个页面链接到另一个页面.在<Web前端入门学习(1)>有提到过4个伪类,分别是a:link.a:visited.a:hover.a:active. a:link代表的是未访问过的链接,当访问者首次打开网页未点击链接时,所表现的形式: a:visited代表的是访问过的链接,相对于link,是访问者点击了连接后,所表现的形式: a:hover代表的是当鼠标经过链接上面时所表现的形式,鼠标经过后,链接会有所变化: a:active代表的是当用户

Web前端入门学习(5)——浮动原理及清除浮动

浮动原理及清除浮动 上节回顾 在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/1863945),介绍了块级元素和行内元素的特征,及粗略介绍了如何进行转换.加上display属性,可以指定元素的类型,如display:block.display:inline,以及display:inline-block.当然用得最多的是最后一个display:inline-block.结合例子来看: 例

移动前端UI选择

移动前端UI选择 目录 三.SUI Mobile 一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平台统一的接口来兼容不同的移动平台,其特性包括:1.简单易用2.渐进增强和优雅降级3.Accessibility4.小规模5.主题设置6.跨平台 官网:http://jquerymobile.com/ 学习容易,资料丰富,但早期的版本使用时非常卡,也早期的硬件也有关系,后续版本在性能方面有改进. 二.Fr

SLAM前端技术选择思考

以前是专门做室内定位技术研究的,先后学习和分析了多种基于电磁的室内定位技术,如WiFi指纹定位(先后出现过RSSI.CTF.CIR多种指纹特征).WiFi ToF定位.低功耗蓝牙BLE以及iBeacon定位,调研和测试过超宽带(UWB)定位技术.地磁指纹定位等技术.后面有时间会准备一个适用场景和性能指标的详细对比分析. 室内定位技术通常以定位区域的精准结构及地图已知为前提,随着机器人相关技术的发展和应用场景的逐步拓展,同步定位与地图构建SLAM技术日益重要,近两个月学习和测试了下SLAM相关的技

web前端入门:一小时学会写页面

一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1.什么是前端 简单来说,前端就是做网页(大神勿喷,本文一切从简) 2.前端技术 html,是首字母缩写,具体意义请百度,大家要记住“t”代表text,ok你们没有想错,text就是文本文件text,好了准备工作做好了,现在开始做网页 3.我们的第一个网页 请身边有电脑的小伙伴和我一起开始,在桌面鼠标

前端学习——选择结果为JQuery对象还是DOM对象?

0.前言 在学习和使用javascript过程中经常使用JQuery的选择器,但是在获取到选择结果之后经常"犯迷糊",需要一个DOM对象时或者一个JQuery对象,这样的尴尬经常遇到.为了让自己不再迷糊通过博文总结经验教训,希望自己在总结过程中缓慢提高. [相关博文] [前端学习--如何修改<a href="#">url name</a> 使用javascript和JQuery] [示例页面]--test-ul.html <!DOCTY