标签： 前端工具
其他常用的插件
- All autocomplete： 根据已打开文件的关键字来补全
- AutoFileName： 自动补全文件名
- BracketHighLighter： 突出显出括号
- DocBlockr: 写文档注释必备
- EditorConfig： 编辑器环境统一配置文件
- Emmet： 编写HTML CSS的神器，需要学它的语法
- Gist ：与自己的gist库连接，需要权限
- SidebarEnhancement： 侧边栏增强
- SyncedSidebar： 根据文件自动打开左边目录树
- todopreview: 查看所有TODO注释
SublimeLinter-contrib-eslint
eslint是语法检查的工具，需要用到npm，安装过程如下:
1.首先全局安装eslint，后面那个是支持es6
npm i -g eslint babel-eslint eslint-plugin-react
2.然后sublime3安装插件(貌似只有st3支持)
package install进入安装界面,安装SublimeLinter-contrib-eslint
如果没有sublimeLinter还要安装它SublimeLinter。
3.sublime安装babel
打开一个js文件设置view->syntax->open all with extension as->babel->javascript
4.设置SublimeLinter路径
Preference->Package Setting->SublimeLinter->User Setting
...
"paths": {
"linux": [],
"osx": [],
"windows": ["C:\\Users\\Administrator\\AppData\\Roaming\\npm"]
},
...
tips: 参看这个
5.设置.eslintrc
项目根目录上新建文件.eslintrc,它是长这个样子的
module.exports = {
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"mocha": true,
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"ecmaVersion": 6,
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
"tab"
]
}
}
详细设置可以参考官方
或者这篇文章 eslint配置参数介绍
这篇文章更详细
现在应该能够用了，不能用的话可以先用命令行试下eslint file看看有没有报错。
Floobits
结对编程的工具，可以实时同步两台机器的代码，支持sublime text, atom等编辑器。可以免费使用。
floobits官网
安装：很简单的，看官网，不多说了。
使用：以sublime为例，两台机注册两个号，然后一台share workspace创建仓库，另一台join workspace加入仓库，代码权限可以上官网搞，之后就可以两台机一起敲代码了，挺好玩的。
注意： 每次打开编辑器都要join workspace登录仓库来进行实时同步。
Emmet LiveStyle
前端页面编写的福音啊！！！
样式实时预览工具，不刷新页面，实时更新页面样式，支持浏览器与编辑器的双向绑定，也就是说浏览器上的修改也会写到编辑器上。同时也支持远程调试。一个字，神器！目前有chrome和sublime的插件。
使用超级简单，下载安装就可以用了。
