├── README.md ├── env └── idt.md └── tools ├── TotalTerminal.md ├── chrome-extension.md ├── img ├── nvm │ ├── Thumbs.db │ ├── git_install.png │ ├── gitbash.png │ ├── nvmw_1.png │ ├── nvmw_2.png │ ├── nvmw_3.jpg │ ├── nvmw_4.png │ └── nvmw_5.png └── terminal │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ └── 8.png ├── npm.md ├── nrm.md ├── nvm.md ├── oh-my-zsh.md └── sublimetext3.md /README.md: -------------------------------------------------------------------------------- 1 | # Lagou-FE TEAM Tips 2 | 3 | ## IDE 4 | * [Total Terminal](./tools/TotalTerminal.md)(可根据自己习惯选择安装) 5 | * [oh-my-zsh](./tools/oh-my-zsh.md) 6 | * [nvm](./tools/nvm.md) 7 | * [npm](./tools/npm.md) 8 | * [nrm](./tools/nrm.md) 9 | * [Sublime Text 3](./tools/sublimetext3.md) 10 | * [VS Code](https://code.visualstudio.com/) 11 | * [Chrome Extension](./tools/chrome-extension.md) 12 | 13 | ## 构建工具 14 | * [idt](./env/idt.md) (已停止维护，可跳过) 15 | * [normae](https://github.com/Lagou-Frontend/normae) 16 | * [webpack](https://doc.webpack-china.org/) 17 | 18 | ## 技术 19 | * [less](http://less.bootcss.com) 20 | * [jQuery](http://www.w3school.com.cn/jquery/) 21 | * [amd](https://github.com/amdjs/amdjs-api/wiki/AMD) 22 | * [esl](https://github.com/ecomfe/esl) 23 | * [velocity](http://www.cnblogs.com/codingsilence/archive/2011/03/29/2146580.html) 24 | * [artTemplate](https://github.com/aui/artTemplate) 25 | * [vue](https://cn.vuejs.org/v2/guide/) 26 | * [bower](http://bower.io/) 27 | * [node](https://nodejs.org/zh-cn/) 28 | * [npm](https://www.npmjs.com/) 29 | * [fis3](http://fis.baidu.com/fis3/docs/beginning/intro.html) 30 | * [gulp](http://www.gulpjs.com.cn/) 31 | -------------------------------------------------------------------------------- /env/idt.md: -------------------------------------------------------------------------------- 1 | #IDT 2 | 拉勾网前端集成开发环境 3 | 4 | 5 | * `npm install idt@1.1.16 -g` 需要注意版本号,只能安装1.1.16版本. 高版本会有兼容问题 6 | 7 | * `idt install` 安装依赖 8 | 9 | * `idt install` 再次运行将提示 `you have installed 'grunt' & 'edp'.`，可验证是否安装完成 10 | 11 | * 新安装的idt会自动install最新版本的edp，build时候不会引入依赖的common目录下的组件文件，需要手动更新如下版本： 12 | 13 | > edp@1.0.1 /usr/local/lib/node_modules/edp 14 | 15 | > Builtin Commands: 16 | 17 | > edp-config (1.0.2) 18 | 19 | > edp-core (1.0.28) 20 | 21 | > edp-build (1.0.14) 22 | 23 | * `idt ws start` 启动服务 24 | 25 | * `idt build` 发布资源 26 | 27 | * 详细请参考：[idt README](https://github.com/Lagou-Frontend/idt) 28 | 29 | ### [回导航页](../README.md) 30 | -------------------------------------------------------------------------------- /tools/TotalTerminal.md: -------------------------------------------------------------------------------- 1 | # TotalTerminal安装及配置 2 | 3 | ## 安装 4 | 5 | * 下载 `http://downloads-2.binaryage.com/TotalTerminal-1.5.4.dmg` 6 | * 安装过程 7 | 8 | 选择pkg文件进行安装 9 | 10 | ![](./img/terminal/1.jpg) 11 | 12 | 点击继续 13 | 14 | ![](./img/terminal/2.jpg) 15 | 16 | 点击安装 17 | 18 | ![](./img/terminal/3.jpg) 19 | 20 | 输入密码 21 | 22 | ![](./img/terminal/4.jpg) 23 | 24 | 安装完成 25 | 26 | ![](./img/terminal/5.jpg) 27 | 28 | 设置自动更新 29 | 30 | ![](./img/terminal/6.jpg) 31 | 32 | ## 配置 33 | 34 | 1. `CMD + ,` 进入设置界面 35 | 2. 通用标签下 修改文件新建窗口为Homebrew(这个仅仅是个人爱好问题) 36 | 3. 描述文件标签下 将Homebrew设置为默认 37 | 4. 对文本的字体及光标等样式进行个性化设置 38 | 5. shell小标签下 设置当shell退出时 关闭窗口 39 | 6. TotalTerminal标签下 点选 如下配置 40 | 41 | ![](./img/terminal/7.jpg) 42 | ![](./img/terminal/8.png) 43 | 44 | ## 快捷键 45 | 46 | `Control + ~` 唤醒命令行 47 | 48 | ### [回导航页](../README.md) 49 | -------------------------------------------------------------------------------- /tools/chrome-extension.md: -------------------------------------------------------------------------------- 1 | # Chrome Extension 2 | 3 | ## 前端开发相关 4 | 5 | ### [FEHelper](https://chrome.google.com/webstore/detail/web%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8Bfehelper/pkgccpejnmalmdinmhkkfafefagiiiad?hl=zh-CN) 6 | 提供代码美化，代码压缩，JSON接口自动格式化查看，字符串编解码，图片Base64编码，二维码生成器，Tracker（Javascript嗅探器），时间（戳）转换工具，正则表达式工具，页面取色工具，编码规范检测，页面性能检测等多项功能。 7 | 8 | ### [Postman - REST Client shortcut](https://chrome.google.com/webstore/detail/postman-rest-client-short/mkhojklkhkdaghjjfdnphfphiaiohkef) 9 | 用来模拟包括get/post/put/delete等各种http请求的扩展，可用来非常方便的测试API接口，并且支持将请求分组记录在Collection中保存以及导入导出。 10 | 11 | ### [Postman](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop) 12 | 是Postman - REST Client shortcut的WebApp版本，界面更好看，但是需要注册账号，而且据我测试不能像扩展版本一样和浏览器共享cookie。 13 | 14 | ### [Dimensions](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj) 15 | 用来测量元素尺寸边距的扩展，我就不说我以前是用QQ截图来量的了... 16 | 17 | ### [JavaScript Errors Notifier](https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd) 18 | 页面脚本报错时，这个扩展会在浏览器地址栏右侧给出红色感叹号的提示，这样不用打开console也能知道页面脚本报错了。 19 | 20 | ### [Octotree](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=zh-CN) 21 | 这个扩展可以将Github上的项目结构按照树形展示出来，并且可以很方便的进行跳转预览以及下载。 22 | 23 | ### [BuiltWith Technology Profiler](https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn) 24 | 这个扩展用来查看页面应用的相关技术，包括后端技术，服务器，前端框架/库等信息。 25 | 26 | ### [Axure RP Extension for Chrome](https://chrome.google.com/webstore/detail/axure-rp-extension-for-ch/dogkpdfcklifaemcdfbildhcofnopogp) 27 | 支持Chrome中查看原型文件的扩展。 28 | 29 | ## 日常使用相关 30 | 31 | ### [One Tab](https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall) 32 | 由于Chrome浏览器每一个Tab对应一个进程，非常占用内存，这个插件可以让所有Tab都通过一个进程打开，大大降低了Chrome的内存占用情况，本人乞丐版macbookpro表示看到这个扩展感动的想哭。 33 | 34 | ### [Ad Block](https://chrome.google.com/webstore/detail/adblock/gighmmpiobklfepjocnamgkkbiglidom) 35 | 屏蔽广告的扩展，不多说了。 36 | 37 | ### [Infinity](https://chrome.google.com/webstore/detail/infinity-new-tab/dbfmnekepjoapopniengjbcpnbljalfg) 38 | 非常漂亮的新标签页扩展，可以自定义标签页图标，背景图，还提供了天气、待办事项等小功能。 39 | 40 | ### [Vimium](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb) 41 | 这个插件可以模拟*nux中vim编辑器操作方式来操作Chrome，通过它可以完全脱离鼠标触控板来浏览页面，用来装那么一下是极好的，对于非vimer掌握需要花费点功夫。 42 | -------------------------------------------------------------------------------- /tools/img/nvm/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/nvm/Thumbs.db -------------------------------------------------------------------------------- /tools/img/nvm/git_install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/nvm/git_install.png -------------------------------------------------------------------------------- /tools/img/nvm/gitbash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/nvm/gitbash.png -------------------------------------------------------------------------------- /tools/img/nvm/nvmw_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/nvm/nvmw_1.png -------------------------------------------------------------------------------- /tools/img/nvm/nvmw_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/nvm/nvmw_2.png -------------------------------------------------------------------------------- /tools/img/nvm/nvmw_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/nvm/nvmw_3.jpg -------------------------------------------------------------------------------- /tools/img/nvm/nvmw_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/nvm/nvmw_4.png -------------------------------------------------------------------------------- /tools/img/nvm/nvmw_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/nvm/nvmw_5.png -------------------------------------------------------------------------------- /tools/img/terminal/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/terminal/1.jpg -------------------------------------------------------------------------------- /tools/img/terminal/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/terminal/2.jpg -------------------------------------------------------------------------------- /tools/img/terminal/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/terminal/3.jpg -------------------------------------------------------------------------------- /tools/img/terminal/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/terminal/4.jpg -------------------------------------------------------------------------------- /tools/img/terminal/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/terminal/5.jpg -------------------------------------------------------------------------------- /tools/img/terminal/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/terminal/6.jpg -------------------------------------------------------------------------------- /tools/img/terminal/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/terminal/7.jpg -------------------------------------------------------------------------------- /tools/img/terminal/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lagou-Frontend/tips/af574bbcd096eed4bbfd8eebe40d5fdf2ad17759/tools/img/terminal/8.png -------------------------------------------------------------------------------- /tools/npm.md: -------------------------------------------------------------------------------- 1 | # npm(node package manager - node包管理工具) 2 | 3 | 安装node时会自动安装npm，可以在[npm官网](https://www.npmjs.com/)上学习用法，查找node模块以及查看模块相关信息。 4 | 5 | ## 常用命令 6 | 7 | 以gulp为例： 8 | 9 | * `npm init` 创建package.json文件，如果此时node_modules下已经存在模块，文件创建成功后会自动把模块添加到devDependencies属性中 10 | * `npm install gulp` 安装模块 11 | * `npm install gulp --save` 安装模块并将依赖关系添加到dependencies属性中 12 | * `npm install gulp --save-dev` 安装模块并将依赖关系添加到devDependencies属性中 13 | * `npm install gulp@3.9.0` 安装指定版本模块 14 | * `npm install gulp -g` 全局安装模块，可以在shell中直接使用gulp命令 15 | * `npm uninstall gulp` 卸载模块 16 | * `npm update gulp` 更新模块 17 | * `npm dedup` 去除重复依赖，让node_modules下的依赖关系扁平化，只会操作package.json文件中dependencies属性声明的依赖，在使用browserify构建时，非常有用 18 | * `npm root` 查看包安装路径，即node_modules目录，添加参数`-g`可以参看全局包安装路径 19 | * `npm view gulp` 查看模块的相关信息 20 | * `npm adduser` 在npm上注册后，使用该命令登陆 21 | * `npm publish` 发布模块，不允许和已发布的模块同名，每次发布，package.json中的版本号必须更新 22 | * `npm unpublish` 删除已发布的模块 23 | * `npm link gulp` 将本地安装或者开发的模块link到全局，像全局安装的模块一样在任意处执行命令 24 | * `npm unlink gulp` 取消本地模块的全局link 25 | * `npm run test` 可直接在模块的根目录执行package.json文件中scripts属性所声明的命令的别名 26 | 27 | ## 前端包管理 28 | 29 | > npm is for all javascript. 30 | 31 | 通过browserify可以让npm成为类似bower/duo/spm3的前端包管理工具，browserify是可以让按照CommonJS规范书写的JS模块在浏览器端正常使用的预编译工具。 32 | 33 | * 全局安装browserify 34 | 35 | ``` 36 | npm install browserify -g 37 | ``` 38 | * 将main.js及其所有依赖打包压缩成bundle.js 39 | 40 | ``` 41 | browserify main.js > bundle.js 42 | ``` 43 | * 在打包压缩过程中在bundle.js内嵌source map，方便调试 44 | 45 | ``` 46 | browserify main.js > bundle.js --debug 47 | ``` 48 | * source map外置，需要额外安装exorcist模块，会在bundle.js同级目录下生成bundle.js.map
49 | 50 | ``` 51 | npm install exorcist -g 52 | browserify main.js --debug | exorcist bundle.js.map > bundle.js 53 | ``` 54 | * 实时编译，watchify是基于browserify封装的解决方案，基本支持了browserify的所有功能
55 | 56 | ``` 57 | npm install watchify -g 58 | watchify main.js -o bundle.js 59 | ``` 60 | * 按需打包，如将jQuery等基础库/框架打成一个包，其他js模块打成一个包 61 | 62 | ``` 63 | npm install jquery 64 | browserify --reuqire jquery > vendor.js 65 | browserify main.js --exclude jquery > bundle.js 66 | ``` 67 | * 对于不支持commonjs规范的模块可以通过[browserify-shim](https://github.com/thlorenz/browserify-shim)来处理，以jquery.colorbox.js为例 68 | * 安装browserify-shim 69 | 70 | ``` 71 | npm install browserify-shim --save-dev 72 | ``` 73 | 74 | * package.json中添加如下配置 75 | 76 | ```json 77 | "browser": { 78 | "jquery.colorbox": "./js/jquery.colorbox.js" 79 | }, 80 | "browserify": { 81 | "transform": [ "browserify-shim" ] 82 | }, 83 | "browserify-shim": { 84 | "jquery.colorbox": { "depends": [ "jquery:jQuery" ] } 85 | }, 86 | ``` 87 | 88 | * js中如下使用 89 | 90 | ```javascript 91 | var $ = require('jquery'); 92 | require('jquery.colorbox'); 93 | ``` 94 | * browserify也提供了API，可以方便的在gulp中使用，具体可以查看[Gulp Recipes](https://github.com/gulpjs/gulp/tree/master/docs/recipes)，另外有一份正在翻译中的[browserify handbook](https://github.com/magicdawn/browserify-handbook)，也可以帮助大家尽快了解browserify 95 | 96 | -------------------------------------------------------------------------------- /tools/nrm.md: -------------------------------------------------------------------------------- 1 | # nrm(npm registry manager - npm源管理工具) 2 | 3 | ## 安装及使用 4 | 5 | * `npm install nrm -g` 6 | * `nrm ls` 7 | * `nrm test` 8 | * `nrm use ***` 选择网速最快的 9 | 10 | 11 | ### [回导航页](../README.md) -------------------------------------------------------------------------------- /tools/nvm.md: -------------------------------------------------------------------------------- 1 | # nvm(node version manager - node版本管理工具) 2 | 3 | 通过该工具可以在同一台计算机上安装node的多个版本，并可以方便地在不同版本切换，可单独安装，也可通过npm安装，这里以单独安装为例。 4 | 5 | ## Mac 6 | 7 | * 安装nvm 8 | 9 | ``` 10 | curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash 11 | ``` 12 | * 添加全局命令，在 `~/.zshrc`中，添加 `source ~/.nvm/nvm.sh` 13 | 14 | ``` 15 | vi ~/.zshrc 16 | ``` 17 | * 安装node 18 | 19 | ``` 20 | nvm install v4.8.4 21 | nvm install v0.12.7 22 | ``` 23 | * 测试node是否安装成功 24 | 25 | ``` 26 | node -v 27 | ``` 28 | * 设置nvm默认node版本 29 | 30 | ``` 31 | nvm alias default 4.8.4 32 | nvm alias stable default 33 | ``` 34 | * 查看node安装路径 35 | 36 | ``` 37 | which node 38 | ``` 39 | 40 | ## Windows 41 | 42 | windows中可以通过安装nvmw或者nvm for Windows来完成同样的功能。 43 | 44 | ### nvmw 45 | * 安装[git for windows](https://github.com/git-for-windows/git/releases/tag/v2.5.3.windows.1)，如果想在cmd中也使用git命令，请在如下图所示的安装选择中选择第二个： 46 | ![](./img/nvm/git_install.png) 47 | * 其中的git bash不只为git提供了命令行工具，也提供了*nix系统里shell脚本所包含的命令，如ls，rm等。 48 | ![](./img/nvm/gitbash.png) 49 | * 获取环境变量"%HOMEDRIVE%和%HOMEPATH%，cmd中 执行`set`： 50 | ![](./img/nvm/nvmw_1.png) 51 | * 安装nvmw，cmd执行： 52 | `git clone git://github.com/hakobera/nvmw.git "%HOMEDRIVE%%HOMEPATH%\.nvmw"` 53 | ![](./img/nvm/nvmw_2.png) 54 | * 配置Path环境变量，使nvmw成为全局命令，试过github上说的通过命令行来添加Path环境变量，但是cmd窗口关闭后，就失效，改而通过控制面板设置： 55 | ![](./img/nvm/nvmw_3.jpg) 56 | ![](./img/nvm/nvmw_4.png) 57 | * 查看相关命令 `nvmw -h` 58 | 59 | ![](./img/nvm/nvmw_5.png) 60 | * 通过以上方法安装的nvmw无法在git bash中使用，无论是在~/.bashrc中添加source还是在Path中添加环境变量，暂时没有找到方法解决。 61 | * node/io/npm源指向问题请参考相关[README](https://github.com/hakobera/nvmw#mirror-nodejsiojsnpm-dist) 62 | 63 | ### nvm for Windows 64 | * nvm for Windows提供了[安装程序](https://github.com/coreybutler/nvm-windows/releases)，可以直接安装，省去配置环境变量的麻烦步骤 65 | * 安装成功后，在cmd中执行`nvm install 0.12.7`和`nvm use 0.12.7`来安装node 66 | * 以上命令在git bash中执行无效，但是cmd安装好node后，就可以在git bash中使用node/npm相关命令了 67 | 68 | ### [回导航页](../README.md) 69 | -------------------------------------------------------------------------------- /tools/oh-my-zsh.md: -------------------------------------------------------------------------------- 1 | # oh-my-zsh 2 | 3 | ## 安装及配置 4 | * 终端执行`curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh`安装oh-my-zsh 5 | * mac默认的shell是bash，需要执行`chsh -s /bin/zsh`切换至zsh，输入密码，命令执行成功后，重启终端 6 | * 此时中端的命令提示符，已由用户名修改为`～`，或者在终端执行`echo $SHELL`，输出应该为`/bin/zsh` 7 | * 配置文件路径为：`~/.zshrc` 8 | 9 | ## Why we use zsh? 10 | 11 | * [oh-my-zsh介绍](http://zhuanlan.zhihu.com/mactalk/19556676) 12 | * [autojump介绍](https://linux.cn/article-3401-1.html) 13 | 14 | ### [回导航页](../README.md) 15 | -------------------------------------------------------------------------------- /tools/sublimetext3.md: -------------------------------------------------------------------------------- 1 | # Sublime Text 3 2 | 3 | ## 安装 4 | 5 | 进入[下载地址](http://www.sublimetext.com/3)选择相应版本下载，正常安装即可。 6 | 7 | 8 | ## 配置 9 | `Sublime Text` -> `Preferences` -> `Settings - User`，推荐一些配置： 10 | 11 | * `"translate_tabs_to_spaces": true` 开启自动将Tab替换为空格 12 | * `"trim_trailing_white_space_on_save": true` 开启自动删除行末空格 13 | * `"ensure_newline_at_eof_on_save": true` 开启保存文件时在文件末尾保留一个空行 14 | * `"save_on_focus_lost": true` 开启文件失去焦点立即保存 15 | * `"font_size": 18` 设置字体大小，默认10 16 | * `"highlight_line": true` 开启光标所在行高亮 17 | * `"bold_folder_labels": true` 开启侧边栏文件夹名显示加粗 18 | 19 | ## 插件 20 | 可以到[官网](https://packagecontrol.io/)查找自己喜欢的插件，下面推荐一下插件，欢迎大家编辑补充 21 | 22 | * Package Control
23 | sublime包安装工具，安装方式： 24 | * `view` -> `show console` 25 | * 输入下方命令: 26 | ``` 27 | import urllib.request,os; pf = 'PackageControl.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()) 28 | ``` 29 | * 等待安装完成即可 30 | 31 | * All Autocomplete
32 | 扩展了sublime只在当前文件进行搜索匹配的自动补全提示，会在所有打开的文件中搜索匹配自动补全提示 33 | 34 | * AutoFileName
35 | 自动补全提示文件名字 36 | 37 | * Babel
38 | es6语法高亮插件，具体设置参考[这里](https://github.com/babel/babel-sublime)，可配合[Oceanic Next Color Scheme](https://github.com/voronianski/oceanic-next-color-scheme)主题。 39 | 40 | * Bufferscroll
41 | 保存折叠行 42 | 43 | * Clipboard Manager
44 | 可以查看剪贴板历史纪录，`Sublime Text` -> `Preferences` -> `Key Bindings - User`，添加以下配置 45 | 46 | ```json 47 | { "keys": ["super+c"], "command": "clipboard_manager_copy" }, 48 | { "keys": ["super+x"], "command": "clipboard_manager_cut" }, 49 | { "keys": ["super+v"], "command": "paste_and_indent" }, 50 | { "keys": ["super+shift+v"], "command": "clipboard_manager_choose_and_paste" } 51 | ``` 52 | 查看剪贴板历史纪录快捷键：`cmd` + `shift` + `v` 53 | 54 | * CSS3
55 | 更好的CSS3语法高亮支持。 56 | 57 | * CSScomb
58 | 格式化css样式；选中css样式右键选中csscomb即可，还能在usersetting中自定义css格式化规则！ 59 | 60 | * compare side-by-side
61 | 文件对比，打开要对比的文件，在title处单击右键选择对比即可 62 | 63 | * DocBlockr
64 | 像java等语言的块注释，使用方法，`/**`Tab就ok 65 | 66 | * EditorConfig
67 | 跨编辑器代码静态风格配置sublime插件，配置说明请参考[这里](http://editorconfig.org/)。 68 | 69 | * Emmet
70 | Sublime Zen Coding插件，建议安装，可以用来快速编写html/css，[具体用法](http://www.w3cplus.com/tools/emmet-cheat-sheet.html)。 71 | 72 | * javascript completion
73 | javascript api自动补全插件，它相比SublimeCodeIntel的优势是 74 | 1. 轻量，只是用来补全javascript api 75 | 2. 支持es5语法 76 | 3. 有参数提示 77 | 4. 自动纠错 78 | 79 | * Java​Script & Node​JS Snippets
80 | js代码片段，快捷输入请参考[这里](https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets)。 81 | 82 | * HTML-CSS-JS Prettify
83 | HTML/css/js/json格式化，快捷键：`cmd` ＋ `shift` + `h` 84 | 85 | * LESS
86 | less文件代码高亮显示 87 | 88 | * Markdown Extend
89 | markdown文件高亮扩展，文件中的代码块也会相应高亮。 90 | 91 | * Markdown Preview
92 | markdown文件预览查看，编辑略卡，快捷键`cmd` ＋ `shift` + `p`调用命令行窗口后，输入preview查找相关命令 93 | 94 | * Nodejs
95 | Nodejs API 自动补全 96 | 97 | * SideBarEnhancements
98 | 侧边栏增强工具，建议安装，为侧边栏右键菜单增加剪贴，复制，粘贴，浏览器中打开等选项 99 | 100 | * SublimeLinter
101 | Sublime代码检查工具。 102 | 103 | * SublimeLinter-eslint
104 | SublimeLinter的ESLint插件，javascript代码质量检查工具对比可以参考[这里](http://efe.baidu.com/blog/js-lints/)，如何使用这个插件可以参考[这里](http://jonathancreamer.com/setup-eslint-with-es6-in-sublime-text/?utm_source=tuicool&utm_medium=referral)，ESLint的Rules可以查阅[官网](http://eslint.org/docs/rules/)。 105 | 106 | * SublimeTmpl
107 | Sublime新建文件模板插件，支持快捷键新建，修改内置模板，增加自定义模版，具体可以参考[这里](http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/)。 108 | 109 | * Terminal
110 | 终端快捷启动插件，快捷键：`cmd` ＋ `shift` + `t`，会在终端直接cd到当前文件的父文件夹 111 | 112 | ## 主题 113 | 可以到[colorsublime](http://www.colorsublime.com/)里查找自己喜欢的主题。下面推荐一些有特色的主题： 114 | 115 | * [Oceanic Next Color Scheme](https://github.com/voronianski/oceanic-next-color-scheme)
116 | 支持es6/react语法高亮，需要先安装[babel-sublime](https://github.com/babel/babel-sublime)语法高亮插件。 117 | 118 | * [Material Theme for Sublime Text 3](https://github.com/equinusocio/material-theme)
119 | Google Material风格主题，同时支持Oceanic Next Color Scheme color theme，不同文件类型会有相应的精美icon。 120 | 121 | * [Spacegray](https://github.com/kkga/spacegray)
122 | 简约扁平配色看起来很舒服的主题。 123 | 124 | ## 在sublime中运行js 125 | 我们可以在浏览器的console里运行js，也可以在node的REPL里运行js，但是都不是很方便，其实在sublime里也是可以直接运行js的，能够很方便的帮助我们测试javascript api以及验证正则。
126 | 下面介绍三种在sublime里运行js的方法 127 | 128 | #### JSC 129 | JSC为Mac内置的javascript控制台程序。 130 | 131 | 1. Tools > Build System > New Build System 132 | 2. 在打开的文件中添加如下代码 133 | 134 | ``` javascript 135 | { 136 | "cmd": ["/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc", "$file"], 137 | "selector": "source.js" 138 | } 139 | ``` 140 | 3. 保存为`JSC.sublime-build` 141 | 4. Tools > Build System，选择刚才创建的`JSC` 142 | 5. 打开js文件，`cmd` + `b`
143 | ![](http://netsh.qiniudn.com/wp-content/uploads/2014/07/sublime-javascript-console-500x297.png 144 | ) 145 | 146 | 注意用`debug()`替换`console.log()`，可支持到es5。 147 | 148 | #### Node 149 | 首先确保已安装node 150 | 151 | 1. Tools > Build System > New Build System 152 | 2. 在打开的文件中添加如下代码 153 | 154 | ``` javascript 155 | { 156 | "path": "/Users/wangjinliang/.nvm/versions/node/v4.2.3/bin", 157 | "working_dir": "${project_path:${folder}}", 158 | "selector": "source.js", 159 | "encoding": "utf-8", 160 | "shell": true, 161 | "windows": { 162 | "cmd": ["taskkill /f /im node.exe >nul 2>nul & node $file"] 163 | }, 164 | "osx": { 165 | "cmd": ["killall node >/dev/null 2>&1; node $file"] 166 | }, 167 | "linux": { 168 | "cmd": ["killall node >/dev/null 2>&1; node $file"] 169 | } 170 | } 171 | ``` 172 | 3. 通过`which node`获取node的安装目录，添加到对应的path属性上 173 | 4. 保存为`node.sublime-build` 174 | 5. Tools > Build System，选择刚才创建的`node` 175 | 6. 打开js文件，`cmd` + `b` 176 | 177 | 对es6的支持情况视node版本而定。 178 | 179 | #### Babal 5.x 180 | 首先确保已安装node， 181 | 182 | 1. `npm install babel@5.x -g`全局安装babel命令行模块 183 | 2. Tools > Build System > New Build System 184 | 3. 在打开的文件中添加如下代码 185 | 186 | ``` javascript 187 | { 188 | "path": "/Users/wangjinliang/.nvm/versions/node/v4.2.3/bin", 189 | "working_dir": "${project_path:${folder}}", 190 | "selector": "source.js", 191 | "encoding": "utf-8", 192 | "shell": true, 193 | "windows": { 194 | "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node $file"] 195 | }, 196 | "osx": { 197 | "cmd": ["killall node >/dev/null 2>&1; babel-node $file"] 198 | }, 199 | "linux": { 200 | "cmd": ["killall node >/dev/null 2>&1; babel-node $file"] 201 | } 202 | } 203 | ``` 204 | 4. 通过`which node`获取node的安装目录，添加到对应的path属性上 205 | 5. 保存为`babel.sublime-build` 206 | 6. Tools > Build System，选择刚才创建的`babel` 207 | 7. 打开js文件，`cmd` + `b` 208 | 209 | 全面支持es6，以及部分es7，相比第二种直接通过node运行略慢 210 | 211 | #### Babal 6.x 212 | 与bable5.x有一些区别，请参考[这里](http://fedvic.com/2015/12/24/es6InSublime/)。 213 | 214 | ### [回导航页](../README.md) 215 | --------------------------------------------------------------------------------