mac 开发环境 - Koresamuel

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

开发#

chrome 插件#

Adblock Plus Adblock Plus 是拥有超过 5 亿次下载的全球最受欢迎的广告拦截软件之一。
JSONView 验证和查看 JSON 文档
Octotree GitHub 的代码树
React Developer Tools 为 Chrome 开发者工具添加 React 调试工具。
Redux DevTools 用于调试应用程序状态变化的 Redux DevTools。
session manager 简单而强大的标签组管理。快速轻松地保存、更新、删除和恢复标签组！
Smart TOC 为网页文章或文档添加目录
smartUp 手势一个更好的手势类扩展。功能包括：鼠标手势，简易拖曳，超级拖曳，摇杆手势和滚轮手势。
The QR code extension 允许当前页面生成 QR 码，并使用网络摄像头扫描 QR 码。
vuejs devtools 用于调试 Vue.js 应用程序的 Chrome 和 Firefox DevTools 扩展。
沙拉查词支持 Chrome 浏览器的划词翻译
简阅 SimpRead 让你瞬间进入沉浸式阅读的 Chrome 扩展，类似 Safari 的阅读模式。
...

chrome app#

Marmoset Marmoset 是一个 Chrome 应用，可以让你在几秒钟内创建华丽的代码快照。
Postman Postman 使 API 开发更快、更简单、更好。
Tamper Chrome 拦截和修改 Chrome 请求
Web Server for Chrome 一个 Chrome 的 Web 服务器，通过网络从本地文件夹提供网页，使用 HTTP。离线运行。
...

vscode 插件#

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

Terminal#

item2
Oh My Zsh
tmux
zsh-autosuggestions 类似 Fish 的 zsh 自动建议
...

环境#

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