前端装机必备(Mac、Window通用)

5,858 阅读2分钟

大家好,我是CC,在这里欢迎大家的到来~

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

在这里,我给大家整理了一份新机环境、软件及插件清单,在 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

配置保存自动代码格式化

{
    "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 收藏网址