前端常用环境以及常用工具汇总

187 阅读3分钟

本文是根据个人平时工作习惯进行的汇总(长期维护更新)

如果大家有遇到其他好用但本文未提及的工具可以在评论区推荐哈!

一、环境搭建

1. Node.js

介绍: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。

安装方式: nodejs.cn/download/

推荐: 为了适应不同项目兼容的Node.js版本,可以使用nvm工具快速切换版本。

2. NPM

介绍: NPM是随同NodeJS一起安装的包管理工具。

安装方式: 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。

建议: 由于国外镜像源下载资源速度较慢,建议更改淘宝镜像源或者安装cnpm。

// 更改npm镜像源
npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或
npm info express

// 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

推荐: 为了方便切换npm镜像源,可使用nrm工具快速切换。

参考: www.cnblogs.com/onew/p/1133…

3. Yarn

介绍: 快速、可靠、安全的依赖管理工具。

安装方式一: yarn.bootcss.com/docs/instal…

安装方式二:

// 直接通过NPM安装
npm install -g yarn
// 验证是否安装成功
yarn -v

推荐: 为了方便切换yarn镜像源,可使用yrm工具快速切换。

4. Git

介绍: 目前世界上最先进的分布式版本控制系统。

安装方式: git-scm.com/download

使用和安装说明: www.liaoxuefeng.com/wiki/896043…

// 安装完成后设置
git config --global user.name "Your Name"
git config --global user.email "email@example.com"

二、常用工具汇总

Visual Studio Code

介绍: Free. Built on open source. Runs everywhere.

安装方式: code.visualstudio.com/

常用插件

  • Beautify:美化VS Code中的代码;
  • ESLint:将ESLint JavaScript集成到VS Code中;
  • GitLens:增强内置于VS Code中的Git功能(Git注释以及Commit记录);
  • Git Graph:查看仓库提交情况;
  • Vetur:VS Code中Vue工具;
  • DotENV:支持.env文件语法;
  • Debugger for Chrome:在chrome浏览器中调试JavaScript代码;
  • Turbo Console Log:自动生成有意义的log信息;
  • Code Spell Checker:检查单词拼写是否错误(支持英语);

Chrome浏览器

介绍: 得益于内置的 Google 智能工具,Chrome 现在更易用、更安全、更快速。

安装方式: www.google.cn/chrome/

常用插件

  • AdBlock:最佳广告拦截工具;
  • GitHub加速:国内Github下载很慢,用上了这个插件后,下载速度嗖嗖嗖的~!’
  • Google 翻译:浏览网页时可轻松查看翻译版本。由Google翻译小组提供。
  • JSON-handle:It's a browser and editor for JSON document.You can get a beautiful view;
  • Octotree:GitHub on steroids;
  • Window Resizer:Resize the browser window to emulate various screen resolutions.
  • Vue.js devtools:Chrome and Firefox DevTools extension for debugging Vue.js applications.
  • Redux DevTools:Redux DevTools for debugging application's state changes.
  • TabCopy: 复制网页链接时带上标题和链接。

Postman

介绍: 简化构建 API 的每个步骤并简化协作,以便您可以更快地创建更好的 API。

安装方式: www.postman.com/downloads/

Snipaste

介绍: 免费好用的截图工具;

安装方式: zh.snipaste.com/download.ht…

TortoiseGit(Window)

介绍: Git可视化工具;

安装方式: tortoisegit.org/download/

Sourcetree(Mac)

介绍: Git可视化工具;

安装方式: www.sourcetreeapp.com/

XShell(软件收费)

介绍: 业界最强大的SSH客户机;

安装方式: www.netsarang.com/zh/xshell/

XMind(功能收费)

介绍: 全功能的思维导图和头脑风暴软件;

安装方式: www.xmind.cn/

diagrams

介绍: 功能齐全的在线绘图工具;

安装方式: www.diagrams.net/

Whistle

介绍: 一款用 Node 实现的跨平台的 Web 调试代理工具;

安装方式: wproxy.org/whistle/ins…

ohmyzsh(Mac)

介绍: 设置命令行终端样式;

安装方式: ohmyz.sh/#install

autojump(Mac)

介绍: zsh 会自动记录你访问过的目录,通过 j 目录名 可以直接进行目录跳转