如果你想快速搭好一个开发环境，首先身为一个程序员你需要一个代理，否则的话,连接国外网络速度会很慢,体验也很不好。并且我们是靠技术吃饭,需要墙外的世界,更重要有Google帮助我们节约大量的时间。
个人博客地址
代理
在翻墙中最常用的便是shandowsocks, 当然不缺钱的话也可以购买surge使用。
不过这些软件软件在终端环境下是无法代理网络连接的。需要在终端配置才行。
较简便的方法便是在当前终端下执行下面代码。
export ALL_PROXY=socks5://127.0.0.1:1080
127.0.0.1:1080 便是你代理软件的端口号。 使用shandowsocks话只要执行上面代码就好。
不过执行后只会在当前终端下起作用,如果新建窗口那就得还在新窗口下重新执行上面代码才行。
另外一种方法便是使用 proxychai-ng 进行终端代理了, 虽然刚开始配置会麻烦些,但是长久考虑会方便很多。具体使用在下面会讲到。
开始使用iterm2
首先你需要一个好用并且好看的命令行工具,在这推荐的就是item了。
iterm2
装完item,选择zsh作为我们的终端, mac有自带zsh 不过不是新版本
如果不介意这些的话
chsh -s /bin/zsh
当然如果你想用最新版的那先安装brew 当然就算不用你后面也得安装 😂😂😂
zsh强大的自动补全功能太方便了
安装brew
安装brew很简单
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
当然你也可以配合代理速度有显著的提高
export ALL_PROXY=socks5://127.0.0.1:1080
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
配置item
想使用最新版本的zsh 执行
brew install zsh
安装完成后执行下面命令切换zsh终端
chsh -s /usr/local/bin/zsh
接下来便是安装 oh-my-zsh
oh-my-zsh对本身就很强的的zsh进行武装,包含好了很多好用的配置和插件, 比如大量的git别名, 解压工具x
,安装方式如下
curl -L http://install.ohmyz.sh | sh
接下来开始选择我们的主题,主题可以通过这个网址来查看
我选择的是 arrow 以前是使用 agnoster 不过有点审美疲劳变换了一个,更换主题的方法是
open ~/.zshrc
将ZSH_THEME的值改为你选择的主题 比如
ZSH_THEME = "arrow"
source ~/.zshrc //每次修改配置后需要重启配置才能生效
还有配色, 网上有很多配色主题,前往查看配色下载或clone下项目,主题目录在schemes里,
不过我使用的是自己配的颜色。
导入方法为
打开iterm2偏好设置 -> Profiles -> colors -> 右下角的Color Presets ->import你的主题 然后在选择主题
另外item2还有很多好用的功能, 比如可以调透明度, 模糊 还可以添加背景图片, 都在 Profiles中。
另外我在item2设置了HotKey 。只需要 ⌘ + ` 就能快速呼唤item
zsh插件autojump
autojump是一个非常方便的路径跳转插件,摆脱了各种cd ../**/等麻烦的路径切换,autojump会记录终端进入的目录, 通过 命令 j + 一部分的文件夹名字 就可以跳转到对应的目录
安装也很方便也是通过brew
brew install autojump
不过有需要配置
open ~/.zshrc
找到
plugins=(git) 在括号里加上 autojump, 插件以空格隔开 plugins=(git autojump)
source ~/.zshrc
autojump.gif
安装proxychains-ng
brew install proxychains-ng
open /usr/local/etc/proxychains.conf //安装成功后
//在最底下找到socks4 替换为
socks5 127.0.0.1 1080
在 OS X EI Capitan 以上版本, 需要关闭SIP才能正常使用
具体流程 -> 重启电脑 听到开机声后 按住option键 出现了启动盘选择后 ⌘ ＋ R 进入恢复模式
在菜单栏选择终端 输入
csrutil enable --without debug
重启电脑,输入
proxychains4 curl google.com
如果显示html文档则安装成功
使用方式就是开头加个 proxychains4 就好
proxychains4.gif
另外brew 还可以装各种数据库 mongodb redis 等等数据库 还有 wget这种下视频神器
开始配置node环境
首先我们当然的安装node了,不过我选择的不是通过去官方网址下载,或者通过brew安装,而是通过n安装。
n是node版本管理器,类似的还有nvm 这里我选择使用n
首先在github找到n的仓库地址 下载或者clone下来之后,在终端里进入n的目录执行
make install
这样n就安装成功了, 可以使用 n 你指的的node版本号安装了, 例如
n 6.7.0
执行后便开始安装node6.7.0版本
如果没有使用终端代理的话这安装过程可能会很缓慢。
如果 提示 Error: sudo required 那么有两种解决办法
第一种 前面加个sudo 不过一旦使用了sudo 很容易产生各种权限问题
推荐第二种
open /usr
右键local 显示简介 在最下面的共享与权限 -> ➕ 将你当前账号加入 并且权限设置成读与写,并选择成为所有者和应用到包含的项目中。在执行一次安装命令应该没有问题了
另外你可以通过 n 版本号快速的切换或者安装node,非常方便,尤其对于多个项目使用的node环境不一样的时候
其他常用操作 n ls 查看所有node版本号 n rm 版本号 删掉对应node
安装完node后会自动安装好npm, 前段都应该知道npm是干嘛的包, 不知道的得好好补补了。
因为npm的源在国外所以下载速度非常慢, 还有国内有镜像
我使用淘宝的镜像 使用 cnpm 安装方式
npm install -g cnpm --registry=https://registry.npm.taobao.org
现在就可以使用cnpm 快速的安装依赖包了 不过通过cnpm安装可能会出现一些莫名的问题
另外最近Facebook 也推出了包管理器 yarn 个人感是比npm稳定而且快多了。
编辑器
前端的编辑器的很多 Atom , sublime , webstorm , Visual Studio Code
在这里我推荐Atom 为什么因为 好看! 好看! 好看! 重要的事情写三次
虽然Atom 启动的时候确实会有点卡, 但是在接受范围内, 而且sublime插件装多了也会有点卡
webstorm 虽然很强大,但是并不需要那么多功能,而且会很卡
Visual Studio Code 是微软推出,总体来说功能强大,性能也很好的编辑器, 写node也很方便,但是就是太丑
sublime 可配置性很高的编辑器, 配置起来可以很好看并且方便,虽然有时候也会使用,比如atom卡得实在受不了的时候,但是sublime有些插件确实是没Atom那么好用,
在这里列出一些我推荐的插件和主题
主题选择
atom-material-syntax-dark
atom-material-ui //很好看的主题
插件
language-babel //es6 jsx 高亮提示
emmet // 都知道吧
atom-ternjs //非常强大的代码提示插件, 而且可配置性也很高
color-picker //颜色选择器
pigments //颜色高亮
linter // 代码检查工具
linter-eslint //JavaScript代码检查工具 规范你的代码 依赖于linter 推荐 airbnb 的eslint规则
hyperclick //跳转变量或者import/require模块
js-hyperclick //配合hyperclick使用
regex-railroad-diagram //正则表达式以图形方式显示,很直观!
atom-beautify //代码格式化,还行,如果对代码格式要求不高的话
file-icons //文件图标
Docblockr //代码注释
ctrl + e 光标移动到行尾是比较长使用的快捷键, 但是使用emmet之后,键位会冲突所以需要修改键位
打开 **Atom -> keymap ** 在底部输入
'atom-text-editor:not([mini])':
'ctrl-e': 'editor:move-to-end-of-line'
'ctrl-r': 'emmet:expand-abbreviation'
我把ctrl-r 改成 emmet的生成html元素的快捷键, 另外emmet对jsx语法支持也非常好
regex-railroad-diagram
auojump.gif
Mogr2/auto-orient/strip)
.tern-project
tern.gif
个人常用的配置
{
"ecmaVersion": 7,
"libs": [
"browser",
"jquery"
],
"dontLoad": [
"node_modules/**/*.js"
],
"plugins": {
"node": {
"dontLoad": "",
"load": "",
"modules": ""
},
"modules": {
"dontLoad": "",
"load": "",
"modules": ""
},
"es_modules": {},
"commonjs": {}
}
}
END
至此,前端开发环境已经搭好了
网友评论