盒子
盒子
文章目录
  1. 开发
    1. chrome插件
    2. chrome app
    3. vscode 插件
  2. Terminal
  3. 环境
    1. npm常用包
  4. 日常软件
    1. usersetting.json
    2. .vscodestyles.css

我的mac常用软件

开发

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.
  • youdao划词翻译 支持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 插件

  • Better Comments
  • 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

Terminal

环境

npm常用包

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

日常软件

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",
    // Very important: Install this plugin: https://github.com/be5invis/vscode-custom-css
    // you'll need to change this to an absolute path on your computer
    "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;
}