sublime text怎么设置自动补全

前端开发sublimeconfig

mac配置

此文件目录中文件主要是关于sublime的插件配置，快捷键配置，主题和字体配置。

插件列表

所有插件都可以使用Package Control安装，具体的安装方法可以自行谷歌安装，不在本文的介绍范围之内。也可以是使用git 手动安装。

1.autoprefixer

该插件主要使编写css更加的方便和快捷，可以配置快捷键给标签属性添加浏览器厂商前缀。安装前需要确定电脑安装node。

配置快捷键如下：

//autoprefixer快捷键设置

{ "keys": ["command+alt+p"], "command": "autoprefixer" }

具体配置和文档请参看官方文档

比如我在编写 CSS 的时候是不用关心哪些属性是需要添加厂商前缀的，当我需要保存测试的时候，只需要按下快捷键，该插件会自动给需要添加厂商前缀的属性添加前缀，如下：

{

display: -webkit-box

display: -ms-flexbox

display: flex

display: -webkit-flex

-webkit-flex-flow: row

-ms-flex-flow: row

flex-flow: row

}

当然该插件也可以加入到自己开发项目的自动化工具中去，比如：Gulp ，Grunt

2.babel

ES6终将是要取代 ES5 的但是在从 ES5 到 ES6 过度的过程中，各个浏览器厂商对 ES6 支持的也不是很好。

主要是将ES6的代码编译为ES5。至于为什么要这么做，不是本文的内容，可以自行谷歌了解。

3.Better Completion

javascript ,jQuery , Bootstrap 等js库的自动补全。该插件的特点就是可以自定义配置需要自动补全的库。

安装完以后它的配置文件可以配置自己需要补全的库

{

// --------------------

// sublime-better-completions-Package (sbc package)

// --------------------

// API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).

// After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.

//

// Your own setting file `sbc-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.

//

// --------------------

// APIs Setup

// --------------------

// `true` means enable it.

// `false` means disable it.

"completion_active_list": {

// build-in completions

"css-properties": false,

"gruntjs-plugins": false,

"html": false,

"lodash": false,

"javascript": false,

"jquery": false,

"jquery-sq": false, // Single Quote

"php": false,

"phpci": false,

"sql": false,

"twitter-bootstrap": false,

"twitter-bootstrap-less-variables": false,

"twitter-bootstrap3": false,

"twitter-bootstrap3-sass-variables": false,

"underscorejs": false,

"react": false,

// Your own completions?

// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-angularjs.sublime-settings

"my-angularjs": false,

// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-glossary.sublime-settings

"my-glossary": false,

// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-html.sublime-settings

"my-html": false,

// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-javascript.sublime-settings

"my-javascript": false

}

}

4.BracketHighlighter

括号高亮匹配插件。

借用一张官网的截图：

5.Color Highlighter

该插件可以显示在CSS文件中说使用的颜色的色值。包括HTML中嵌套的css样式也可以显示。

如下图：

还可以调节显示的样式，比如当我鼠标放到颜色上的时候

具体的可以参考官网的说明。

6.css3

该插件可以对css3属性进行高亮和自动补全。

具体效果如下：

安装完以后的设置如下：

View → Syntax → Open all with current extension as... → CSS3

7.DocBlockr

这个插件可以非常智能对js文件添加注释,这个非常的方便。

参考一张官网的截图：

8.Emmet

传说中快速的编写html代码的“神器”。具体的就不再介绍了。网上的教程一搜一大坨啊。

9.FileDiffs

文件差异对比插件。

10.html-css-jsprettify

之前格式化 js，css 文件使用的都是 JsFormat 和 CSSFormat。每次在不同的文件中都要去使用两个不同的插件。后来找到一个可以支持三种语言格式化的插件。

对Html，css，js文件进行格式化。

//html-css-jsprettify插件快捷键

{"keys": ["command+alt+l"],"command": "htmlprettify"},

11.jade

如果平时模板语言使用 jade 的话还是安装一个吧，这个可以让 Sublime 的显示更加的友好。jade相关插件，代码高亮

12.javascript next - ES6 syntax

javascript ES6 语法高亮的支持。

13.jQuery

这个插件主要包括 jQuery 语法高亮，代码段。

14.Sass和SCSS

这两个插件主要是平时使用 scss 或者是 sass 这些预编译语言有用，支持语法高亮。

工具插件

1.SFTP

这个插件还是很有用的。当我们在跟后端联调的时候，通常都会有一台开发机，暂时存放我们的代码，这个时候如果我们要做一些修改。通常的步骤是：

1.上传 svn 2.登上开发机 svn up 一下。这个过程中很浪费时间

如果我们使用 SFTP 插件就可以保存的时候自动上传到服务器。配置方法：

1.在项目根目录建立 sftp-config.json 文件

2.配置该文件，详细配置如下图

2.SideBarEnhancements和SideBarFolders

Sublime 侧边栏增强插件。

3.SublimeCodeIntel

语法，函数跳转。但是我在使用的过程中觉得这个插件并不怎么好用。

4.Markdown Extended

这个插件主要使 Sublime 对 markdown 语法的高亮支持。效果如下图：

5.TrailingSpaces

去除代码末尾的空格键

语法检查插件列表

1.SublimeLinter

安装完以后需要，另外安装需要检测语言的插件。

2.SublimeLinter-jshint

在安装完SublimeLinter 后安转该插件对 JavaScript 语言进行语法检测。

3.SublimeLinter-csslint

在安装完SublimeLinter 后安转该插件对 css 语言进行语法检测。

主题插件

1.Theme-soda

该插件主要能够使sublime 兼容mac的retina屏幕

需要在自己的配置文件内启动

{

"theme": "Soda Light 3.sublime-theme"

}

Sublime Text 3

Emmet

快速编写HTML代码

共3图>01

初始化文档

HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键或ctrl+e：

html:5 或!：用于HTML5文档类型

html:xt：用于XHTML过渡文档类型

html:4s：用于HTML4严格文档类型

>02

轻松添加类、id、文本和属性

1、连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：2、连续输入类和id，比如p.bar#foo，会自动生成：

3、下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码：

>03

嵌套

现在你只需要1行代码就可以实现标签的嵌套

>：子元素符号，表示嵌套的元素

+：同级标签符号

^：可以使该符号前的标签提升一行

>04

分组

可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，ctrl+e会自动生成：

>05

隐式标签

声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。下面是所有的隐式标签名称：

li：用于ul和ol中

tr：用于table、tbody、thead和tfoot中

td：用于tr中

option：用于select和optgroup中

>06

定义多个元素

要定义多个元素，可以使用*符号。比如，ul>li*3可以生成如下代码：

共2图>07

定义多个带属性的元素

如输入 ul>li.item$*3，将会生成如下代码

Emmet中如果需要指定反向编号，可以使用"$@-"符号

如果要从指定的数字开始编号，可以使用ul>li.item$@3*5

CSS缩写

>01

值

1、比如要定义元素的宽度，只需输入w100，即可生成

2、除了px，也可以生成其他单位，比如输入h10p+m5e

单位别名列表：

p 表示%

e 表示 em

x 表示 ex

>02

附加属性

1、缩写，比如 @f，可以生成：

一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成；

2、输入@f+，将生成：

>03

模糊匹配

如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

共3图>04

供应商前缀

1、如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：

2、可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：

3、如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：

前缀缩写如下：

w 表示 -webkit-

m 表示 -moz-

s 表示 -ms-

o 表示 -o-

>05

. 渐变输入lg(left, #fff 50%, #000)，会生成如下代码：

注意事项

Emmet中需要注意不要添加额外的空格

进一步学习可到官网

用awk可以很容易的做到，awk的命令可以这么写： awk "BEGIN{p=\"\"}{c=$0gsub(/\.[^\.]+\.[^\.]+$/, \"\")if(p!=$0){i++}print i,cp=$0}" test.txt 其中test.txt里面保存着楼主提供的文件名。

---