相信大家都遇到过这样一个场景，每次来到一家新公司使用新机开发的时候，都需要重新装一遍我们开发过程中需要的环境和软件以及插件等等，然而每次去找的汇总文章都不全且不尽相同，导致新机的开发体验很陌生。

在这里，我给大家整理了一份新机环境、软件及插件清单，在 Mac 和 Windows 系统上都可以用，以后就只需要这一份了，还请大家收藏好~

环境

• Git

• 代码管理，项目版本管理

• Node.js

• 工程化项目安装 Npm 依赖环境

• nvm

• Node.js 版本管理

开发软件

• VsCode

• 推荐 VsCode，必装插件在后边

• Hbuilder

• uniapp 开发

• Chrome

• 日常检索资料，B 端产品开发

工具软件

• Git Bash

• Windows 系统推荐，可以集成到 VsCode 的 Terminal，巨好用

• WinRAR

• Windows 系统推荐，压缩、解压必备

• AppCleaner

• Mac 应用程序卸载软件，检测软件文件，可选择性删除

• Obsidian

• 强大的笔记管理软件，可自定义功能。我现在就使用作为我的工作日常记录

• Snipaste

• 截图神器，贴图很方便

• Hidden Bar

• Mac 顶部菜单管理

• QingCaI

• Mac 日历、记事本、TodoList、番茄钟

• OmniPlayer

• Mac 视频播放器

• PicGo

• 图床，图片 Oss 管理

• iShot

• Mac 录屏

• ScreenToGif

• Windows 录屏

• Everything

• Windows 文件文件夹搜索神器

• EdrawMax

• Windows 办公绘图，流程图、网络图、组织架构图等等

• XMind

• 思维导图

VsCode插件

• Auto Rename Tag
• Chinese
• Code Runner
• Code Spell Checker
• ESLint
• Github Copilot（需要有账号）
• Prettier
• JavaScript code snippets
• Live Server
• Material Icon Theme
• open in browser
• Path Intellisense
• Vue-official（以前是Vetur）
• Simple React Snippets
• React Developer Tools
• Angular-cli
• Angular Language Service
• Angular Snippets
• Error Lens
• git flow
• Git History
• GitLens
• Markdown All in One
• MDX
• TypeScript Importer
• Tailwind CSS IntelliSense

配置 Git Bash

zhuanlan.zhihu.com/p/365625019

配置保存自动代码格式化

json

代码解读

复制代码

{ "editor.codeActionsOnSave" : { "source.fixAll.eslint": "explicit" }, "editor.formatOnSave": false, "eslint.codeActionsOnSave.mode": "all", "eslint.codeActionsOnSave.rules": [ "@typescript-eslint/*", "*semi*", "no-multiple-empty-lines", "*", ], "eslint.run": "onSave", "eslint.options": {}, "eslint.lintTask.enable": true, "eslint.validate": [], "eslint.execArgv": null, "prettier.bracketSameLine": true, "prettier.singleQuote": true, "prettier.singleAttributePerLine": true, }

Chrome 插件

• Vue.js devtools
• React Developer Tools
• Redux DevTools
• Angular Devtools
• JSON Viewer
• 更改 Google Chrome 的时区
• Proxy SwitchyOmega
• Google 翻译
• Ajax Modifier

插件下载推荐地址（国内可达）

chrome.zzzmh.cn/#/index

Chrome 收藏网址

• MDN

• developer.mozilla.org/zh-CN/

• Web API、CSS新特性等等查询

• NPM

• www.npmjs.com/

• Npm 包查询

• caniuse

• caniuse.com/

• 浏览器特性兼容性查询

• Node.js

• www.nodeapp.cn/

• Node.js 方法参数查询

• 掘金

• juejin.cn/

• 持续学习充电

• Github

• github.com/

• 紧跟技术前沿

• 语雀

• www.yuque.com/dashboard

• 总结输出

• 谷歌插件下载地址

• chrome.zzzmh.cn/#/index