前端开发常用工具安装及配置

627 阅读2分钟

寄语

建议熟悉一种工具或SDK时首先以官方文档和源码作为参考,本文提供的均为相关工具的官方文档;其中一部分是英文,不习惯看全英说明的可以多尝试读读看~,我之前也是不习惯看英文说明,但是后面读多了其实会发现没那么难懂,而且对以后接受更多新技术很有利。

VSCode

Free. Built on open source. Runs everywhere。 基于electron开发, 跨平台桌面GUI应用程序、桌面原生交互体验、热更新.

1 官网下载 code.visualstudio.com

2 安装使用说明 code.visualstudio.com/docs/?dv=os…

3 常用扩展:

- Prettier 美化你的JavaScript/TypeScript/CSS代码
- Auto Import 代码补全
- React Native Tools 代码提示、Debugging、集成RN的命令
- highlight-matching-tag 高亮匹配的标签
- GitLens 每行commit记录、时间、人
- Git History 查看git log或则一个文件的git历史,比较不同的分支,commits
- Vetur Vue工具

gitHub

全世界最大的开源软件代码库和开发工具服务商。 苹果、亚马逊以及国内几个互联网巨头都在使用,目前属于微软旗下。 上面提到的Electron也是GitHub开发项目之一。 www.git-scm.com/book/zh/v2

注册账户以及创建仓库

1.进官网地址(github.com/)

2.根据提示Create a New Repository(一般免费用户只能创建公共仓库)

3.本地管理代码仓库:

  • 一种是通过下载桌面版客户端 desktop.github.com
  • 第二种直接使用命令行工具(mac开发的话推荐命令行工具 iTerm2:iterm2.com/)

4.git起步及相关操作:www.git-scm.com/book/zh/v2/…

5.git别名配置 vim ~/.gitconfig 一般配置: [alias] s = status d = diff co = checkout br = branch lo = log --oneline -n 10 pr = pull --rebase

Chrome

前端调试利器

Node

nodejs.org/zh-cn/

1 nvm安装 github.com/nvm-sh/nvm#… 如果重启后不生效检查:

  • 执行source ~/.bash_profile
  • 如果使用了zsh
  • vim ~/.zshrc
  • 将source ~/.bash_profile添加进去

2 通过nvm安装及管理对应版本的node nodejs.org/zh-cn/ 比如:

nvm install 12.16.2