sublime text3前端开发必备插件详解

作者: AG亚游集团 分类: 媒体专栏 发布时间: 2018-03-26

Sublime text3这款软件是免费的,除了偶尔提示付费之外,对使用没有什么影响。

破解版问题较多,不建议下载。官网地址:http://www.sublimetext.com/3 可以根据系统版本进行下载。本文的内容主要针对win系统。

 

安装完主程序之后,需要安装package control组件。

1、按快捷键ctrl+~ 或者从菜单View->Show Console调出命名控制行,输入以下代码:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
 

2、重启Sublime Text 3,如果在Perferences->package settings中看到package control这一项,则安装成功。

 

3、打开package control 选择install package,在里面搜索查找需要的插件。

 

前端必备插件:

 

Emmet:

功能:编码快捷键,前端必备。

使用:在输入代码段后,按Tab键即可补全代码。例如输入html:5按住Tab键即可生成HTML文件完整的结构,但是很多人在安装完成后输入html:5然后按住Tab键并没有反应,这是什么原因导致的呢?原来Emmet默认的快捷键是Ctrl+E,我们需要将其设置成常用的Tab键。

在菜单栏选择Preferences-->PackageSettings-->Emmet-->KeyBindings-->User,将以下信息粘贴进去即可:

[{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}]

重启Sublime Text3此时我们便可以进行代码补全操作了。

 

CSS3

CSS3语法高亮、CSS语法提示,美中不足的是缺少游览器私有属性高亮。配合
AutoPrefixer可以完美解决。

 

AutoPrefixer

功能:CSS3私有前缀自动补全插件(该插件也需要系统已安装Node.js环境,部分CSS还未标准化,所以要给各大浏览器一个前缀以解决兼容问题)

使用:在输入CSS3属性后(冒号前)按Tab键

 

Html5

支持html5语法头部生命引用。

 

ConvertToUTF8

支持
UTF-8编码的插件

 

CSS Extended Completions

关联
CSS文件,智能提示css文件中的类名,非常好用。

 

ColorHighlighter

它可以展示你所选择的颜色代码(像#FFFFFFrgb(255,255,255)white”)的真正颜色。

 

Bracket Highlighter

用于匹配括号,引号和html标签。安装好之后,不需要设置插件会自动生效。

 

HTML-CSS-JS Prettify

HTMLCSSJS代码格式化,需要node.js支持。格式化的时候,如果出现错误,请设置set-node-pathnodejs地址换成安装的地址,注意地址要用/分开。

 

SideBar Enhancements

这个插件改进了侧边栏,增加了许多功能。

 

AutoFileName

功能:自动完成文件名的输入,如图片选取,快捷输入文件名

使用:安装即用,输入”/”即可看到相对于本项目文件夹的其他文件
 

ColorPicker:
功能:调色板(需要输入颜色时,可直接选取颜色)

使用:快捷键Windows: ctrl+shift+c
 

TrailingSpaces

这款插件能高亮显示多余的空格和Tab

 

SublimeCodeIntel:

功能:代码提示和补全插件,支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python3、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等所有语言。

使用:安装该插件后需要根据您使用的编程语言进行配置。具体可百度。
 

ChineseLocalization

软件汉化。

 

SublimeLinter:

前提:安装该插件之前,必须安装Node.js,然后再安装SublimeLinter

功能:检查代码中语法错误的插件,支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言(但前提是需要配置相应语言的环境,HTML检查就安装sublimeLinter-contrib-htmlhint,如果是js检查就安装sublimeLinter-jshint,如果是css检查就安装csslint)。

使用:找到node.js的CMD窗口,输入以下命令(可挨个输入);等待出现一堆数字版本号即为成功安装。

npm install -g xg-htmlhint

npm install jshint

npm install csslint

后续再保存文件的时候,如有错误,就会提示了。

本页标签: sublime



如果觉得本文对您有用,请您任意打赏。博主QQ/微信:468161447