本节索引
sublime Text3 插件的安装
代码编辑非常有用的5个插件
配置React 开发环境所需要的插件支持
首先 请查看你的sublime Text3 上是否安装了Package Control ,
安装 Package Ctrol: 使用 ctrl + ~ 打开控制台,输入以下代码:
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())
1. 代码格式化的插件 (格式化HTML+CSS+JS+JSON代码的插件)
HTML-CSS-JS Prettify 是一个可以格式化HTML、CSS、Javascript和JSON的sublime插件,有着很棒的格式化效果。不过建议大家学习常用的代码编辑格式尽量写到符合标准的代码
安装过程如下:
1. 在Sublime Text中,按下Command+Shift+P调出命令面板;
2. 输入install 调出 Install Package 选项并回车;
3. 输入pretty,并在列表中选择HTML-CSS-JS Prettify后回车即可安装
可能遇到的问题以及解决方案(全部安装正确但格式化不能使用)
1、Node.js路径配置不对(首先确保安装了Node.js),修改一下HTML-CSS-JS Prettify的用户配置即可(Preferences -> Package-settings -> HTML/CSS/JS Prettify -> Set Prettify Preferences):
2、如果路径没有问题,查看是不是sublime打开的文件路径中有中文,由于HTML-CSS-JS Prettify不支持utf-8,打开文件路径如果有中文,也会报Node.js路径错误。
解决办法如下:
1、preferences->Browse Packages(打开sublime 的安装文件)
2、修改 HTML-CSS-JS Prettify 目录下的 HTMLPrettify.py 文件
3、83行:node_path = PluginUtils.get_node_path() 改为:node_path = PluginUtils.get_node_path().encode("utf-8")
4、85行:file_path = self.view.file_name() 改为:file_path = self.view.file_name().encode("utf-8")
2.Js和Css语法检查插件 sublimelinter以及配套的插件
启动Package Control
安装sublimelinter 插件
安装sublimelinter-jshint(备选安装 sublimelinter-jslint)
安装sublimelinter-csslint
安装node运行环境
注意不要使用jsxhint,这是针对于需要支持react语法的插件,想要安装react语法插件请参照后面的sublime 搭建react开发环境
全局安装 jshint /csslint
安装命令:sudo npm install -g jshint 注意插件名称都为小写.
:sudo npm install -g csslint
将下列代码复制到
Preference->package Settings->SublimeLinter->Setttings-User 中
注意下面代码中的(第五行和第六行 sublimelinter_executable_map)JS和Css的路径问题:
mac中可以再终端用 which node命令 查看node的安装路径
windows 中找到实际的node安装位置复制路径即可。
{
"sublimelinter": "save-only",
"sublimelinter_popup_errors_on_save": true,
"sublimelinter_executable_map": {
"javascript": "/usr/local/bin/node",
"css": "/usr/local/bin/node"
},
"jshint_options": {
"strict": false,
"quotmark": "single", //只能使用单引号
"noarg": true,
"noempty": true, //不允许使用空语句块{}
"eqeqeq": true, //!==和===检查
"undef": true,
"curly": true, //值为true时,不能省略循环和条件语句后的大括号
"forin": true, //for in hasOwnPropery检查
"devel": true,
"jquery": true,
"browser": true,
"wsh": true,
"evil": true,
"unused": "vars", //形参和变量未使用检查
"latedef": true, //先定义变量,后使用
"globals": {
"grunt": true,
"module": true,
"window": true,
"jQuery": true,
"$": true,
"global": true,
"document": true,
"console": true,
"setTimeout": true,
"setInterval": true
}
},
"csslint_options": {
"adjoining-classes": false,
"box-sizing": false,
"box-model": false,
"compatible-vendor-prefixes": false,
"floats": false,
"font-sizes": false,
"gradients": false,
"important": false,
"known-properties": false,
"outline-none": false,
"qualified-headings": false,
"regex-selectors": false,
"shorthand": false,
"text-indent": false,
"unique-headings": false,
"universal-selector": false,
"unqualified-attributes": false
}
}
sublimelinte 支持的语言截图(后续的语言支持需要用户自行配置)
sublimelinte 支持的语言截图
3. JSFormat 插件(只是针对于js文件有效,想要格式化HTML等文件,请参照第一点)
按下快捷键 Ctrl+Alt+p 打开Package Control命令面板
输入 jsformat 回车安装即可.
在你写javascript代码时,选中需要格式化的代码,按下 Ctrl+Alt+f 快捷键后,js代码自动格式化对齐,赶快试一试吧!
如果上面的快捷键使用无效可以使用命令格式化代码,你可以选中要格式化的代码 ,然后按下 Ctrl+Alt+P (mac 系统 command + shift +p) 输入命令: Format:javascript 回车即可格式化.
4. Emmet 是一个前端开发的利器 用于自动完成HTML的代码书写
Emmet 的基本用法是:输入简写形式,然后按 Tab 键。
关于 Emmet 的更多用法,请看官方文档,这份速查表可以帮你快速记忆简写形式。
Emmet安装:在Package Control中 install Package -> Emmet 安装Emmet.
使用:输入特定含义的字符 按 Tag 自动完成
5. Theme – Soda + sublime Text3 主题修改
安装:
Theme – Soda
配置:
在 Preferences ->Setting - User 中的[]中括号中添加,(注意配置文是数组的形式)
"theme": "Soda Light.sublime-theme" 或
"theme": "Soda Dark.sublime-theme"
6.Sublime Text 3安装React 开发环境插件
babel-sublime 支持ES6,React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展
安装:PC上Command+shift+p(Ctrl+shift+p)打开面板输入babel安装
配置:打开.js, .jsx 后缀的文件;
打开菜单view,
Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel),
选择babel为默认 javascript 打开syntax
sublimeLinter-jsxhint JSX 代码审查,实时提示语法错误, 帮助快速定位错误
安装PC上 Command+shift+p(Ctrl+shift+p)打开面板输入sublimeLinter-jsx安装(请先确保sublimeLinter安装成功)
必须有node.js环境支持 安装node.js
安装node中安装jsxhint
npm install -g jsxhint
修改Emmet兼容jsx 文件(使用Tag 快速完成react 代码书写)
JSX语法书写
安装PC上 Command+shift+p(Ctrl+shift+p)打开面板输入emmet安装
使用方法 打开preferences -> Key bindings - Users,把下面代码复制到[ ]中括号内部(注意配置文件为数组形式)。
{
"keys": [
"super+e"
],
"args": {
"action":"expand_abbreviation"
},
"command":"run_emmet_action",
"context": [{
"key":"emmet_action_enabled.expand_abbreviation"
}]
},
{
"keys": ["tab"],
"command":"expand_abbreviation_by_tab",
"context": [{
"operand":"source.js",
"operator":"equal",
"match_all": true,
"key":"selector"
}, {
"key":"preceding_text",
"operator":"regex_contains",
"operand":"(\b(a\b|div|span|p\b|button)(\.\w*|>\w*)?([^}]*?}$)?)",
"match_all": true
}, {
"key":"selection_empty",
"operator":"equal",
"operand": true,
"match_all": true
}]
}
使用super+e触发 emmet;
正则判断用 a,div,span,p,button标签默认tab 触发;
默认 class 修改为 className 注 supre+e 在 PC 上指的是win+e(pc 建议修改为emmet 默认按键 ctrl+e),在 mac 上指的是cmd+e
详细请参考规则来源StackOverflow,正则小有修改