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 全程详细图文原创教程(持续更新中。。。)

后记

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容