Javascript详细解析 (二) —— Sublime Text安装配置和第一个小程序

版本记录

版本号 时间
V1.0 2018.01.26

前言

最近一直在学习RN,所以要用到javascript,2015年版本的javascript已经更新到ES6了,下面我们就一起学习这门语言和相关知识,共同进步。感兴趣的可以参考上面几篇文章。
1. Javascript详细解析 (一) —— 基本概览

代码编辑器的选择 - Sublime Text

相关的代码编辑器还是很多的,我这边搜索了一些资料,有人给我推荐了使用Sublime Text,我初步尝试了一下,用着还好。

Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持WindowsLinuxMac OS X等操作系统。

1. 功能特性

Sublime Text 支持多种编程语言的语法高亮、拥有优秀的代码自动完成功能,还拥有代码片段(Snippet)的功能,可以将常用的代码片段保存起来,在需要时随时调用。支持 VIM 模式,可以使用Vim模式下的多数命令。支持宏,简单地说就是把操作录制下来或者自己编写命令,然后播放刚才录制的操作或者命令。

Sublime Text 还具有良好的扩展能力和完全开放的用户自定义配置与神奇实用的编辑状态恢复功能。支持强大的多行选择和多行编辑。强大的快捷命令“可以实时搜索到相应的命令、选项、snippet 和 syntex, 按下回车就可以直接执行,减少了查找的麻烦。即时的文件切换。随心所欲的跳转到任意文件的任意位置。多重选择功能允许在页面中同时存在多个光标。

该编辑器在界面上比较有特色的是支持多种布局和代码缩略图,右侧的文件略缩图滑动条,方便地观察当前窗口在文件的那个位置。也提供了 F11 和 Shift+F11 进入全屏免打扰模式。代码缩略图、多标签页和多种布局设置,在大屏幕或需同时编辑多文件时尤为方便 全屏免打扰模式,更加专心于编辑。代码缩略图的功能在更早的编辑器TextMate中就已经存在,TextMate已经开源。Sublime Text 2支持文件夹浏览,可以打开文件夹,在左侧会有导航栏,方便在同时处理多个文件。3、多个位置同时编辑,按住ctrl,用鼠标选择多个位置,可以同时在对应位置进行相同操作。

2. 特色功能

  • 良好的扩展功能,官方称之为安装包(Package)。
  • 右边没有滚动条,取而代之的是代码缩略图,这个功能非常赞
  • 强大的快捷命令“可以实时搜索到相应的命令、选项、snippet和syntex,按下-
  • 回车就可以直接执行,减少了查找的麻烦。”
  • 即时的文件切换。
  • 随心所欲的跳转到任意文件的任意位置。
  • 多重选择(Multi-Selection)功能允许在页面中同时存在多个光标。
  • 支持VIM模式。
  • 支持宏,宏是什么,简单地说就是把操作录制下来或者自己编写命令,然后播放刚才录制的操作或者命令。

3. 主要特点

  • 深度整合GBK编码,可以完美支持GBK编码文件。
  • 去除自动检测升级提示。
  • 自动换行功能。
  • 安装Emmet(ZenCoding)插件。
  • 调整字体大小为11px以适合正常人使用习惯。

4. 插件管理

  • 安装Package Control

按Ctrl+调出console,粘贴安装代码(见扩展阅读)到底部命令行并回车: 重启Sublime Text 3。如果在Perferences->package settings中看到package control这一项,则安装成功。可以到官网链接下载Package Control.sublime-package放到sublime安装目录里的data里installed package`文件夹(这个文件夹位置可能会不一样)。

  • 用Package Control安装其他插件

按下Ctrl+Shift+P调出命令面板,输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

5. 推荐插件

  • Convert To UTF8
    • 将文件编码从GBK转换成UTF8,快捷键Ctrl+Shift+C
  • zenCoding
    • zenCoding是一种快速的html、css编写方式。默认用tab键.
      已经更名为Emmet。
  • JS Format
    • 一个JS代码格式化插件。默认ctrl+alt+f
  • BracketHighlighter
    • 括弧高亮插件,清晰明了
  • ChineseLocalization
    • 汉化插件,支持无缝切换中文、日语、英文.

6. 优点

  • 主流前端开发编辑器
  • 体积较小,运行速度快
  • 文本功能强大
  • 支持编译功能且可在控制台看到输出
  • 内嵌python解释器支持插件开发以达到可扩展目的
  • Package Control:ST支持的大量插件可通过其进行管理

Sublime Text的下载和配置

1. 下载

可以看一下Sublime Text的官网,但是半天也没打开,所以我就放弃从官网下载的想法了,还有有人发出来了破解版,可以直接下载安装,不需要破解证书等文件,非常的简单,下面给出地址 - 下载地址,下载下来直接安装就可以,按照具体安装的流程走就可以了。

安装好了,打开界面大体如下所示。

2. 配置

在写代码看效果之前,我们要先配置一下。配置方式有很多,可以参考JavaScript开发环境搭建,也可以看我做的配置,这里我先不安装插件了,留着后面安装。

  • 打开Sublime Text,选择 Tools->BuildSystem->New Build System,在里面输入以下内容,保存为GO.sublime-build或者其它的名字。

默认是上面这样的,接着我们进行配置和保存,将上面的内容配置为

{  
  "cmd":["open","-a","/Applications/Safari.app","$file"]  
}  

保存,会提出让你命名,我命名为

你可以任意命名,不改变文件类型即可。

有没有好奇,这个/Applications/Safari.app是什么意思?其实就是你编写完代码按command + B运行打开的默认浏览器,我这里选择safari。

简单的配置就结束了,后面关于插件的复杂配置会后续和大家说明。


第一个程序 - Hello world!

写一段测试代码

<html>
    <head>
        <title>This is my first HTML!</title>
    </heead>

    <body>
        <h1>This is heading!</h1>
        <p>Hello world!</p>
    </body>
</html>

然后可以快捷键command + B或者右键 -> Open In Browser就可以在浏览器中看效果了,由于前面配置的是safari浏览器,所以这里也是打开浏览器查看效果。

具体效果如下所示。

参考资料

1. Sublime Text百度
2. 史蒂芬周的博客
3. JavaScript开发环境搭建
4. Sublime Text 3 全程详细图文原创教程(持续更新中。。。)

后记

本篇已结束,后面更精彩~~~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容