<manfred>峯</hu>

zen·工作环境搭建(长期更新)

俗话说：“工欲善其事必先利其器”，高效的工作环境可以提升开发效率

下面介绍的都是实际工作用到的，自己折腾出来的最佳选择，可能不适合所有人，可以按需取用，各取所需。

硬件和操作系统

能上Mac就上Mac，windows并不适合开发，遇到的坑已经够多了。Mac的话推荐笔记本，主要是移动办公方便，电脑24小时不离身，出问题也方便解决。而且iMac外接屏幕基本就是蛋疼-_-!。mbp照着最新的买就好，m1能上也行。前端环境现在基本MacOS是标配
键盘可以看我推荐的Keychron或者HHKB。主要是用的爽，苹果自带的键盘撸了两年最后觉得实在不好用，代码写起来完全没激情。还是机械键盘好。鼠标可能是因为我手大，妙控鼠标觉得太小了，支撑不行。

  • 笔记本电脑 最新mbp
  • 键盘 keychron2或者HHKB
  • 触摸板 苹果

我还加了一块触摸板，主要是方便左右手鼠标+触摸板可以高效切换桌面浏览器/开发工具和编辑器等等。个人习惯，用起来确实爽，而且触摸板基本一个月才冲一次电，平时基本可以忽略用电

系统配置

将功能键(F1-F12)设置为标准的功能键

主要是程序员用不到一些功能，F1-F12会多出来12个自定义功能键等

系统偏好设置 -> 键盘

触摸板

系统偏好设置 -> 触摸板
全开就好了，跟踪速度最大

Dock居左

系统偏好设置 -> 程序坞与菜单栏

Tab切换选项

系统偏好设置 -> 键盘

这样设置后可以用Tab在选项间做切换，如保存文件的时候

右下角触发屏幕保护

系统偏好设置 -> 桌面与屏幕保护程序，切换到屏幕保护程序，右下角触发角设置

再设置进入屏保后需要密码才能进入，在系统偏好设置 -> 安全性与隐私

好了现在你有事可以直接鼠标移到右下角进入屏保然后走人，别人再来需要密码才能进入你的电脑

Mac快捷键使用open in new window，基本是所有软件都支持的，下面列几个常见的，有一些可能用的不多，但是如果HHKB下没有方向键则会体会都优势

  • 光标方向
    • ctrl+a/e可以实行移动到行首/行尾
    • ctrl+f/b实现单字符的左右移动(forward/back)
    • ctrl+p/n实现移动至上一行/下一行(previous/next)
  • 删除
    • ctrl+U清理之前的输入
    • ctrl+h/d实现向前删除/向后删除
    • ctrl+w可以实现向前删除一个单词

始终显示滚动条

系统偏好设置->通用，如下设置，底部“接力”也可以一起开了，如果你用的苹果手机的话复制电脑可以粘贴，前提是wifi蓝牙一起打开

自定义工具栏

配置启动台显示行数和列数

启动台，即触摸板开启后四指收合的手势会出现启动台，这里有电脑所有的应用程序集合，默认的行列太少了，可以终端输入如下命令修改

defaults write com.apple.dock springboard-columns -int 9
defaults write com.apple.dock springboard-rows -int 6
defaults write com.apple.dock ResetLaunchPad -bool TRUE
killall Dock

以上命令的含义如下

  1. 调整每一列显示图标数量，9表示每一列显示9个，数字部分可根据个人喜好进行设置。
  2. 调整多少行显示图标数量，这里我用的是6，数字部分你也可以改成8或其他
  3. 重置Launchpad
  4. 重启Dock

去除拼写检查

主要是偶尔每一次敲击如果设置了文本检查则都会比较慢，特别是中文输入的时候


可以换搜狗输入法，但是我发现杀一下输入法进程重启就好了

pkill -f SCIM.app

参考：https://www.zhihu.com/question/21205282

软件

软件也是跟开发效率息息相关的，只推荐好用的。Mac的软件基本都收费的，可以去买个软件分享会员，基本就可以畅行无阻了。

其次，Mac也会对软件来源限制，可以按照这里open in new window的来解开限制

XCode

  • 除非是做 iOS 开发，否则没有必要安装几个 G 的 Xcode，直接安装 Xcode Command Line Tools 即可；
  • 安装步骤：打开终端 -> xcode-select --install 回车 -> 按照提示完成操作即可。
  • 为什么要安装这个东西呢，解释一下：它提供了一系列编译工具集(git, make, clang, gcc, etc)，安装 homebrew 也需要用到。

Chrome

谷歌浏览器，时下最流行的浏览器。快捷键open in new window值得去深入研究一波，这里不细说。记多少看自己了

插件

推荐一些日常用的插件

终端

iterm2+zsh基本没争议

iterm2配置

主要是一些快捷键配置，个人习惯可以改，但是大体差不多

zsh的插件可以去看最好用的shell-ohmyzsh

一些简单的快捷键，其实 ctrl + a/e 这种是系统自带的，很多地方都能用

  • cmd+T新建
  • cmd+D垂直分屏
  • cmd+shift+D水平分屏
  • cmd+U透明度切换，一般截图的时候不想让人家看到后面用
  • cmd+K清屏
  • cmd+number，比如cmd+1为第一个tab等
  • cmd+上下左右，切换tab

iterm2一般会跟服务器进行上传下载操作，此时需要更好的插件，比如有显示进度条的
trzszopen in new window

tigopen in new window

一个git图形化命令行工具，主要是因为git的命令行工具比较薄弱，交互太烂。而VSCode的git管理工具遇到过失灵的情况，且只能看到最后的总文件变更，如果你要去找到某一行代码是谁改的，会非常难用。
主要是几个命令， Ctrl+C 可以退出交互

tig status # 进入status视图，会注明 Untracked files/Changes not staged for commit/Changes to be committed 的文件
tig blame <file> # 查询文件的每一行最后修改信息
tig <branchname> # 查看某个分支的提交信息
tig <oldBranch>..<newBranch> # 查看两个分支的diff
tig <filename> # 查看某个文件的提交历史

需要结合常见的vim光标移动和翻页操作

hjkl 左下上右
ctrl+d down下翻半页
ctrl+u up上翻半页
空格 下翻一页
- 上翻一页

很强大，感觉可以单独开篇写了。写完了，点击这里查看

窗口管理软件

Moomopen in new window，可以快捷键编排窗口大小和位置，附上个人快捷键设置，在VSCode需要多项目分屏的时候特好用

也有推荐Rectangleopen in new window的感兴趣的可以试试

Alfred

Alfredopen in new window，超越系统搜索，功能太多自行挖掘，可以参考这里open in new window.

先关闭系统的搜索再用Alfred的快捷键替换系统的搜索，这样相当于升级系统的搜索


可以配置如下功能

  • 应用搜索
  • 文件搜索
  • bm 搜索浏览器书签，甚至区别多个账户
  • Snippets，短语编辑，比如常用的姓名地址电话号码都可以设置短语编辑
  • 一键打开 google/gmail 等，比如配置 g manfredhu可以google搜索我
  • 计算器，不需要打开直接输入就可以得到结果
  • 搜索打开代码项目
  • > code ./ 类似的命令执行，而且是在itemr2运行命令

几个场景举例

  1. 移动场景下很多时候要连接代理，这个时候要获取电脑IP，常规的控制打个ipconfig/ifconfig。这里直接一个插件实现GetIp功能open in new window
  2. 发布的时候要写哪天的发布方便后面回归特性等需求，可以用到Snippets功能，如下图，比如正常发布用 🚀🚀🚀【2022年11月3日 23:00:38】常规发布 作为标题，与众不同
  3. 对浏览器书签分类，取个简单名字记忆，然后bm <bookmark name>
  4. 配置iTerm2终端执行命令

workflow

Git

安装可以自行搜索，这里说下如何配置个人与公司双重账号。一般个人账号全局配置，然后可以在全局~/.gitconfig文件配置，设置同时创建
~/work为工作目录并在访达添加

[user]
    name = 你的名字
    email = 你的邮箱@gmail.com
[includeIf "gitdir:~/work/"] # 注意这里要放在最后，因为工作的邮箱要覆盖全局的
    path = .gitconfig-work

~/.gitconfig-work按照如下配置

[user]
    name = xxx
    email = xxx@xxx.com

这样~/work/目录用来放工作项目，以xxx@xxx.com提交代码，与个人项目隔离。同时可以配置~/.bashrc如下增加全局指令跳转方便来回切换

alias doc="cd /Users/xxx/Documents"
alias work="cd /Users/xxx/work"

Pasteopen in new window

自动记录下前N个剪辑板的东西，后面可以用到可以返回去找。快捷键 Shift+Command+V

Xnipopen in new window

截图用，系统自带的截图有点不灵活片，不能标注。之前用的腾讯的截图open in new window也很好用，不过新的mac用不了

翻译Bobopen in new window

一个好用的翻译软件，全局可以翻译一些东西，高效。结合各大xx云的翻译接口，可以畅游所有英文文档

特别推荐绑定自己的云服务接口，不会收到频率限制，非常稳定。其次是OCR识图，基本可以解决国内各大canvas实现的文档关闭复制的能力，是的说的就是飞书。

CleanMyMac

主要是配置不高的时候定期清理可以提高系统速度，收费。免费的可以用腾讯的柠檬open in new window

图片处理

  • HEIC Converter，主要是iphone高版本手机图片格式是HEIC，隔空投送到电脑格式不变，需要批量转化。App Store搜下就有了

Thoropen in new window

雷神索尔，快捷键控制窗口切换，真的是像闪电⚡️一样快的切换，跟cmd+tab不一样，Thor是支持DIY快捷键的，你可以给每一个应用程序定义自己的快捷键。

cmd+1~9让你有一种打dota改键操作的快感

常用cli

屏保

fliqloopen in new window 很经典的锁屏时钟

开发

代码格式化prettier

推荐prettier，规范都是虚的，每个人见仁见智，很多人封装了自己的ESlint规则库，开发的时候运行报错还要手动修改。私认为能提供工具就提供工具，而不是写个规范要开发者遵守。
这里prettier能帮助开发者直接修改代码为格式化后的代码，多人开发的话基本业内已经认同了。

  1. 项目安装prettier
npm i -D prettier


yarn add --dev --exact prettier
  1. 项目根目录创建.prettierrc和.prettierignore文件
semi: false // 不需要;
singleQuote: true // 单引号
printWidth: 80
trailingComma: 'none' // 行尾,号
arrowParens: 'avoid' // 单参数可以不用括号，如 x => x，如果是always则会变成 (x) => x
.prettierignore 内容
# Ignore artifacts
build
dist
coverage

# Ignore all HTML files:
*.html

node_modules/*
  1. 加个script测试一下
{
  "scripts": {
    ...
    "format": "prettier --config .prettierrc 'src/**/*.ts' --write"
  }
}

跑 npm run format 试试

  1. VSCode结合
    安装prettier扩展Prettier - Code formatteropen in new window

添加 .vscode/setting.json 文件
内容为

{
  // Default (format when you paste)
  // 这里不一定开开启，有时候被格式化后反而乱了
  "editor.formatOnPaste": true,
  // Default (format when you save)
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // 在保存时使用 eslint 格式化
    "source.organizeImports": true // 保存时整理 import 排序，去掉没用的导入包
  },
}

如果只希望对某一类文件进行格式化，可以这么设置

{
  "[typescript]": {
    "editor.formatOnPaste": false,
    "editor.formatOnSave": false,
  },
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
}
  1. ESlint结合
    ESlint跟Prettier规则有冲突的，需要安装插件解决一下冲突

首先安装几个插件

npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier
  • eslint-config-prettier: 关闭所有可能干扰Prettier规则的ESLint规则
  • eslint-plugin-prettier: 转化Prettier规则为ESLint规则

.eslintrc文件配置如下

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "prettier"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": 2 // Means error
  }
}

编辑器VSCode+相关插件

编辑器无争议的VSCode, SublimeText和WS也用过，基本淘汰了。不强求，只推荐最好的

Tips: VSCode可以安装 code xxx 的命令，这样在终端输入 code <path> 就可以用VSCode打开某个目录作为项目了。具体是 Command+Shift+P 输入 Shell ，选择 在Path中安装Code命令 选项，安装就好了

VSCode的一些配置

  • TypeScript
    • TS报错如果是中文的，理解起来会很别捏，可以设置搜索typescript local, 选择为英文报错。解决起来容易点

VSCode侧边栏快捷键

  • Cmd+B显示/隐藏侧边栏

  • Cmd+Shift+x侧边栏显示扩展

  • Cmd+Shift+e侧边栏显示资源管理器

  • Cmd+Shift+F全局搜索

  • Ctrl+Shift+Ggit状态

  • Cmd+Shift+Ddebug面板

VSCode 配置

{
  // 工作区文件icon主题
  "workbench.iconTheme": "vscode-icons",
  "vsicons.dontShowNewVersionMessage": true,

  // 标题栏显示文件全路径名
  "window.title": "${activeEditorLong}",

  // 删除文件不确认
  "explorer.confirmDelete": false, 

  "files.associations": {
    "*.vue": "vue",
    "*.wpy": "vue",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.json": "jsonc",
    ".eslintrc": "yml",
    ".prettierrc": "yml"
  },
  "emmet.includeLanguages": { // emmet是默认插件，html与wxml关联
    "wxml": "html"
  },

  // 启用文件路径面包屑显示
  "breadcrumbs.enabled": true,

  // 关闭单击预览模式
  "workbench.editor.enablePreview": false,

  // 直接打开文件忽略信任，https://code.visualstudio.com/docs/editor/workspace-trust
  "security.workspace.trust.untrustedFiles": "open",

  // tabSize
  "editor.tabSize": 2,
  // 控制是否在打开文件时，基于文件内容自动检测 `editor.tabSize#` 和 `#editor.insertSpaces`。
  // "editor.detectIndentation": true,

  // git配置，取消同步确认（一键push)
  "git.confirmSync": false,
  // git diff是否忽略空格
  "diffEditor.ignoreTrimWhitespace": false,

  // 控制编辑器是否自动格式化粘贴的内容。格式化程序必须可用，并且能针对文档中的某一范围进行格式化
  // https://juejin.cn/post/6844903747458465805
  "editor.formatOnPaste": true,

  // -------------------------------------------------------------------------------
  // sync plugin start -------------------------------------------------------------
  // 同步vscode 配置by Sync插件
  "sync.gist": "c55dd2850c93a448aa9ad5ac1187947c",
  "sync.quietSync": false,
  "sync.removeExtensions": true,
  "sync.syncExtensions": true,
  "sync.autoDownload": false,
  "sync.autoUpload": true,
  "sync.forceDownload": false,
  // -------------------------------------------------------------------------------
  
  // -------------------------------------------------------------------------------
  // WXML - Language Service
  // https://marketplace.visualstudio.com/items?itemName=qiu8310.minapp-vscode
  "minapp-vscode.disableAutoConfig": true,
  // -------------------------------------------------------------------------------

  // ---------------------------prettier start--------------------------------------
  // Prettier
  // https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // ---------------------------prettier end-----------------------------------------

  // ---------------------------vetur start--------------------------------------
  // vetur
  // https://marketplace.visualstudio.com/items?itemName=octref.vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 160,
      "singleQuote": true, // 使用单引号
      "semi": true, // 末尾使用分号
      "tabWidth": 2,
      "arrowParens": "avoid",
      "bracketSpacing": true,
      "proseWrap": "preserve" // 代码超出是否要换行 preserve保留
    }
  },

  // ---------------------------vetur end-----------------------------------------

  // ---------------------------Beautify start--------------------------------------
  // Beautify
  // https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
  // ---------------------------Beautify end-----------------------------------------

  // JSON和JSONC使用vscode默认工具格式化
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  

  // 关闭默认js和ts默认格式化程序，用prettier或者eslint做格式化
  "javascript.format.enable": false,
  "typescript.format.enable": false,

  // 保存时用eslint格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // ----------------------------------------------------------------------
  // markdown
  // https://github.com/sumnow/markdown-formatter/blob/HEAD/README_CN.md
  "[markdown]": {
    // 快速补全
    "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
    },
    "editor.defaultFormatter": "mervin.markdown-formatter",
  },

  // ----------------------------------------------------------------------
  // liveServer plugin 
  // https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
  "liveServer.settings.donotShowInfoMsg": true,
}

VsCode的替换

VsCode的替换很高级的，比如下面这样的数据要去除下划线，变bookkeeping_time为bookkeepingTime连代码都不用写

{
  "id": "2220111",
  "bookkeeping_time": "2022-01-11 21:23:49",
  "transaction_id": "50302000412022011116333576526",
  "funds_flow_id": "4200001393202201111256288731",
  "busi_name": "退款",
  "type": "退款",
  "flow_type": "支出",
  "amount": "0.01",
  "balance": "0.48",
  "commit_owner": "1800009625API",
  "remark": "退款总金额0.01元;含手续费0.00元",
  "out_request_no": "test11117",
  "sub_mch_id": "1618672245",
  "account_type": "基本账户",
  "flowTime": "1641907429",
  "createTime": "1642418022",
  "update_time": "1642418022",
  "busi_type": 0,
  "busi_no": "st11117"
}

直接cmd+f调出查找替换窗口

VSCode 扩展插件

调试

开发调试

开发调试的技巧内容太多，浏览器大家基本都会。node调试和VSCode的可以看看真·工作环境搭建-调试篇

whistleopen in new window代理

基本上whistle搞定网页+小程序

whistle是基于node的代理，有node的地方就可以运行，所以Linux/MacOS/Windows都是OK的，可以转发http/https请求。千万不要再用fiddle了-_-!!

一般搭配Chrome插件SwitchyOmegaopen in new window, 方便各个环境的切换

  • whistle安装open in new window, 这里推荐修改~/.bashrc实现开机启动，基本是长驻应用了
  • SwitchyOmega就是Chrome的浏览器插件，新建一个情景模式指向whistle就可以了，同时可以把不需要代理的域名过滤掉

最后设置完后请求流走向

Chrome发起请求 -> SwitchyOmega匹配转发到whistle -> whislte根据规则转发到本地端口

whistle Mock请求

比如 /cgi/a/b/c 的请求可以这么配置

/a/b/c/ tpl://{c.json}

command+鼠标左键点击 {c.json} 位置可以自动创建对应的json文件，再把内容贴上去就好

whistle的手机代理和捕获

一些效果只有真机能模拟，经常是小程序方面的，此时用手机配置IP+端口将请求打到电脑的whistle，更加方便查看请求和做mock定位问题。
通常都是https请求，需要安装证书。可以看这里open in new window。
安装证书后，电脑可以输入ifconfig(mac)或者ipconfig(windows)查看IP，之后手机配置对应IP和我们上面设置的8099端口，就可以实现将请求打到电脑了

SwitchHostopen in new window代理

其实就是修改的 /etc/hosts 文件，不过好在暗黑模式颜值还可以

Proxymanopen in new window

也是挺好用的代理工具，可以自己写脚本定义转发等。

默认开启在9090端口，可以用Chrome浏览器插件SwitchyOmega转发过去，与whistle等价

CI/CD

一般都有流水线配置了，这里阿里云对外的云效或者是Github的Github Action，原理基本差不多，安装+构建。主要是写bash，当然也有pipeline as code的概念在这里，其实Github Action是很不错的，开源项目推荐用起来。逐渐可以称为行业规范了。不过各大IT公司都有自己的类似产品，重复造轮子罢了。本质还是shell

博客流水线部署部分Github Action， .github/workflows/node.yml

# vuepress静态资源文件部署
name: Node.js CI
on:
  push:
    branches:    
      - master # 指定master的push才触发
      
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master
      
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'
    - run: npm run init
    - run: npm run build --if-present # 如果有build script就执行
      
    - uses: actions/upload-artifact@v2 # 上传产物
      with:
        name: build-artifact
        path: xxx
        retention-days: 1

监控

现代的工程基本都上云了，这里说下云上的监控，如果是公司内的可以找对标产品或者自行搭建

前端监控

一般是引入SDK，然后上报数据到平台里

Node监控

都可以了解一下，pm2的话是应用本来就基于pm2多进程部署，那么简单搞的话可以直接用pm2的。Easy-Monitor的话是阿里开源的，自己去上报也能用

badjs

一般badjs需要结合sourcemap才能定位到源代码，所以一般是发布的时候把sourcemap上传到对应的服务器，然后服务器catch到错误之后根据错误去映射到源代码，此时可以定位到报错的大致位置，有效提升解决js错误的效率

Last Updated:
<manfred>峯</hu>
欢迎关注微信公众号 【Big前端】无广告，无软文，就是这么傲娇。直推一线大厂高质量内容，不局限于前端·后台·运维相关，还包括房价🏠、信用卡💳等内容也可内推一线大厂腾讯阿里字节，对腾讯字节比较熟悉，简历可以发给我，我会给你介绍一线大厂的情况，让你更加了解一线大厂