mac 开发环境

记录mac本常安装的开发软件和常用的软件，以及一些环境配置

开发

• VS Code
• chrome 浏览器
• Robo 3T
• Charles
• 小程序开发工具
• mongodb
• ...

chrome 插件

• Adblock Plus Adblock Plus 是拥有超过 5 亿次下载的全球最受欢迎的广告拦截软件之一。
• JSONView Validate and view JSON documents
• Octotree Code tree for GitHub
• React Developer Tools Adds React debugging tools to the Chrome Developer Tools.
• Redux DevTools Redux DevTools for debugging application's state changes.
• session manager Simple yet powerful tab set management. Quickly and easily save, update, remove, and restore sets of tabs!
• Smart TOC Add a table of contents for web article or documentation
• smartUp 手势 一个更好的手势类扩展。功能包括：鼠标手势，简易拖曳，超级拖曳，摇杆手势和滚轮手势。
• The QR code extension 允许当前页面生成 QR 码，并使用网络摄像头扫描 QR 码。
• vuejs devtools Chrome and Firefox DevTools extension for debugging Vue.js applications.
• 沙拉查词支持 Chrome 浏览器的划词翻译
• 简阅 SimpRead 让你瞬间进入沉浸式阅读的 Chrome 扩展，类似 Safari 的阅读模式。
• ...

chrome app

• Marmoset Marmoset is a Chrome App which lets you create gorgeous code snapshots within seconds.
• Postman Postman makes API development faster, easier, and better.
• Tamper Chrome Intercept and modify Chrome requests
• Web Server for Chrome A Web Server for Chrome, serves web pages from a local folder over the network, using HTTP. Runs offline.
• ...

vscode 插件

• Debugger for Chrome
• Import Cost
• open in browser
• vetur
• VS Live Share
• Cobalt2 Theme Official
• Code Runner
• GitLens — Git supercharged
• Custom CSS and JS Loader
• LeetCode
• Remote Development
• Code Runner
• WakaTime

Terminal

• item2
• Oh My Zsh
• tmux
• zsh-autosuggestions Fish-like autosuggestions for zsh
• ...

环境

• ShadowsocksX-NG
• nodejs
• nvm
• ...

npm 常用包

• anywhere 随地启动一个local http server
• npm-check 检查项目中的 npm 包是否有新的版本，并可以选择更新
• nrm npm 源管理，方便切换
• ntl npm task list, 快速查看package.json可执行的script命令
• yarn 快速依赖管理
• pm2 node 进程管理
• wepy-cli 小程序开发框架
• ...

日常软件

• WeChat
• QQ
• Microsoft Office
• Wondershare Video Converter Ultimate 万能视频格式转换器，可以将包括 MP4、MOV 、3GP、AVI、WMV、RM、MPEG-1、MPEG-2、FLV、ASF、M4A、WMA、WAV、MP3、AAC 和 AC3 在内的多媒体格式转换为便携式视频/音频播放器（Zune、iPod、Apple TV、iPhone、PSP）支持的格式,且不会失去原有的品质。
• Alfed 效率工具，如查字典、打开书签、搜索文件、打开文件等
• MacDown
• LICEcap gif 录制工具
• Evernote
• 网易云音乐
• keynote 一个演示幻灯片应用软件
• ...

usersetting.json

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Cobalt2",
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": true,
    "suppressShowKeyBindingsNotice": true
  },
  "explorer.confirmDelete": false,
  "terminal.integrated.cursorBlinking": true,
  "extensions.ignoreRecommendations": false,
  "terminal.integrated.fontFamily": "Inconsolata for Powerline",
  "editor.fontFamily": "Monaco",
  "editor.fontSize": 16,
  "editor.lineHeight": 25,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "400",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "blink",
  "vscode_custom_css.imports": ["file:///User/xiaojie/.vscodestyles.css"],
  "editor.renderWhitespace": "none",
  "window.zoomLevel": -2,
  "gitlens.historyExplorer.enabled": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.activityBar.visible": true,
  "eslint.alwaysShowStatus": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "files.autoSave": "off",
  "breadcrumbs.enabled": true,
  "editor.minimap.enabled": true,
  "editor.renderControlCharacters": true,
  "gitlens.gitExplorer.files.layout": "list",
  "better-comments.highlightPlainText": true,
  "files.associations": {
    "*.wpy": "vue"
  }
}

.vscodestyles.css

.monaco-shell {
  font-family: 'Operator Mono', 'Inconsolata', monospace;
}

/* This makes the dirty tab circle yellow */
.vs-dark
  .monaco-workbench
  > .part.editor
  > .content
  > .one-editor-silo
  > .container
  > .title
  .tabs-container
  > .tab.dirty
  .close-editor-action {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='16' width='16'%3E%3Ccircle fill='%23ffc600' cx='8' cy='8' r='4'/%3E%3C/svg%3E")
    50% no-repeat;
}

.monaco-workbench > .editor > .content > .one-editor-silo {
  border-top: 1px solid #15232d !important;
}

.one-editor-silo + .one-editor-silo {
  border-left: 1px solid #15232d !important;
}

/*
  This puts a thin yellow border around the found items like Sublime did it
*/
.monaco-editor .findMatch,
.monaco-editor .selectionHighlight {
  border: 1px solid #ffc600;
  border-radius: 2px;
  background: transparent;
}

/* This accounts for larger font cutting off - bump up 3px */
.monaco-workbench
  > .activitybar
  > .content
  .monaco-action-bar
  .badge
  .badge-content {
  top: 17px !important;
}