搭建开发环境的心得

入职第一件事就是搭建开发环境,包括编辑器、环境变量、调试工具等工作。下面整理一下在第三次搭建开发环境的心得,包括使用的工具、踩过的坑,以及关于一些问题的思考。

<!--more-->

去年把笔记本换成了MBP,用的次数却比较少,其中懒得再搭一次环境就是一个很主要的问题。现在背着电脑上班,因此这次搭环境就成了一个仪式感很强的工作~

1. 代码编辑器

1.1. IDE

关于IDE,我使用的是jetbrains全家桶,包括WebStrom(前端)、PHPStrom(PHP)、IDEA(Java)这三个。由于都是同一家公司出品,相关配置都是大同小异,上手也比较容易。

下面是一些小技巧

  • file types中添加支持语法高亮的文件类型
  • 内置terminal十分好用,用来启动项目、运行脚本很方便
  • 合理应用find in pathfin usegs是维护代码必备的技能
  • 配置esLint、代码格式等,提高代码质量

1.2. 编辑器

关于编辑器,目前使用的是VSCode。安装了几个常用的插件

  • Prettier 代码格式化
  • Sublime Text KeyMaps 修改为sublime快捷键
  • Open in Browser 浏览器打开当前页面
  • 还有一些文件语法高亮的插件,比如Ventur、Swig等

1.3. 命令行编辑器

手残党表示vimemacs太高级了,永远学不会~还是老老实实用vs去改配置文件吧。

1.4. 多个屏幕

在开发过程中难免遇见需要开启多个窗口的问题,因此一个外接大屏幕就显得十分重要~

这个貌似有点扯远了...

2. 终端

终端使用的是ZSH,并安装了Oh My ZSH进行扩展。 终端配置文件位于~/.zshrc,可修改命令、主题和环境变量等。

2.1. 常用命令

掌握linux常用的命令可以极大地提高我们的生产力。这里有一篇博客:linux下150个常用命令,不妨移步阅读。

2.2. 内置快速打开vscode编辑器

vscode是目前我用的最多的文本编辑器,用来修改配置文件、快速浏览目录是极好的

alias vs="/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code"

然后就可以像使用vim一样使用vscode了

vs test.js
vs .
vs ~/Desktop/test

3. 本地开发

3.1. webpack搭建本地前端开发环境

webpack结合webpack-dev-server,可以构建出一个舒适的前端开发环境。

常见的前端开发需求包括babel编译、scss编译、postcss、热更新等多种特性,然后通过nginx配置反向代理,就可以在手机上实时预览开发效果了。

3.2. 修改hosts文件

一般的开发流程都会具备本地开发、测试环境和生成环境。在本地开发的过程中,难免遇见需要在本地模拟线上服务器的功能。

那么如何在测试环境和线上环境进行切换呢?这就需要用到hosts文件了

vs /etc/hosts

由于可能需要在多个测试环境之间进行切换,通过编辑器修改的操作难免显得麻烦,这里推荐一个修改host的工具:SwitchHost,这个工具可以自定义编辑多份hosts列表,后续切换hosts文件只需要切换开关即可。

3.3. 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;
    }
}

相关语法可参考,参考:

3.4. chrome开发模式允许跨域

前端开发中跨域是一个很常见的问题,在开发环境下解决跨域,有一个十分简单暴力的方法:开启chrome的开发者模式

sudo open -n /Applications/Google\ Chrome.app/ --args --disable-web-security 

在开发者模式下,会关闭浏览器安全策略,从根源上解决了跨域问题。

当然,其他诸如CORS、nginx代理等处理方式也是十分常见的。

4. 调试

调试是开发中耗时最多的环境,如果解决了调试的问题,就可以显著提高工作效率。关于调试,之前有简单整理过一篇博客

4.1. 网络抓包

关于抓包

  • 在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的错误,这是由于网络环境引起的,可以参考

4.2. 移动端真机调试

有时候需要还原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,找不到待调试页面

5. Mac小工具

5.1. 键盘

由于电脑运行时用自带的键盘比较烫手,因此还是习惯使用外接的机械键盘进行工作,遇见的一个问题是,mac的键位和常规键盘的键位不一致,导致经常用错快捷键,影响工作效率。

后面发现了一个工具Karabiner,超级好用。可以指定多套键盘映射profile,方便在不同键盘之间切换。比如我上班时用机械键盘,在外面或者在家用自带的键盘,只需要切换一下键位设置就可以了

5.2. 鼠标

讲道理,mac的触摸板用起来真的非常方便,就是时间长了手指有点受不了,由于我把键盘放在了触摸板上面,因此使用了一个外接的鼠标(不是 magic mouse)。使用时发现鼠标滚轮有些卡顿,这是由于mac上的滚动条移动距离设定不同导致的,可以参考这里

后面使用工具SmoothScroll解决。或者换个magic mouse,之前买鼠标之前根本没考虑到这个问题...

5.3. 图床

我习惯把遇见的问题或者想法记下来,有时候需要使用图片保存,如果先把图截下来,然后上传到自己的cdn,最后在引用连接就显得十分麻烦,这里强烈推荐iPic

使用方式也很简单,截图,右上角快捷栏点击上传,上传完毕右键复制链接,over。

5.4. 梯子

科学上网是每个程序员必备技能,这里推荐一个自己搭ss的教程

5.5. 打开破解程序

mac上面工具挺多的,但是基本要收费,某些工具的价格确实有点小贵,社区提供了破解版,但是下载后经常出现“文件已损坏,请移至废纸篓”的提示,执行下面命令即可

sudo spctl --master-disable

然后在偏好设置->安全性与隐私中就可以看见允许打开任意来源的应用了。

参考 MAC应用无法打开或文件损坏的处理方法

6. 小结

这篇文章记录了我的开发环境的一些东西,主要用作备忘,下次遇见重复的问题就不必再去到处乱搜了。

搭建环境是一个比较繁琐的事情,一个舒适的开发环境可以显著提高开发效率,避免不必要的加班。

但是!!!一旦更换电脑,又需要重头安装开发环境,想想都可怕...所以,接下来是时候了解一下Docker了。

canvas动画之基础知识使用node开发工作流脚本