Emmet 常用的高级功能

Emmet 的功能不仅仅局限在快速生成标记语言结构或者生成 CSS 代码,它还具有很多常用的前端相关的功能,下面就来介绍几个比较常用的功能。

生成 Lorem Ipsum

Lorem Ipsum 表示一段随机看不懂的文字。Lorem Ipsum 的文字让人看不懂,这样才能忽略内容的含义而专注内容的排版,作为测试数据填充用的。使用 Emmet 生成 Lorem Ipsum 文本非常简单,只需要使用 lorem这一条命令即可,敲击 Tab 键之后,就会生成如下一段文字:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, dolor, aperiam ab repellendus blanditiis eum exercitationem. Quae, reprehenderit repellat impedit asperiores consequatur? Illum quos magnam odit omnis recusandae natus similique.

Emmet 的 lorem 命令不仅仅只有输出这么一段文字这样一个简单的功能,它既然作为测试数据,可以加上参数指定要输出的字符数量。例如,我们如果想输出一个十个单词的 h1 标题,我们就可以使用如下命令 h1>lorem10 。但是这项功能对于使用中文的网页测试来说,好像没有多大用处,毕竟中文和英语单词的排版是不同的。

跳转编辑区域

写代码一般要用到两只手,有时候需要跳转到别的代码段等,你可以使用键盘方向键也可以使用鼠标。但是这都有缺陷,使用键盘方向键移动太慢了,而且需要按住 shift 键和方向键选中代码;使用鼠标的话,手就必须离开键盘,来回也会浪费一些时间。而 Emmet 提供了一个很实用的功能,就是整块的跳转。

为了方便理解,先看一下官方的 Demo 动画。这个功能,使用 Shift+Ctrl+.Shift+Ctrl+, 分别向下或者向上移动,选取的是一整块,先从标签开始,再是整个属性,再是属性值。这样,比键盘的方向键移动高效多了。

增加图片的尺寸大小

有时候,我们需要给 <img> 标签增加对应的 width、height 属性来表示图片的大小或者给通过 background-image 属性引用的背景图片一个尺寸大小。通常的做法是看一下图片的尺寸,然后加上,而现在,你只需要将光标移动到代码段,摁下 Ctrl+U 即可让 Emmet 自动读取图片的尺寸添加上。前提条件是图片比较存在并且正确引用进来了。

如果是针对 <img> 标签的,会在后面加上 width、height 属性,如果是 background 引入的,会在下面加上 width、height 的 CSS 属性。可以看一下官方的 Demo 。但是这里有个问题,官方的 Demo 中,实现这个功能的快捷键是 Shift+Ctrl+U 但实际使用中,这个快捷键不起作用。关于 Emmet 的 Mac、Win 下的快捷键,以这个页面上的为准:https://github.com/sergeche/emmet-sublime#available-actions

更新 CSS 的属性值

我们在写 CSS 的时候,有时候为了 hack 写很多带有前缀的属性。例如:

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);

如果我们突然想修改一下旋转的角度值,那么我们就需要依次修改或者按住 Ctrl 多个选中进行修改。使用 Emmet 的话,就方便多了,我们只需要修改其中一个,然后摁下 Shift+Ctrl+R 键即可更新其他的相关属性值。

将图片资源转换成 data url 形式

data url 图片具有很多优点,在某些情况下比较实用,但是将图片转换成 data url 格式就比较麻烦了,得使用一些工具。而在 Emmet 中,将光标移动到 background: url() 中的图片位置的地方,按下Ctrl+’ 即可将图片编码成 data url 格式。当然,前提条件是图片资源引用正确。

除此之外,Emmet 还有一些其他的诸如快速跳转、计算等等常用功能,在这里只是介绍了几个更常用的功能,有兴趣的朋友可以打开Emmet Action 的官方文档看一下 Demo,这里不再赘述。

使用 Emmet 提高编写 CSS 的效率

在前面,潜行者m 介绍了 Emmet 的功能如何使用 Emmet 来生成 HTML 代码,这次再来讲解一下如何使用 Emmet 提高 CSS 编写效率。

首先,Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来提高 CSS 编写效率。例如编写 position: absolute; 这一个属性,我们只需要输入 posa 这四个字母即可。它会弹出缩写样式的提示:

Sublime text 2 快速生成 CSS 代码

你不妨在编写 CSS 的时候,留意一下 ST2 提供了哪些属性的缩写方法,这样就可以提高一定的效率了。但是 Emmet 提供了更多的功能,请往下看。

简写属性和属性值

如果你想生成 width:100px; 你只需要输入 w100 就可以了,因为 Emmet 的默认设置 w 是 width 的缩写,后面紧跟的数字就是属性值。默认的属性值单位是 px ,你可以在值的后面紧跟字符生成单位,可以是任意字符。例如,w100foo 会生成 width:100foo; 这样一条语句。你同样也可以简写属性单位,如果你紧跟属性值后面的字符是 p ,那么将会生成 width:100%; 这样的语句,其中 p 表示百分比单位。与此类似的还有:e → em; x → ex。

例如 margin 这样的属性,可能并不是一个属性值,生成多个属性值需要用横杠(-)连接两个属性值,因为 Emmet 的指令中是不允许空格的。例如使用 m10-20 这条命令可以生成 margin: 10px 20px; 这样一条语句。如果你想生成负值,多加一条横杠即可。需要注意的是,如果你对每个属性都指定了单位,那么不需要使用横杠分割。例如使用 m10ff20ff 这条命令可以生成 margin: 10ff 20ff; 这条语句,如果你在 20ff 前面加了横杠的话,20ff 就会变成负值了。

如果你想一次生成多条语句,可以使用 ‘+’ 连接两条语句,例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 这两条语句。

颜色值也是可以快速生成的,例如 c#3color: #333;,更复杂一点的,使用 <code>bd5#0s 可以生成 border: 5px #000 solid; 这样一句。下面是规则:

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00
生成 !important 这条语句也当然很简单,只需要一个 ‘!’ 就可以了。 ## 增加额外的选项 使用 @f 即可生成 CSS3 中的 font-face 的代码结构:
@font-face {
 font-family:;
 src:url();
 }
但是这个结构太简单,不包含一些其他的 font-face 的属性,诸如 background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等属性,我们可以在生成的时候输入 '+' 生成增强的结构,例如我们可以输入 @f+ 命令,即可输出选项增强版的 font-face 结构:
@font-face {
 font-family: 'FontName';
 src: url('FileName.eot');
 src: url('FileName.eot?#iefix') format('embedded-opentype'),
 url('FileName.woff') format('woff'),
 url('FileName.ttf') format('truetype'),
 url('FileName.svg#FontName') format('svg');
 font-style: normal;
 font-weight: normal;
 }

增加实验性前缀(Vendor Prefixes)

CSS3 等现在还没有出正式的 W3C 规范,但是很多浏览器已经实现了对应的功能,仅作为测试只用,所以在属性前面加上自己独特的实验性前缀,不同的浏览器只会识别带有自己规定前缀的样式。然而为了实现兼容性,我们不得不编写大量的冗余代码,而且要加上对应的前缀。使用 Emmet 可以快速生成带有前缀的 CSS3 属性。

ST2 已经内置了一些常见的需要实验性前缀的 CSS3 属性,例如输入 trf 会弹出提示,然后敲击回车键即可生成。而 Emmet 增强了这个功能。在任意字符前面加上一条横杠(-),即可生成该属性的带前缀代码,例如输入 -foo-css,会生成:

-webkit-foo-css: ;
 -moz-foo-css: ;
 -ms-foo-css: ;
 -o-foo-css: ;
 foo-css: ;
虽然 foo-css 并不是什么属性,但是照样可以生成。此外,你还可以详细的控制具体生成哪几个浏览器前缀或者先后顺序,使用 `-wm-trf` 即可生成:
-webkit-transform: ;
 -moz-transform: ;
 transform: ;
可想而知,w 就是 webkit 前缀的缩写,m 是 moz 前缀缩写,s 是 ms 前缀缩写,o 就是 opera 浏览器前缀的缩写。如果使用 -osmw-abc 即可生成:
-o-abc: ;
 -ms-abc: ;
 -moz-abc: ;
 -webkit-abc: ;
 abc: ;

生成渐变背景

CSS3 中新增加了一条属性 linear-gradient 使用这个属性可以直接制作出渐变的效果。但是这个属性的参数比较复杂,而且需要添加实验性前缀,无疑需要生成大量代码。而在 Emmet 中使用 lg() 指令即可快速生成,例如:使用 <code>lg(left, #fff 50%, #000) 可以直接生成:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

直接帮你生成好了浏览器前缀。

Emmet 的还有一些其他的强大功能,将在后面继续讲解介绍,尽请关注。

Emmet 生成 HTML 的语法

在上篇文章前端开发神器 Emmet 介绍中,我简单的介绍了一下 Emmet ,并且用了一句指令迅速生成了一大片 HTML 代码。本文,就会介绍 Emmet 的 HTML 语法,看完之后,你就会看懂并且写出那句代码了。

现在,打开你的 ST2 然后新建一个 HTML 文档,跟着文章,即时输入对应的指令然后亲自尝试一下!

生成 HTML 文档初始结构

HTML 文档的初始结构,就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构,你没有看错,输入一个感叹号(当然是英文符号),然后摁下 TAB 键,就会发现生成了下面的结构:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
这就是一个 HTML5 的标准结构,也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构,那么输入指令 `html:xt` 即可生成如下结构:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
Emmet 会自动把 doctype 给你补全了,怎么样,这样的功能会不会让你动心?简单总结一下常用的 HTML 结构指令: * `html:5` `或者 !` 生成 HTML5 结构 * `html:xt` 生成 HTML4 过渡型 * `html:4s` 生成 HTML4 严格型 ## 生成带有 id 、class 的 HTML 标签 Emmet 的语法有点类似 CSS 的语法,生成 id 为 aaa 的 div 标签,我们只需要编写下面指令:
#aaa
Emmet 默认的标签为 div ,如果我们不给出标签名称的话,默认就生成 div 标签。如果编写一个 class 为 bbb 的 span 标签,我们需要编写下面指令:
span.bbb
然后就生成了对应的结构。同理,如果想要编写一个 id 为 ccc 的 class 为 ddd 的 ul 标签,我们可以这样写:
ul#ccc.ddd
很简单吧?比你用手写 id 、class 方便多了吧 ## 生成后代:> 大于号表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表,而且被 class 为 aaa 的 div 包裹,那么可以使用下面指令:
div.aaa>ul>li
可以生成如下的结构:
<div>
    <ul>
        <li></li>
    </ul>
</div>

生成兄弟:+

上面是生成下级元素,如果想要生成平级的元素,就需要使用 + 号。例如下面指令:

div+p+bq`</pre>
就可以生成如下的 HTML 结构:
<pre>`&lt;div&gt;&lt;/div&gt;
&lt;p&gt;&lt;/p&gt;
&lt;blockquote&gt;&lt;/blockquote&gt;`</pre>

## 生成上级元素:^

上级 (Climb-up)元素是什么意思呢?前面咱们说过了生成下级元素的符号“&gt;”,当使用 div&gt;ul&gt;li 的指令之后,再继续写下去,那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签,那么我需要先用 “^” 提升一下层次。例如:
<pre>div&gt;ul&gt;li^span</pre>
就会生成如下结构:
<pre>&lt;div&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;span&gt;&lt;/span&gt;
&lt;/div&gt;</pre>
如果我想相对与 div 生成一个平级元素,那么就再上升一个层次,多用一个“^”符号:
<pre>div&gt;ul&gt;li^^span</pre>

## 重复生成多份:*

特别是一个无序列表,ul 下面的 li 肯定不只是一份,通常要生成很多个 li 标签。那么我们可以直接在 li 后面 * 上一些数字:
<pre>ul&gt;li*5</pre>
这样就直接生成五个项目的无序列表了。如果想要生成多份其他结构,方法类似。

## 生成分组:()

用括号进行分组,这样可以更加明确要生成的结构,特别是层次关系,例如:
<pre>`div&gt;(header&gt;ul&gt;li*2&gt;a)+footer&gt;p`</pre>
这样很明显就可以看出层次关系和并列关系,生成如下结构:
<pre>`&lt;div&gt;
    &lt;header&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/header&gt;
    &lt;footer&gt;
        &lt;p&gt;&lt;/p&gt;
    &lt;/footer&gt;
&lt;/div&gt;`</pre>
此外,分组还可以很方便的结合上面说的 “*” 符号生成重复结构:
<pre>`(div&gt;dl&gt;(dt+dd)*3)+footer&gt;p`</pre>
生成结构:
<pre>`&lt;div&gt;
    &lt;dl&gt;
        &lt;dt&gt;&lt;/dt&gt;
        &lt;dd&gt;&lt;/dd&gt;
        &lt;dt&gt;&lt;/dt&gt;
        &lt;dd&gt;&lt;/dd&gt;
        &lt;dt&gt;&lt;/dt&gt;
        &lt;dd&gt;&lt;/dd&gt;
    &lt;/dl&gt;
&lt;/div&gt;
&lt;footer&gt;
    &lt;p&gt;&lt;/p&gt;
&lt;/footer&gt;`</pre>

## 生成自定义属性:[attr]

a 标签中往往需要附带 href 属性和 title 属性,如果我们想生成一个 href 为 “http://www.qianxingzhem.com” ,title 为“潜行者m 博客”的 a 标签,可以这样写:
<pre>a[href="http://www.qianxingzhem.com" title="潜行者m 博客"]</pre>
其他标签和属性都类似。

## 对生成内容编号:$

例如无序列表,我想为五个个 li 增加一个 class 属性值 item1 ,然后依次递增从 1-5,那么就需要使用 $ 符号:
<pre>`ul&gt;li.item$*5`</pre>
这样就生成了如下结构:
<pre>&lt;ul&gt;
 &lt;li class="item1"&gt;&lt;/li&gt;
 &lt;li class="item2"&gt;&lt;/li&gt;
 &lt;li class="item3"&gt;&lt;/li&gt;
 &lt;li class="item4"&gt;&lt;/li&gt;
 &lt;li class="item5"&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
$ 就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个 $:
<pre>`ul&gt;li.item$$$*5`</pre>
输出:
<pre>`&lt;ul&gt;
    &lt;li class="item001"&gt;&lt;/li&gt;
    &lt;li class="item002"&gt;&lt;/li&gt;
    &lt;li class="item003"&gt;&lt;/li&gt;
    &lt;li class="item004"&gt;&lt;/li&gt;
    &lt;li class="item005"&gt;&lt;/li&gt;
&lt;/ul&gt;`</pre>
只能这样单调的生成序号?对于强大的 Emmet 来说,肯定不会会了,我们也可以在 $ 后面增加 @- 来实现倒序排列:
<pre>`ul&gt;li.item$@-*5`</pre>
生成如下结构:
<pre>`&lt;ul&gt;
    &lt;li class="item5"&gt;&lt;/li&gt;
    &lt;li class="item4"&gt;&lt;/li&gt;
    &lt;li class="item3"&gt;&lt;/li&gt;
    &lt;li class="item2"&gt;&lt;/li&gt;
    &lt;li class="item1"&gt;&lt;/li&gt;
&lt;/ul&gt;`</pre>
同样,我们也可以使用 @N 指定开始的序号:
<pre>`ul&gt;li.item$@3*5`</pre>
这样就会从 3 开始排序,生成如下代码:
<pre>`&lt;ul&gt;
    &lt;li class="item3"&gt;&lt;/li&gt;
    &lt;li class="item4"&gt;&lt;/li&gt;
    &lt;li class="item5"&gt;&lt;/li&gt;
    &lt;li class="item6"&gt;&lt;/li&gt;
    &lt;li class="item7"&gt;&lt;/li&gt;
&lt;/ul&gt;`</pre>
配合上面倒序输出,可以这样写:
<pre>`ul&gt;li.item$@-3*5`</pre>
生成的就是以 3 为底倒序:
<pre>`&lt;ul&gt;
    &lt;li class="item7"&gt;&lt;/li&gt;
    &lt;li class="item6"&gt;&lt;/li&gt;
    &lt;li class="item5"&gt;&lt;/li&gt;
    &lt;li class="item4"&gt;&lt;/li&gt;
    &lt;li class="item3"&gt;&lt;/li&gt;
&lt;/ul&gt;`</pre>

## 生成文本内容:{}

上面讲解了如何生成 HTML 标签,那里面的内容呢?当然也可以生成了:
<pre>`a[href="http://www.qianxingzhem.com"]{点击这里到 潜行者m 的博客}`</pre>
这样就生成了一个到我博客的超链接了。在生成内容的时候,特别要注意前后的符号关系,虽然 a&gt;{Click me} 和 a{Click me} 生成的结构是相同的,但是加上其他的内容就不一定了,例如:
<pre>`&lt;!-- a{click}+b{here} --&gt;
&lt;a href=""&gt;click&lt;/a&gt;&lt;b&gt;here&lt;/b&gt;

&lt;!-- a&gt;{click}+b{here} --&gt;
&lt;a href=""&gt;click&lt;b&gt;here&lt;/b&gt;&lt;/a&gt;`</pre>
这样就生成了完全不同的结构,注意这些小细节哦。

##  不要有空格

在写指令的时候,你可能为了代码的可读性,使用一些空格什么的排版一下。这就会导致代码无法使用。例如下面这句:
<pre>`(header &gt; ul.nav &gt; li*5) + footer

而去掉空格之后,就可以正常执行生成结构了。HTML 语法部分说完了,现在回头看看第一篇文字,你是否已经看懂了那一串指令?下一篇将会讲解快速编写 CSS 的技巧。

前端开发神器 Emmet 介绍

在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet,它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。

你可能听说过一款强大的功能相似的工具:Zen Coding,那个比较老了,而现在的 Emmet 则是 Zen Coding 的升级版,由 Zen Coding 的原作者进行开发等。

Emmet 严格意义上来说,并不是一款软件或者工具,它是一款编辑器插件,必须要基于某个编辑器使用。目前它支持如下编辑器:

在 Sublime text 2 中安装 Emmet

Sbulime text 2 安装插件肯定要通过 Package Control 这个插件了,如果你还没有安装这个插件,抓紧先去安装一下吧。安装完成之后,我们摁下“shift + ctrl + p”呼出面板,输入“pci”即可锁定“Package Control:Install Package”这个功能,回车之后就可以看到一个列表,我们继续输入“emmet”即可找到这个插件,回车之后等待一会就安装完成了。

sublime text 2 安装 emmet

开始使用 Emmet

Emmet 可以快速的编写 HTML、CSS 以及实现其他的功能。它根据当前文件的解析模式来判断要使用 HTML 语法还是 CSS 语法来解析。例如当前文件的后缀为 .html 那 Sublime text 2 就会用 HTML 的解析模式来解析高亮这个文件,Emmet 遇到里面的指令就会根据 HTML 的语法把它编译成 HTML 结构。如果是在一个 .c 的 C语言 文件中,你写出来的用于编译 HTML 指令就不会被 Emmet 识别编译。

此外,在没有后缀的文件中,你可以摁下“shift + ctrl + p”呼出面板,输入“seth”就可以设置当前文件的解析模式为 HTML 。了解这些之后,下面我们来见证强大的 Emmet 。

如果让你编写下面的这个 HTML 结构,你需要多长时间?

<div id=”page”>
<div class=”logo”></div>
<ul id=”navigation”>
<li><a href=””>Item 1</a></li>
<li><a href=””>Item 2</a></li>
<li><a href=””>Item 3</a></li>
<li><a href=””>Item 4</a></li>
<li><a href=””>Item 5</a></li>
</ul>
</div>

然而,这一切你只需要编写下面这一句按照 Emmet 语法写出来的语句,然后用 Emmet 编译一下,就可以生成了!

#page>div.logo+ul#navigation>li*5>a{Item $}

我们把它复制到 Sublime text 2 中已经打开的 HTML 文件中,这时候紧跟着敲击一下 TAB 键,见证奇迹的时刻到来了。

怎么样?很神奇吧,仅仅写一行代码,就可以生成这么一个复杂的 HTML 结构,而且还可以生成对应的 class 、id 和有序号的内容。而且 Emmet 的语法很简单,虽然你现在可能还看不懂,后面的系列教程会详细讲解它的语法,你现在只需要知道 Emmet 的工作流程:打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成!

在 Sublime Text 2 中使用 SFTP 插件快速编辑远程服务器文件

Sublime Text 2 本身并不强大,但是它方便使用插件扩展功能,所以变得很强大。今天 潜行者m 介绍一个很实用的插件 SFTP ,可以大大提高前端工作效率。

常见的工作流程

有时候修改一些网站上的文件,通常是下面这样的流程:使用 FTP/SFTP 连接到远程服务器 -> 下载要修改的文件 -> 使用 ST2 修改文件 -> 保存然后拖进 FTP 中 -> 刷新网站。

很明显这样的工作流程效率很低,特别是你修改一句代码的时候,为了即时生效,也需要重复切换几个窗口重复这个过程。于是就有了 SFTP 这个插件。

它主要功能就是通过 FTP/SFTP 连接远程服务器并获取文件列表,可以选择下载编辑、重命名、删除等等操作,点下载编辑之后,可以打开这个文件进行修改。修改完成之后,保存一下会自动上传到远程的服务器上面。

使用这个插件之后,工作流程就变成了:使用 SFTP 插件打开文件 -> 使用 ST2 编辑修改文件 -> 保存文件 -> 刷新页面。效率提升了至少一倍以上,下面就来介绍一下具体的使用方法。

SFTP 使用方法

先要安装这个插件,打开 Sublime Text 2 ,摁下 shift + ctrl + p 键,呼出面板,使用 Package Control 这个插件安装。输入 “pci” 敲击回车,再输入 “sftp” 即可安装这个插件。安装完之后,就要开始配置服务器使用了。

第一步:配置 FTP/SFTP 服务器信息

安装完插件之后,找到 “文件” 菜单,找到 “SFTP/FTP” 选项,点击配置:

在 SFTP 中配置远程服务器信息

点击之后,会弹出一个新的窗口,这是一个配置文件

SFTP 中服务器的配置参数

一般就是配置一下我箭头所指的四个参数,包括连接方式、服务器地址、用户名、密码等。如果你的服务器还有其他配置,你也可以对照注释设置一下。一般为了方便,还会设置一下“路径”,这样直接可以看到想要修改的文件列表。

配置完成之后,我们保存,然后输入一个名字作为标识。

第二步:连接服务器获取文件列表

还是点击 “文件” 选择 “SFTP/FTP” 中的查看服务器列表

使用 SFTP 连接远程服务器

会弹出刚刚配置好的服务器,我们可以点击需要连接的 FTP 服务器,这时候就链接上了并且弹出文件列表

SFTP 连接服务器获取文件列表

这时候点击一个文件,就可以弹出一些选项

使用 SFTP 操作远程文件

就可以根据你自己的需要,对文件编辑、重命名什么的了。点击编辑之后,会在本地打开,然后可以修改。摁下 ctrl + s 保存文件的时候,就会自动上传文件。

如果需要查看服务器上的别的文件,或者需要更多的功能,可以直接在当前文件中右击,选择 “SFTP/FTP” 就会弹出更多选项可以使用,没法截图所以不再赘述。更多的功能,就交给你自己探索了!