前端开发工作流

[pfan123]

前端开发工作流

工具

文档工具

• Typora
• Quiver
• Tick Tick

流程设计工具

• MindNode
• OmniGraffle
• XMind
• Sketch
  • Flowkit - 用Sketch定制你的流程图
  • Craft - 辅助改变设计流程
  • sketch-dev-tools
• Sketchpacks
• Xnip - 截图工具
• Gifox - GIF 动画制作工具
• animockup - Create animated mockups in your browser and export as video or animated GIF 🔥
• unscreen - Remove Video Background

开发工具

• node
  • 管理工具
    • n 版本管理
    • nrm NPM 镜像源管理
    • mrm 快速生成项目配置文件
    • http-server 命令行 http 服务器
    • nodemon 文件变更自动重载服务
  • web相关模块
    • joi JSON schemas 参数验证
    • jsonschema JSON schemas 参数验证
    • validator 字符串验证
    • JWT 鉴权
    • boom 友好的错误日志
    • nconf 环境变量模块管理
    • macaca
  • 性能工具
    • autocannon node编写的压测工具
    • wrk HTTP基准测试工具
    • loadtest HTTP或WebSockets 运行负载测试
    • siege Siege是一个开源回归测试和基准测试实用工具。
    • appmetrics-dash Node应用指标监控看板
    • spy-debugger 一站式页面调试、抓包工具
• git
  • commitizen(提交提示) + husky + lint-staged + @commitlint/{cli,config-conventional}
  • commitizen/cz-conventional-changelog + conventional-changelog/standard-version
• Homebrew
• Docker
  • Docker Hub
• Kubernetes
  • Minikube
  • kubectl
  • Krew
  • Helm
• sourcetree - 分支管理工具
• Robo 3T
• Pngyu - 图片压缩处理
• Medis
• iTerm + oh-my-zsh + oh-my-plugins
  • plugins: git + autojump + zsh-autosuggestions + zsh-syntax-highlighting
• Visual Studio Code
  • Prettier - Code formatter - 超人气代码格式化工具prettier
  • HTML Snippets - 超级实用且初级的 H5代码片段以及提示
  • HTML CSS Support - 让 html 标签上写 class 智能提示当前项目所支持的样式，新版已经支持 scss 文件检索
  • Debugger for Chrome - vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调
  • vscode-icon - vscode 资源树目录加上图标
  • Path Intellisense - 路径自动补全
  • Npm Intellisense - require 时的包提示
  • Document this - JS 注释模板
  • ESlint - JS 代码规则检测
  • TSLint - ts 代码规则检测
  • Project Manager - 多个项目之前快速切换的工具
  • beautify - 格式化代码的工具
  • GitLens - 实时查看代码版本记录
  • fileheader - 顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间
  • filesize - 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
  • code-spell-checker - 检查单词拼写
  • Vetur - Vue tooling for VS Code
  • EditorConfig for VS Code - 统一编码缩进风格
  • draw.io - 流程图工具
  • VSCode Docker - 方便管理和部署容器化应用程序
  • Comment Translate - 注释翻译
• VuePress - 快速生成 markdown 文档

其他常用工具

• The Unarchiver

Other Resource

Spaceship ZSH