侧边栏

搭建开发环境的心得

发布于 | 分类于 前端/前端工程

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

去年把笔记本换成了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;
    }
}

相关语法可参考，参考：

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

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

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

小结 ​

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

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

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

#工程化

你要请我喝一杯奶茶？

版权声明：自由转载-非商用-保持署名和原文链接。

本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。