前端团队开发工具

### Sublime
代码检查
  1. http://www.sublimetext.com/3 下载合适的portable version
  2. https://nodejs.org/download/ 下载 node并且安装
  3. 安装jshint
    $ npm install jshint -g
    如果没响应(GFW,使用cnpm和npmreg都是不错的选择 ),使用淘宝的源,下面cnpm换成jshint。
  4. https://packagecontrol.io/installation 按照说明配置sublime 包管理器
  5. sublime中ctrl+shift+p, 输入install,选择install Package
  6. 搜索安装 SublimeLinter
  7. 搜索安装SublimeLinter-jshint
  8. 可能需要重启sublime
  • 在sublime右键,菜单最后有个SublimeLinter配置,配置前两项Lint Mode和Mark Style,分别表示触发事件和标记样式。
    *如果要修改默认js规则,可在项目目录下放配置文件,参考移动云目录下的.jshintrc 文件,(ps:团队项目的配置文件不要个人去修改)
  • 前端团队开发工具_第1张图片

格式化

  • HTML-css-JS Prettify ——代码格式化
  • Docblocker—— 注释

  • 其他可选 插件(可选)
  • better Completion——代码提示
  • emmet——就是 zencoding


####Fiddle
  • 查看网络数据的工具,还可以当代理使用,可以把远程文件用本地文件替换来调试的工具。
  • 有了它,就能不启动本地环境,直接链接远程服务器来开发前端代码了。
  • 前端团队开发工具_第2张图片

###gulp
前端项目构建工具
在工程根目录(与index.html同级)中有两个相关文件:
package.json  —— node包配置文件
通过下面的命令来加载依赖包
$ npm install

gulpfile.js   —— gulp配置文件
在工程根目录打开命令行,执行下面命令来打包maroco.js
$ gulp
前端团队开发工具_第3张图片

你可能感兴趣的:(前端团队开发工具)