sublime前端开发工具

标签： 前端工具

---

其他常用的插件

• 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的插件。

官网在此 - Emmet LiveStyle

使用超级简单，下载安装就可以用了。

---

没完，偶尔更新。。