Mac 学习笔记2–编辑器

Homebrew安装:http://brew.sh/index_zh-cn.html

-工欲善其事,必先利其器。

系统的包管理工具选择了Homebrew后。下一步就是选一款编辑器,因为之前看了一个逼格很高的视频,记住了Atom,所以就用它了。

Atom安装:https://atom.io/

或者打开系统的 终端,然后用 Homebrew 的 brew install 命令去安装 Atom:

brew install Caskroom/cask/atom

在命令行下面安装完 Atom 以后,可以输入 atom ,后面指定一个目录,这样会用 Atom 编辑器打开这个目录。另外 Atom 编辑器还自带了一个包管理工具叫 apm (Atom Package Manager),用这个工具可以在命令行下面为编辑器去安装包 (Package) ,包就是 Atom 的插件。

Packages

Atom 核心的功能是由 Core Packages(核心包) 提供的,另外还有 Community Packages(社区包),就是由社区成员自己开发并且分享出来的 Package。Atom 可以通过安装这些 Package 来扩展编辑器的功能。安装 Package 可以在 Atom 的配置界面上去搜索,然后安装,也可以使用 apm 在命令行下面管理编辑器的 Package 。

Packages 列表:https://atom.io/packages

QQ20150118-1

安装包:通过配置界面

  1. 打开 Atom 编辑器。
  2. 打开 Atom 的配置界面(Windows:ctrl + ,    Mac:command + , )。
  3. 点击边栏上的 Install(安装)。
  4. 在界面上的 Install Packages 下面,选中 Packages 标签,然后搜索你想要安装的 Package。
  5. 在搜索结果找到想要的 Package ,点击 Install 安装。

QQ20150117-11

安装包:通过 apm

  1. 打开命令行工具,Windows 用 Powershell,Mac 可以使用终端。
  2. 搜索包用的是 apm search <关键词> 。
  3. 找到想要的包以后,再用 apm install <包的名字>。

QQ20150117-12

QQ20150117-13

下面,你可以搜索一个叫 Localization 的包,然后安装一下,这个包会为 Atom 的菜单栏提供一个中文翻译。下面我们再看一下怎么样去配置与管理包。

管理包

打开配置界面,在边栏上选中 Packages ,在这个界面上的 Communtity Packages 区域里,你可以找到自己安装的来自社区成员分享的包。Core Packages 下面是 Atom 编辑器核心自带的包。

QQ20150118-3

这里会显示包的名字,还有介绍,不想用的包,可以点击 Disable 按钮禁用它,或者直接点击 Uninstall 卸载掉包,点击 Settings 按钮可以打开包的配置界面,在这个界面上,你可以找到包的主页,说明的文档,可以查看包的源文件,还有相关的配置与快捷键。

下面打开之前安装的 Localization 这个包的配置界面,然后在 Settings 区域里面,在 Current Language 下面的文本框里输入:Chinese – Simplified ,这样会把菜单栏的语言设置成简体中文,如果设置成 Chinese – Traditional,会把菜单栏设置成繁体中文。输入以后,用鼠标点一下浏览器的其它的地方,这样编辑器会保存你的配置。

完成以后,想让设置生效,可以关掉并且重新打开编辑器,或者可以刷新一下编辑器。

QQ20150118-4

刷新编辑器的快捷键:
Mac    :ctrl + alt + command + L
Windows:ctrl + alt + R

基础

编辑器没有使用的门槛,打开以后,你就已经知道怎么用了,不过有些小技巧可以了解一下,可以提高工作效率。先去下载点东西,HTML5 Boilerplate(https://html5boilerplate.com/),这个东西可以作为项目的基础,以后我们会再跟它见面,以后在介绍前端包管理的时候,这个下载的动作可以用命令去做。下载以后,解压一下,把解压以后的目录重命名成你自己想要创建的项目的名字,然后用编辑器打开这个项目的目录(Mac:command + O,Windows:ctrl + shift + O)。

QQ20150118-7

编辑器的工作区有两部分组成,左边是编辑器的 Tree View(树形视图),上面会显示你打开的目录里面的东西,右边是编辑器,在这可以处理打开的文件,最上面是标签栏,点击不同的标签可以打开对应的文件。

树形视图

你想打开在树形视图上的文件,创建新的文件或者目录,展开与收起目录,这些动作可以用鼠标完成,或者也可以使用键盘上的按键。想要在树形视图上操作,你需要把焦点放到树形视图上,切换焦点使用 ctrl + 0 。你会发现树形视图上的背景颜色会有点变化,具体是什么变化,取决于你的编辑器使用的主题。

查看跟树形视图相关的命令,先确定你的焦点在树形视图上,然后打开命令面板(Command Palette),用快捷键:

Mac    :command + shift + P
Windows:ctrl + shift + P

搜索一下 tree view ,列出的就是跟树形视图相关的命令。

QQ20150118-8

  • 向下移动:↓ 或 J
  • 向上移动:↑ 或 K
  • 展开目录:→ 或 L
  • 收起目录:← 或 H
  • 打开文件:enter 回车

多试几次上面的快捷键,把它变成自己的肌肉记忆。

编辑器

先随便打开几个项目里的文件,比如 humans.txt,index.html,还有 css/main.css 。打开的文件会出现在编辑器的标签栏上,除了用鼠标点击标签可以打开对应的文件,也可以使用快捷键:

打开下一个标签面板

Mac    :alt + command + →
Windows:ctrl + pagedown

打开上一个标签面板

Mac    :alt + command + ←
Windows:ctrl + pageup

在 Mac 上,你还可以使用 command + 数字 ,打开对应的标签面板。

关闭标签面板

Mac    :command + W
Windows:ctrl + W
分离面板

在编辑器上打开的文件可以分离到不同的面板上显示,你可以把编辑器分隔成上,下,左,右,四个部分。方法是,找到要分离显示的标签面板,鼠标右键点击,然后选择 Split Up,Split Down,Split Left 或者 Split Right。

QQ20150118-13

这些动作也都有对应的快捷键,可以打开命令面板(Mac:command + shift + P,Windows:ctrl + shift + P),然后搜索 Pane ,这样会显示出面板相关的操作命令。

分离到上面

Mac    :command + K ↑
Windows:ctrl + K ↑

分离到下面

Mac    :command + K ↓
Windows:ctrl + K ↓

分离到左面

Mac    :command + K ←
Windows:ctrl + K ←

分离到右面

Mac    :command + K →
Windows:ctrl + K →

注意上面这些快捷键的用法,是先按一下 command + K 或者 ctrl + K ,然后松开按键,再按一下上,下,左,右这些箭头按键。

查找文件

项目里的文件多了,想找到对应的文件,用鼠标点出这个文件很费事,可以用搜索找到文件。

在已经打开的文件里找到你想要的文件:

Mac    :command + B
Windows:ctrl + B

QQ20150118-9

在整个项目里找到你需要的文件:

Mac    :command + P
Windows:ctrl + P

QQ20150118-10

查找文件里的内容

你可以搜索包含特定内容的文件,比如在当前打开的文件里搜索,或者也可以在整个项目里搜索,找到以后,可以把搜索的内容替换成新的内容。

在当前打开的文件中搜索

Mac    :command + F
Windows:ctrl + F

比如我当前打开的是 humans.txt ,打开搜索,输入 name ,编辑器会高亮显示匹配搜索的内容。在 Replace in current buffer 里面,可以输入要替换成的东西,点击 Replace 会一个一个的替换,点击 Replace All 按钮,会替换全部的找到的地方。

QQ20150118-11

我想知道有没有查找下一处或者上一处的快捷键,打开命令面板(Mac:command + shift + P,Windows:ctrl + shift + P),搜索 find ,仔细阅读一下,你会看到 Find Next , Find Previous 还有跟它们对应的快捷键。

查找下一个地方

Mac    :command + G
Windows:F3

查找上一个地方

Mac    :shift + command + G
Windows:shift + F3

在整个项目中搜索

Mac    :shift + command + F
Windows:shift + ctrl + F

下面,是我搜索了项目中的 name ,回车以后,会显示出找到的结果,这个结果显示了包含搜索的内容的文件,还有出现这个内容的位置,点一下,会打开出现这个搜索内容的文件,并且会定位到对应的位置上。

QQ20150118-12

 

发表评论