宁皓网 Atom：代码编辑器

在远程主机上执行编辑文件的命令，可以打开在本地上的 Atom 编辑器去编辑这个文件。 先安装一下 remote-atom 插件。 打开设置 .. Install.. 搜索一下 remote-atom ... 找到这个插件 .. 点击 Install ...

然后打开命令面板 .. 搜索 remote atom .. 这里会有一个 start server .. 或者，也可以在 packages 菜单里 .. 找到 remote atom .. 选择 start server ..

回到终端 .. 先登录到远程主机 .. 这里我用的是在本地的一台虚拟机 .. 进来以后，可以再去安装一个小工具 .. 小工具的位置是在这个仓库的下面 .. 找到 rmate .. raw .. 复制一下地址 ..

再用 curl 把它下载到 /usr/local/bin/rmate ..

sudo curl -o /usr/local/bin/rmate https://raw.githubusercontent.com/aurora/rmate/master/rmate

完成以后给这个小工具添加一个执行的权限 ..

sudo chmod +x /usr/local/bin/rmate

退出来 .. 重新再登录到远程服务器 .. 使用一个 -R 选项 .. ssh -R 52698:localhost:52698 vagrant@192.168.33.11

进来以后 .. 可以使用 rmate 命令去指定要编辑的文件 ...

rmate hello.txt

这样会打开在本地安装好的 Atom 编辑器 .. 你可以直接在这个编辑器上编辑远程服务器上的文件 ... 保存以后，会自动把这个文件的内容更新到远程服务器上 ...

在远程服务器上查看一下这个 hello.txt 文件里的内容 .. 这里会出现我们在本地使用 Atom 编辑器编辑的内容 ...

https://github.com/aurora/rmate

来自 https://ninghao.net/video/3990#info
 

2) 同步本地与远程之间的文件：Remote-FTP
我需要一种方法可以直接使用 Atom 去编辑远程主机上的某个目录下面的文件 .. 先去安装一个插件 ... 打开设置 .. 安装 .. 搜索一下 remote ftp ... 找到后安装一下它 ..

下面我们先在本地去创建一个项目 .. 进入到我的桌面上 .. 新建一个目录 .. 名字是 app .. 再用 atom 打开这个目录 ..

再去创建一个 remote ftp 的配置文件 . 打开 Packages .. remote ftp .. 创建 sFTP 配置文件 .. 它可以让我们使用 ssh 登录到远程主机，然后去管理上面的文件 ..

修改一下 host .. 设置成远程主机的 ip 地址或者主机名 .. ssh 登录用的用户是 vagrant .. 登录的密码也是 vagrant .. 再设置一下 remote ，指定一个远程主机上的目录 ... /home/vagrant/app ..

回到远程主机 .. 当前的位置是 /home/vagrant .. 在它的下面创建一个目录 .. 名字是 app ... 然后在这个目录的下面创建一个文件 ...

再回到 Atom 编辑器 .. 打开 Packages - remote ftp .. 找到 Toggle .. 先点一下这里的 Connect .. 这样会 ssh 到远程主机，然后显示在 remote 里面设置的那个目录下的文件列表 ..

右键点一下根目录 ... 选择 Download ... 这样会把远程主机上的目录里的文件下载到本地 ... 我们可以编辑一下这个文件里的内容 .. 保存一下 ..

然后在远程主机上查看一下这个文件里的内容 ... 这里会显示在本地编辑的内容 ..

现在这个编辑器上，左边的树形视图是本地的 .. 右边的这块是远程主机上的东西 .. 直接在这个列表上创建一个新的文件 ... 这个新的文件也会显示在本地的树形视图里面 ..

编辑一下文件的内容 ... 保存一下 ... 回到远程主机 ... 查看一下 app 目录下的东西 .. 这里会出现新创建的这个文件 ...


来自 https://ninghao.net/video/3991#info

Snippets ，就是一些经常会用到的代码片断 .. 在 Atom 编辑器里的每种支持的语言包里面都定义了一些代码片断，这些片断通过都有一个简写的名字，输入这个名字，按一下 tab 键，就能够得到这个代码片断 ..

比如我现在打开的是一个 js 格式的文件， 输入一个 log ，按一下 tab .. 就会得到一个 console.log ... 再用一个 for .. 按一下 tab .. 可以得到一个 for 循环的基本的格式 ..

注意在这个代码片断里面，已经选择好了一些编辑点，可以直接输入想要的内容 .. 再试一下， gen .. 这是一个生成器的代码片断 .. 现在可以设置生成器的名字 .. 再按一下 tab ，会跳到生成器的参数那里 .. 再按一下 tab ，会到生成器的主体部分 ..

查看可用的 Snippts ，可以使用快捷键 alt + shift + s .. 这里会出现代码片断的介绍，还有一个使用代码片断的简写形式 ..

这些代码片断是在编辑器的不同的语言包里面定义的 .. 打开编辑器的设置 ... Packages .. 搜索一下 JavaScript .. 找到核心自带的这个 language-javascript .. 在这里，你也可以找到这个语言包里定义的所有的代码片断 ..

另外，如果你想使用更多的代码片断，可以去搜索相关的包，然后安装一下 .. 或者我们也可以去定义自己的代码片断 ..

来自 https://ninghao.net/video/3129#info

在 Atom 编辑器的 Package ，就是可以扩展编辑器功能的一些插件。不同的 Package 为 Atom 提供了不同的功能。管理 Package ，可以通过 Atom 的配置界面 ..

打开 Atom ，按一下 Command + , 可以打开 Atom 的配置界面 .. 再打开 Packages ， 在这里你可以管理安装在 Atom 上的 Package .. 可以升级，禁用，或者卸载它们 .. Community Packages 就是安装的第三方的 Package， 也就是 Atom 社区提供的 Package ..

下面的 Core Packages 是 Atom 核心自带的 Package .. 同样也可以卸载或者禁用它们 .. 点击它们的名字 .. 可以打开这个 Package 的首页 ...

有些 Package 会带一个配置界面 .. 比如这个 markdown-preview ，它是一个预览用 Markdown 语法写的文档的 Package .. 点击 Settings ... 可以再去设置一下 .. Settings 这里就是一个配置的选项 ... Keybindings 是一些快捷键 ..

我们可以直接搜索这个 Package 提供的一些任务 .. command + shift + P， 在 Windows 上是 ctrl + shift + P .. 搜索一下 markdown ... 会列出 Markdown 这个包提供的一些东西。

再打开 Updates .. 在这里，会列出所有需要更新的 Package ... 可以单独去更新每个 Package，也可以点一下 Update All 去更新所有的 Package ..

要安装新的 Package ， 打开这个 Install .. 在 Featured Packages 这里会列出一些推荐的 Package ， 你也可以直接在这个搜索框里搜索一下需要的 Package .. Atom 会返回搜索结果，点击自己需要的 Packge 后面的 Install ，可以去把它安装到我们的编辑器上。

来自 https://ninghao.net/video/2718#info

apm 就是 Atom Package Manager ， Atom 编辑器的包管理工具，它可以让我们在命令行下面去安装，更新，还有删除编辑器的 Package。 一般安装了 Atom 编辑器会自带一个 apm 。

Mac 用户打开终端，Windows 用户可以使用 Powershell ， 输入 apm 回车 ... 会列出相关的命令 .. 先用一个 apm ，后面是一些具体的命令 .. 比如 clean ，config ，install 等等 ...

要查看具体的命令的帮助，可以这样，输入

apm help install

看一下 install 这个命令的帮助 .. 会显示这个命令的使用的方法，还有介绍 .. 下面我们用 apm 去安装一个 Package .. 如果你不确定要安装的包的名字，可以先去搜索一下 .. 比如我要安装一个跟 color 相关的包 ... 输入：

apm search color

会返回一些结果 .. 这里我要安装的就是这个 color-picker ... 如果想查看更详细的介绍，可以打开它的首页：

apm home color-picker

这样会用默认的浏览器打开包的首页 ... 确定以后，可以再去安装一下它：

apm install color-picker

过一会儿，会提示已经把这个包安装好了，放到了用户主目录下面的 .atom 下面的 packages 这个目录的下面 。 查看一下已经安装的包的列表：

apm list

最开始这些是 Atom 编辑器自带的包 .. 下面这里出现的是我们自己安装的包，在这里你会看到 color-picker ..

注意使用 apm 安装了新的包以后，我们可能需要重新加载一下 Atom 编辑器，Mac 用户可以使用快捷键 ctrl + alt + cmd + L ， Windows 用户可以使用 alt-ctrl-r ..

不需要的包可以直接把它删除掉：

apm uninstall color-picker

来自 https://ninghao.net/video/2719#info
 

tool-bar 为 Atom 编辑器提供了一个工具栏，在上面可以显示一些常用的小工具。 我们可以用 apm 先去安装一下这个包 ..

apm install tool-bar

完成以后需要再去安装一个包，因为 tool-bar 默认只提供了一个空白的工具栏，再去安装一下 tool-bar-main，这个包会在工具栏上显示一些常用的小工具：

apm install tool-bar-main

回到 Atom ... 重载一下编辑器 .. 切换显示工具栏，使用快捷键 ctrl + alt + T ..

这里的图标就是 tool-bar-main 这个包里提供的 .. 点击这个配置图标 .. Packages .. 搜索 toolbar .

打开工具栏的设置 .. 在这里你可以设置工具栏上的图标的大小 .. 还有它的 Position ，工具栏的位置 .. 默认是 Top ... 顶部，我们还可以选择 Right ， Bottom ，还有 Left ...

https://atom.io/packages/tool-bar
https://atom.io/packages/tool-bar-main

来自 https://ninghao.net/video/2720#info

Atom 编辑器可以更换主题，也就是编辑器的显示的风格。它本身自带了两示主题，你也可以去给编辑器安装新的主题。打开编辑器以后 ... 按一下 command + , Windows 用户应该是 ctrl + ,

这样会打开编辑器的设置的界面 ... 在这里，选择 Themes ... 主题 .. 在这里，你可以设置编辑器的 UI Theme ，也就是编辑器的界面的主题，还可以设置 Syntax Theme ... 就是编辑器里边儿的文字的主题。

默认这两款主题的名字都是 Atom Dark ... 点击这个下拉菜单 .. 可以选择已经安装到编辑器里的主题 ... 在下面这个 Install Themes 这里，可以去搜索要安装的新的主题 ... 比如我们找一款叫 seti 的主题 ... 输入 seti ... 然后回车 ... 在下面，会给我们列出相关的搜索结果 ...

这里我要用的是 Seti Ui ... 为编辑器界面准备的主题 ... 点击 Install ... 可以去安装它 ... 另外还需要再安装一个为编辑器里的文字准备的主题 ... 这里就是 Seti Syntax ... 点一下 Install ...

安装完成以后，再打开这个设置主题的下拉菜单 ... 先打开 UI Theme ... 选择 Seti ... 不需要保存 ... 你会立即看到这个主题的样式 .. 另外再选择一下 Syntax Theme ... 这里同样选择 Seti ... 注意这个 Seti 主题是我们安装的那个叫 Seti Syntax 这个主题的名字 ...

设置好以后，关掉这个设置的界面 .. command + W .. Windows 上是 ctrl + W ...

现在，这里显示的就是 Seti Ui 还有 Seti Syntax 这两款主题的样式 ...

来自 https://ninghao.net/video/2026#info

如果你喜欢一款主题，不过有些地方你想使用自己的设计。这个时候，你就可以使用编辑器的自定义样式表，去覆盖掉原来的主题样式。 打开这个菜单 ... 然后选择 打开 Stylesheet...

你可以把自己的样式放到这个样式表里，其实这是一个 Less 文件，也就是你可以使用 Less 提供的方法去设计样式。不过使用普通的 CSS 样式也是可以的。

然后再打开编辑器的开发者工具 ... 查看，开发者，开发者工具 ... 也可以使用快捷键 alt + command + I .. Windows 上是 alt + ctrl + I ... 你看到的这个开发者工具，跟你的 Chrome 浏览器上的开发者工具是一样的 ...

点击这个放大镜图标 ... 然后再去选择你想要修改样式的地方 ... 选中以后，在右边这样，Styles 这个面板的下面，会显示出应用到这个地方的样式 ... 在这里你可以调整样式的属性，还有对应的值，这样可以实时的看到编辑器的变化 ... 比如我要修改这个标签选项卡下面的边线的宽度 ... 我猜就是这个 border-bottom 样式控制的 .. 关掉这个样式，再打开它，可以确定是不是你要修改样式的地方 .. .

确定以后，复制一下这块样式 ... 包括样式的选择器 ... 然后回到自定义的样式表 ... 粘贴到这里 ... 再去修改想要覆盖原有样式的样式 ... 这里我把边框的宽度改成 1px ...

保存 ... 你会立即看到效果 .. . 使用这样的方法，你就可以去把想要修改的地方换成自己的想法。

我对 seti 这个主题，做了一点修改，你可以在这个地址里，打开自定义的样式 .. 复制一下 ... 然后粘贴到你的编辑器的自定义的样式表里 ... 然后再保存一下 ... 就会应用这些自定义的样式了 ...

https://gist.github.com/wanghao8080/361b6c95cd816a12f47c

当我们使用 Atom 编辑器打开了某个目录以后，在编辑器的左边就会出现一个所打开的目录相关的树形结构的目录还有文件 ... 用鼠标点击文件，可以在编辑器上打开这个文件 ... 点击目录，会展开这个目录里面所包含的东西 ...

想要隐藏这个树形视图 .. 可以使用快捷键 command + \ .. Windows 上应该是 ctrl + \ .. 再按一次，可以再打开这个树形视图 ..

想在树形视图上操作 .. 你需要把编辑器的焦点转移到这个树形视图上 ... 除了用鼠标点一下这个树形视图，我们也可以使用一个快捷键 ctrl + 0 ..

这样你会发现当前编辑器的焦点，会放到打开的文件在树形视图的位置上 ... 会在这个树形视图上高亮显示 ...

跟树形视图相关的操作，可以按一下 command + shift + P ... 不过要注意，你需要先把编辑器的焦点切换到这个树形视图上 ... 然后再使用这个快捷键 ... 搜索一下 Tree View ... 这里列出的都是跟树形目录视图相关的操作 ... 下面，我们可以去试几个 .. esc ，关掉这个命令窗口 ...

来自 https://ninghao.net/video/2028#info

在这个树形视图上，我们可以使用键盘上的按键上下移动，可以展开或者收起目录结构 ... 向上移动可以使用向上箭头 ... 向下移动可以使用向下箭头 .... 想要展开当前的目录 .. 按一下 ctrl + ] ... 收起显示这个目录结构 ... 用的是 ctrl [ ... 如果你想展开或者收起当前目录下面的所有的目录的话 ... 需要使用递归的方法展开还有收起，递归的展出所有目录 ... 用的是 ctrl + alt + ] ... 递归的收起所有的目录，可以使用 ctrl + alt + [ ...

这些操作我们也可以使用键盘上的某一个按键去做 .. 向下移动可以使用 J 键 ... 向上可以按 K 键 ... 展开目录可以按一下 L 键 ... 收起目录结构用的是 H 这个按键 ... 使用这种纯字母的快捷键在平时的工作里面会更简单一些 ...

来自 https://ninghao.net/video/2029#info

在项目里面添加文件与目录 ... 我们可以先把焦点切换到树形视图上 ... ctrl + 0 ... 然后你可以浏览到新文件或者目录要基于哪个位置去创建 ... 或者也可以在创建文件或者目录的时候再去指定它们的位置 ...

添加文件，可以按一下 A 键，英文 Add 的首字母正好是 A，Add 就是添加的意思 .. 在出现的这个小窗口上面，你可以输入要创建的文件的路径 ... 想在当前位置添加文件，直接输入想要创建的文件的名字就可了，如果你想把这个文件放到某个特定的目录下面，可以先输入这个路径 ... 这个路径里面的目录可以是已经存在的，也可以不存在。这样在创建文件的时候，编辑器会自动去创建需要的目录 ...

比如我们要创建一个文件叫 app.js ，这个文件要放到当前位置下面的 javascript 这个目录里面 ... 输入 javascripts/app.js ... 回车 ... 这样会直接打开这个新建的文件 ... 注意在树形视图上面，会出现一个 javascripts 目录 ... 这个目录之前不存在 ... 是我们在创建 app.js 的时候，为这个文件指定的路径里面包含的目录 ..

ctrl + 0 ... 可以把焦点放到这个目录的上面 ... 如果你想单独添加目录的话 ... 可以按一下 shift + A ... 这样会打开创建目录的窗口 ... 注意这里会自动把 javascripts 这个目录包含进来，因为当前在树形视图上，这个目录是在焦点的状态 .. . 想基于这个目录去添加新的目录，可以留着它 ... 如果想在其它的地方去添加目录，可以直接把它先删除掉 .. 再输入要创建的目录的新的路径 .. 在项目的根目录下面，添加一个新的目录 ... 叫做 assets ... 你会发现，这里会多了一个 assets 目录 ...

来自 https://ninghao.net/video/2030#info

想要改变文件或者目录的位置 .. 可以这样 ... 把把焦点放到想要移动的文件或者目录的上面 ... 比如我们要把 javascripts 这个目录放到新创建的 assets 这个目录的下面 ... 想浏览到这个目录 ... 然后按一下 M 键 ... 你可以把 M 想成代表的是 Move ... 也就是移动的意思 ...

在出现的窗口里面，可以输入 Javascripts 这个目录的新的路径 ... 在它的前面，加上一个 assets/ 表示要把这个 javascripts 目录移动到 assets 这个目录的下面，移动以后，这个目录仍然叫做 javascripts ... 这个移动的操作，也可以用来重命名文件或者目录 ..

来自 https://ninghao.net/video/2031#info

有时候你想要为项目里的文件或者目录创建一个复制品 ... 或者叫副本 ... 我们可以使用复制，然后粘贴的方法去做 .. 或者，也可以使用创建副本的方法 ... 按一下 ctrl + 0 ... 先所焦点切换到树形视图上 .. 浏览到你想要创建副本的目录或者文件 ...

复制，可以使用快捷键 ... command + C ... Windows 上应该是 ctrl + C ... 然后你需要再找到一个地方粘贴一下 ... 如果你复制的是目录的话 ... 不移动焦点，直接粘贴，会把你复制的目录粘贴到当前的目录的里面 ... 如果你想把副本跟你复制的目录放到同一个目录的下面，你需要先浏览到这个目录的父目录 .. 粘贴，用的是 command + V ... Windows 上应该是 ctrl + V ..

这里我复制的是一个文件，所以会把副本直接放到跟这个文件相同的目录的下面，副本文件的文件名会自动去命名 ... 这里就是 index0.html ... 删除目录或者文件，先浏览到要删除的目录或者文件 ... 然后按一下 delete ... 再按一下回车 ...

创建文件或者目录副本，还有一种方法，先浏览到对应的目录或者文件 ... 再按一下 D 这个按键 .. D 就是 duplicate ... 复制的意思 ... 这样会出现一个窗口，让你输入这个副本的名字 ... 把它命名成 index_bak.html ... 然后回车 ...

这里的 index_bak.html 就是 index.html 这个文件的一个副本 ...

来自 https://ninghao.net/video/2032#info