MAC OSX 前端工作环境的构建

折腾折腾,这几天用上iterm2.9,挺舒服,免得以后换电脑需要重新找资源,还是做一份较完整的工作环境笔记。


Sublime Text 3

主题

虽然可以简单地更改preferences > color scheme改变编辑器颜色,但侧边栏的风格不会随之变更,那么,方法能令侧边栏风格统一的方法如下:

  1. 手动去下载主题,我用的是Brogrammer,以此为例

  2. 把外部文件夹brogrammer-theme修改为Theme - Brogrammer

  3. 拷贝到Sublime插件目录(可通过菜单Preferences > Browse Packages打开)

  4. Preferences > Settings - User
    若有color_scheme,请整行删除掉,然后插入一行

     "theme": "Brogrammer.sublime-theme"
    

插件管理器

Package Control 本身是个插件,但它可以帮你管理插件,相当好用,必须装

  1. 通过快捷键 ctrl+` 或在菜单 View > Show Console 打开控制台

  2. 粘贴以下代码后回车安装

     import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
    

其他插件

安装 Package Control 以后,你现在可以用它来管理插件了,command+shift+p 或在菜单 Tools > Command Palette 调出控制板,然后 输入install,就能看到Install Package,点击即可方便地找插件装插件,以下的插件是我在用的,推荐一下:

  1. All Autocomplete

    多文件自动完成插件,仅搜索打开的文件,应该是出于高效率低消耗的考虑,够用

  2. Alignment

    自动对齐插件,默认快捷键是super+ctrl+a,与QQ截图冲突。。。请自行修改 Preferences > Key Bindings - User,添加

     { "keys": ["super+`"], "command": "alignment" },
    
  3. BracketHighlighter

    括号高亮插件,对阅读代码很有帮助

  4. DocBlockr

    生成固定的注释格式,帮助你写好出好的文档

  5. SideBarEnhancements

    扩展侧边栏的右键功能,十分强大

  6. MacTerminal

    快速启动终端,自动到达当前文件所在目录,支持iterm2

  7. CSS3

    css3自动完成插件

  8. SASS

    sass自动完成插件

  9. AngularJS

    angularjs插件,可以通过控制板快速完成 angularjs 项目开发中常用的操作

  10. git

    git插件,可以通过控制板快速完成git命令

  11. Local History

    本地历史存储,可以方便地比较历史文件,还原改动

  12. ConvertToUTF8

    打开 GBK 或 GB2312 编码的文件中文乱码了?装上 ConvertToUTF8Codecs33 即可解决

  13. Codecs33

    ConvertToUTF8 一起安装以解决乱码问题

  14. autoprefix

    自动给 css 样式加 -webkit 和 -moz 等前缀,但由于我现在用 gulp 来做这个事情,所以并没有在用了,但这个如果你没有使用gulp或grunt,这是一个不错的插件


ITerm 2 2.9

官网:http://www.iterm2.com/

请到 Downloads 页面去下 nightly 版,我目前装的的是2.9,2.9以下的貌似不支持imgcat,shell integration

配置

  1. 颜色 Preferences > Profiles > colors,右下角选择风格,Solarized Dark 是我的选择
  2. 打开 Preferences > Profiles > Text > Text Rendering,将 Draw bold text in bright colors 前面的勾去掉
  3. 打开 Preferences > Profiles > Terminal,将 Report Terminal Type 选为 xterm-256color

zsh

虽然一直用 bash 也觉得很习惯,但 zsh 的颜色细节处理更醒目,加上完善后的 tab 功能,用起来比 bash 顺手不是一点点。。。

oh my zsh

这是一款快速配置 zsh 的工具,提供了一些主题,切换也相当方便,直接命令行执行以下命令进行安装即可:

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

关于 oh my zsh ,提供两个链接 Github主页 主题浏览页

imgcat

这是 iterm2 2.9 才有的一个插件,可以在命令行查询图片,对我来说很实用

安装方法:

  1. 右键下面两个链接,另存为文件

    imgls imgcat

  2. 手动把文件拷贝到/usr/local/bin

  3. 修改权限为可执行(755)

     chmod 755 /usr/local/bin/imgls /usr/local/bin/imgcat
    

shell integration

给个传送门:介绍

有很多好用的功能,其中命令状态监视(command+opt+a)、历史命令查找(command+shift+;)、历史目录查找(command+opt+/)给我提供了很多便利,但右键scp下载和上传在我的机器上并不能用,原因不明,等版本完善

安装方法:

  1. 执行命命

     curl -L https://iterm2.com/misc/`basename $SHELL`_startup.in >> \
     ~/.iterm2_shell_integration.`basename $SHELL`
    
  2. 把以下代码拷贝到~/.zshrc,如果你并没有使用zsh,则放到相应的配置中

    • tcsh > .login

    • bash > .bash_profile

    • zsh > .zshrc

    • fish > config.fish

      source ~/.iterm2_shell_integration.basename $SHELL

SSH服务器方案化

用expect写登录脚本

给个传送门:expect中文教程

我没有深入去学习,只是简单地实现了以下两个脚本:

  • 账号密码登录SSH服务器

      #!/usr/bin/expect -f
       set user root
       set host 10.211.55.7
       set password admin
       set timeout -1
       spawn ssh $user@$host
       expect "*assword:*"
       send "$password\r"
       interact
       expect eof
    
  • 使用密钥文件登录SSH服务器

      #!/usr/bin/expect -f
       set user ubuntu
       set host xxxxxx.compute.amazonaws.com
       set timeout -1
       spawn ssh -i "/.mypem/myawsct.pem" $user@$host
       interact
       expect eof
    

记得给脚本可执行权限(755)

管理Profiles实现快速连接

首先,通过修改上一步的expect脚本填入你需要的登录参数并另存为一个脚本文件,记得给脚本可执行权限

打开ITerm2,Preferences > Profiles,按左边加号添加一个profile,填一个Name记录将要连接的服务器,在Command中选择Command,然后在在边填入你要使用的快速连接脚本

完成了,以后要连接,只需选择这个profile即可快速连接

通过SCP完成上传下载

后面可能会写个脚本,但ITerm说好能右键下载,拖放上传的,先期待一下

命令完成上传下载的方法:

scp ~/hello.txt root@192.168.0.103:/home/root/upload
scp root@192.168.0.103:/home/root/todownload/hello.txt ~/

参考:

http://www.dreamxu.com/mac-terminal/

http://www.it610.com/article/2579409.htm

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏