---
title: 有用的工具列表
createTime: 2021/02/10 09:55:09
author: pengzhanbo
permalink: /article/xb4woxjg/
sticky: 10
---

## 浏览器插件

- [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?) 顾名思义，非常有用的浏览器 vue开发调试插件
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) React 开发调试插件
- [Octotree - GitHub code tree](https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc) 对github仓库的文件tree生成侧边栏，方便在线查阅浏览/跳转
- [XPath Helper](https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl) 提取当前网站选中的 DOM 元素的 XPath，做埋点测试之类时有用


## cli开发

- [commander](https://www.npmjs.com/package/commander) 完整的命令行解决方案
- [cac](https://www.npmjs.com/package/cac) 轻量级的用于构建cli工具的解决方案
----
- [minimist](https://www.npmjs.com/package/minimist) 命令行参数解析工具
- [yargs](https://www.npmjs.com/package/yargs) 命令行参数解析工具
----
- [Inquirer](https://www.npmjs.com/package/inquirer) 交互式命令行工具
- [prompt](https://www.npmjs.com/package/prompt) 命令行 对话工具
----
- [shelljs](https://www.npmjs.com/package/shelljs) shell调用工具
- [execa](https://www.npmjs.com/package/execa) shell 调用工具
- [chalk](https://www.npmjs.com/package/chalk) node终端输出美化工具
- [ora](https://www.npmjs.com/package/ora) 终端 loading 工具
- [chokidar](https://www.npmjs.com/package/chokidar) 文件监听工具

- [is-ci](https://www.npmjs.com/package/is-ci) 检查当前环境是否是集成环境

## Http server

- [express](http://expressjs.com/)
- [connect](https://github.com/senchalabs/connect)
- [koa](https://koajs.com/)
- [fastify](https://www.fastify.io/)

## Server Framework

- [Nestjs](https://nestjs.com/) 类Spring boot的 Node端开发框架
- [Next.js](https://nextjs.org/) React 应用开发框架
- [Nuxt.js](https://nuxtjs.org/) Vue 应用开发框架
- [Think.js](https://thinkjs.org/) Node端开发框架

- [Egg.js](https://www.eggjs.org/index) 阿里开源的Node端开发框架

## VSCode 插件

### 皮肤

- [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) 个人觉得非常耐看，好用，舒服的一个皮肤。
- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) 非常全面又好看的文件图标主题

### 辅助开发
- [IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) 辅助代码提示
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 拼写检查插件
- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) 用更友好更直观的方式，将错误信息显示出来
- [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 更加友好的注释高亮
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 代码缩进高亮
- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) 显示包体积
- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) TODO注释高亮
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) 缩进高亮标识
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) 文件路径提示
- [TypeScript Hero](https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero) typescript 辅助开发工具
---
- [any-rule](https://marketplace.visualstudio.com/items?itemName=russell.any-rule) 正则表达式大全
---
- [Rest Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) 类 Postman 的 Rest工具


## 测试工具

### assertion
- [chai](https://www.npmjs.com/package/chai)
- [should](https://www.npmjs.com/package/should)

### unit
- [jest](https://www.npmjs.com/package/jest) 
- [ava](https://www.npmjs.com/package/ava) 
- [mocha](https://www.npmjs.com/package/mocha)
- [karma](https://www.npmjs.com/package/karma)
- [tape](https://www.npmjs.com/package/tape)
- [@vue/test-utils](https://www.npmjs.com/package/@vue/test-utils)

### 2e2
- [nightwatch](https://www.npmjs.com/package/nightwatch)
- [cypress](https://www.npmjs.com/package/cypress)


## GIT相关

- [@commitlint/cli](https://www.npmjs.com/package/@commitlint/cli)
- [@commitlint/config-conventional](https://www.npmjs.com/package/@commitlint/config-conventional)
- [commitizen](https://www.npmjs.com/package/commitizen)
- [conventional-changelog-cli](https://www.npmjs.com/package/conventional-changelog-cli)
- [cz-conventional-changelog](https://www.npmjs.com/package/cz-conventional-changelog)
- [husky](https://www.npmjs.com/package/husky)
- [lint-staged](https://www.npmjs.com/package/lint-staged)

## 其他

- [Slidev](https://github.com/slidevjs/slidev) 为开发者打造的演示文稿工具
- [loupe](http://latentflip.com/loupe/) 代码执行流程可视化
