<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的快捷键替换系统的搜索，这样相当于升级系统的搜索


可以配置如下功能

  • 应用搜索
  • 文件搜索
  • 搜索浏览器书签，甚至区别多个账户
  • Snippets，短语编辑
  • 一键打开 google/gmail 等，比如配置 g manfredhu可以google搜索我
  • 计算器
  • 日历
  • 搜索打开代码项目
  • Terminal运行命令

几个场景举例

  1. 移动场景下很多时候要连接代理，这个时候要获取电脑IP，常规的控制打个ipconfig/ifconfig。这里直接一个插件实现GetIp功能open in new window
  2. 发布的时候要写哪天的发布方便后面回归特性等需求，可以用到Snippets功能，如下图，比如正常发布用 🚀🚀🚀【2022年11月3日 23:00:38】常规发布 作为标题，与众不同
  3. 对浏览器书签分类，取个简单名字记忆，然后bm <bookmark name>
  4. 配置Terminal，脚本如下
on alfred_script(q)
  if application "iTerm2" is running or application "iTerm" is running then
    run script "
      on run {q}
        tell application \":Applications:iTerm.app\"
          activate
          try
            select first window
            set onlywindow to true
          on error
            create window with default profile
            select first window
            set onlywindow to true
          end try
          tell the first window
            if onlywindow is false then
              create tab with default profile
            end if
            tell current session to write text q
          end tell
        end tell
      end run
    " with parameters {q}
  else
    run script "
      on run {q}
        tell application \":Applications:iTerm.app\"
          activate
          try
            select first window
          on error
            create window with default profile
            select first window
          end try
          tell the first window
            tell current session to write text q
          end tell
        end tell
      end run
    " with parameters {q}
  end if
end alfred_script

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搜下就有了

things

一个TODOLIST软件，主要是事情很多，可以记录需要完成、完成中等等状态，方便快速找回工作状态。而且不怕遗忘

Thoropen in new window

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

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

屏保

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,
}

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

{
  "[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前端】无广告，无软文，就是这么傲娇。直推一线大厂高质量内容，不局限于前端·后台·运维相关，还包括房价🏠、信用卡💳等内容也可内推一线大厂腾讯阿里字节，对腾讯字节比较熟悉，简历可以发给我，我会给你介绍一线大厂的情况，让你更加了解一线大厂