搭建开发环境的心得
入职第一件事就是搭建开发环境,包括编辑器、环境变量、调试工具等工作。下面整理一下在第三次搭建开发环境的心得,包括使用的工具、踩过的坑,以及关于一些问题的思考。
去年把笔记本换成了MBP,用的次数却比较少,其中懒得再搭一次环境就是一个很主要的问题。现在背着电脑上班,因此这次搭环境就成了一个仪式感很强的工作~
代码编辑器
IDE
关于IDE,我使用的是jetbrains
全家桶,包括WebStrom
(前端)、PHPStrom
(PHP)、IDEA
(Java)这三个。由于都是同一家公司出品,相关配置都是大同小异,上手也比较容易。
下面是一些小技巧
- 在
file types
中添加支持语法高亮的文件类型 - 内置
terminal
十分好用,用来启动项目、运行脚本很方便 - 合理应用
find in path
、fin usegs
是维护代码必备的技能 - 配置esLint、代码格式等,提高代码质量
编辑器
关于编辑器,目前使用的是VSCode
。安装了几个常用的插件
Prettier
代码格式化Sublime Text KeyMaps
修改为sublime快捷键Open in Browser
浏览器打开当前页面- 还有一些文件语法高亮的插件,比如Ventur、Swig等
命令行编辑器
手残党表示vim
、emacs
太高级了,永远学不会~还是老老实实用vs去改配置文件吧。
多个屏幕
在开发过程中难免遇见需要开启多个窗口的问题,因此一个外接大屏幕就显得十分重要~
这个貌似有点扯远了...
终端
终端使用的是ZSH
,并安装了Oh My ZSH
进行扩展。 终端配置文件位于~/.zshrc
,可修改命令、主题和环境变量等。
常用命令
掌握linux常用的命令可以极大地提高我们的生产力。这里有一篇博客:linux下150个常用命令,不妨移步阅读。
内置快速打开vscode编辑器
vscode是目前我用的最多的文本编辑器,用来修改配置文件、快速浏览目录是极好的
alias vs="/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code"
然后就可以像使用vim一样使用vscode了
vs test.js
vs .
vs ~/Desktop/test
本地开发
webpack搭建本地前端开发环境
webpack结合webpack-dev-server,可以构建出一个舒适的前端开发环境。
常见的前端开发需求包括babel编译、scss编译、postcss、热更新等多种特性,然后通过nginx配置反向代理,就可以在手机上实时预览开发效果了。
修改hosts文件
一般的开发流程都会具备本地开发、测试环境和生成环境。在本地开发的过程中,难免遇见需要在本地模拟线上服务器的功能。
那么如何在测试环境和线上环境进行切换呢?这就需要用到hosts文件了
vs /etc/hosts
由于可能需要在多个测试环境之间进行切换,通过编辑器修改的操作难免显得麻烦,这里推荐一个修改host的工具:SwitchHost,这个工具可以自定义编辑多份hosts列表,后续切换hosts文件只需要切换开关即可。
nginx代理本地静态资源
有时候,需要将线上的某个资源映射到本地开发环境的资源路径上进行调试,可以通过nginx进行代理转发实现
- 修改host,将cdn域名指向localhost
- 修改nginx配置,rewrite对应的URL
由于生产环境的资源添加了hash后缀,可以通过正则匹配进行省略,避免404错误或者手动修改文件后缀的繁琐操作
server {
listen 80;
server_name z7.cdn.com;
root /Users/Txm/Desktop/local-dev/static;
location / {
rewrite ^(.+)/(.+)-\w+\.(\w+)$ $1/$2.$3 last;
}
}
相关语法可参考,参考:
- https://blog.csdn.net/github_38589282/article/details/74860318
- https://www.cnblogs.com/freeweb/p/5446632.html
- https://xuexb.com/post/nginx-url-rewrite.html
chrome开发模式允许跨域
前端开发中跨域是一个很常见的问题,在开发环境下解决跨域,有一个十分简单暴力的方法:开启chrome的开发者模式
sudo open -n /Applications/Google\ Chrome.app/ --args --disable-web-security
在开发者模式下,会关闭浏览器安全策略,从根源上解决了跨域问题。
当然,其他诸如CORS、nginx代理等处理方式也是十分常见的。
调试
调试是开发中耗时最多的环境,如果解决了调试的问题,就可以显著提高工作效率。关于调试,之前有简单整理过一篇博客。
网络抓包
关于抓包
- 在windows上使用的是Fiddler
- 在Mac上使用的是Charles
大概是由于先入为主的观念,我觉得fiddler更好用一点。不过现在一直在使用charles,因此这里整理使用charles遇见的一些问题。
参考
手机代理
如果抓取手机上的包,需要将手机网络代理设置为电脑的charles服务器
ifconfig
查看电脑ip- 修改手机网络代理为电脑ip和charles端口号(默认8888)
如果抓取https,则还需要为手机安装对应的证书,
- 在电脑上配置charles证书
- 在手机上打开
chls.pro/ssl
,安装相关证书 - iPhone手机需要在通用->关于本机->证书信任设置中,信任相关证书
抓不了电脑上的包
开启了ShadowSockets,启动代理之后就抓不到包了,这是因为charles走mac 的系统代理,而ss有自己的全局代理,暂时没有找到两者共存的办法,使用charles时需要暂时关闭ss。
method为connect的方法抓不到包
有时候会发现,即使正确配置了https证书,有的网络包仍旧会显示unknown
的错误,这是由于网络环境引起的,可以参考
移动端真机调试
有时候需要还原BUG,因此真机调试比较重要,在iPhone上可以通过safari
iPhone与Safari 参考Safari 前端开发调试 iOS 完美解决方案,主要进行下面两步设置即可
- 【iOS 终端】:设置 → Safari → 高级 → Web 检查器 → 开。(如图)
- 【OS X】:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。
然后通过数据线连接iPhone至mac,打开safari,在右上角的开发->iPhone,看见对应打开的页面,点击展开开发者工具,即可在电脑上调试移动端页面
Android与Chrome
android手机的调试要方便一些,不需要mac
- android手机连接相同局域网,然后打开移动端chrome输出需要调试的页面,
- PC端chrome地址栏输入
chrome://inspect/#devices
,可以查看到对应的设备及打开页面,选择即可进行调试 - 调试内部的webview需要客户端开启权限,参考:chrome 远程调试(inspect)移动端webview,找不到待调试页面
Mac小工具
键盘
由于电脑运行时用自带的键盘比较烫手,因此还是习惯使用外接的机械键盘进行工作,遇见的一个问题是,mac的键位和常规键盘的键位不一致,导致经常用错快捷键,影响工作效率。
后面发现了一个工具Karabiner,超级好用。可以指定多套键盘映射profile,方便在不同键盘之间切换。比如我上班时用机械键盘,在外面或者在家用自带的键盘,只需要切换一下键位设置就可以了
鼠标
讲道理,mac的触摸板用起来真的非常方便,就是时间长了手指有点受不了,由于我把键盘放在了触摸板上面,因此使用了一个外接的鼠标(不是 magic mouse)。使用时发现鼠标滚轮有些卡顿,这是由于mac上的滚动条移动距离设定不同导致的,可以参考这里。
后面使用工具SmoothScroll解决。或者换个magic mouse,之前买鼠标之前根本没考虑到这个问题...
图床
我习惯把遇见的问题或者想法记下来,有时候需要使用图片保存,如果先把图截下来,然后上传到自己的cdn,最后在引用连接就显得十分麻烦,这里强烈推荐iPic。
使用方式也很简单,截图,右上角快捷栏点击上传,上传完毕右键复制链接,over。
梯子
科学上网是每个程序员必备技能,这里推荐一个自己搭ss的教程。
打开破解程序
mac上面工具挺多的,但是基本要收费,某些工具的价格确实有点小贵,社区提供了破解版,但是下载后经常出现“文件已损坏,请移至废纸篓”的提示,执行下面命令即可
sudo spctl --master-disable
然后在偏好设置->安全性与隐私中就可以看见允许打开任意来源的应用了。
小结
这篇文章记录了我的开发环境的一些东西,主要用作备忘,下次遇见重复的问题就不必再去到处乱搜了。
搭建环境是一个比较繁琐的事情,一个舒适的开发环境可以显著提高开发效率,避免不必要的加班。
但是!!!一旦更换电脑,又需要重头安装开发环境,想想都可怕...所以,接下来是时候了解一下Docker了。
你要请我喝一杯奶茶?
版权声明:自由转载-非商用-保持署名和原文链接。
本站文章均为本人原创,参考文章我都会在文中进行声明,也请您转载时附上署名。