一、下载

软件	作用	下载地址	备注
vscode	编辑器	https://code.visualstudio.com/
git	代码仓库	https://git-scm.com/downloads
sourcetree	仓库管理工具	https://www.sourcetreeapp.com/	相当一可视化的git管理工具，不用再记命令
node	基于 Chrome V8 引擎的 JavaScript 运行环境	https://nodejs.org/en/	傻瓜式安装，安装要配置环境变量，网上很多教程。

二、软件相关

1、vscode常用插件

Chinese (Simplified) Language Pack for Visual Studio Code(为 VS Code 提供中文本地化界面)
open in browser（允许当前文件在浏览器中打开）
Prettier - Code formatter （漂亮的格式化工具)
Auto Rename Tag（自动重命名标签)
Auto Close Tag(自动添加结束标签）
Bracket Pair Colorizer（为括号对添加不同的颜色）
CSS Peek（快速匹配HTML对应的CSS文件）
ESLint （js语法纠错）
GitLens — Git supercharged（方便查看git日志）
HTML CSS Support （智能提示CSS类名以及id ）
HTML Snippets（智能提示HTML标签，以及标签含义）
JavaScript(ES6) code snippets （ES6语法智能提示）
Path Intellisense（自动提示文件路径，支持各种快速引入文件）
React/Redux/Typescript/Javascript/Omi snippets
（React/Redux/Typescript/Javascript/Omi语法智能提示）
Vetur（Vue多功能集成插件）
Dracula Official（很好看的一款主题风格）
Class autocomplete for HTML（智能提示HTML class =“”属性）
IntelliSense for CSS class names（智能提示 css 的 class 名）

2.sourcetree安装与使用

一个用于Windows和Mac的免费Git客户端。Sourcetree简化了如何与Git存储库进行交互，这样您就可以集中精力编写代码。

安装本地GIT仓库，下载地址为https://git-scm.com/downloads，然后直接傻瓜式默认安装。
配置本地仓库。首先你得有一个远程仓库，这个时候你就需要申请一个GitHub账号，记住自己的用户名和密码。然后配置自己本地仓库的用户名和邮箱，需要用到的命令为：

# 配置用户名
git config --global user.name "username"    //（ "username"是自己的账户名，）
# 配置邮箱
git config --global user.email "username@email.com"     //("username@email.com"注册账号时用的邮箱)
# 命令查看配置是否OK
git config --global --list

将本地仓库和远程仓库关联起来，创建密钥，方便后面的文件传输:

ssh-keygen -t rsa //这个地方需要敲三次回车，目的是询问你将要将密钥放在哪个目录下，以及是否需要密码，这里我们就不输入，选择默认设置就好。

然后会生成如下两个文件，这里我生成了几次，每次命令行敲完了没有反应，找不到文件，我也不知道为什么，然后后面查看这个文件突然就有了，生气。

打开github账户，将刚才生成的密钥用记事本打开，然后把内容粘贴上去

这样，你自己的本地仓库就和远程仓库关联好了，接下来我们要配置sourcetree.
下载sourcetree，并配置
地址为https://www.sourcetreeapp.com/，也是傻瓜式安装就好啦。
然后打开软件，点击屏幕上方的工具->选项，将会出现如下的界面

就这样简单的结束啦，你就可以尽情的和远程仓库交互啦。

前端环境搭建的软件和软件教程相关推荐

第七章前端开发——前端工程化（NPM、脚手架、前端环境搭建）
第七章前端工程化(NPM.脚手架.前端环境搭建) 一.支持环境二.NPM包管理工具三.Vue生成器四.前端的集成环境五.项目目录结构六.前端Vue框架与后端Django框架的简单交互一. ...
linux环境前端开发环境搭建,Linux运维知识之linux 前端环境搭建
本文主要向大家介绍了Linux运维知识之linux 前端环境搭建,通过具体的内容向大家展现,希望对大家学习Linux运维知识有所帮助. 1.下载node.js 2.在linux 里使用wget命令 w ...
数据分析——1.环境搭建（Jupyter Lab安装教程）
数据分析--1.环境搭建(Jupyter Lab安装教程) 1. 安装Jupyter Lab pip install jupyterlab 2. 运行Jupyter Lab 打开cmd,运行命令,浏览 ...
Vue前端环境搭建(最简单，最全)
Vue前端环境搭建(最简单,最全) VS code下载下载地址:https://code.visualstudio.com/ node下载 v14.15.4 版本过高不兼容部分插件,v14.15.4 ...
jeecgboot 前端环境搭建_JEECG-BOOT环境搭建：2.1.1版
JEECG是一个国内开源的快速开发的J2EE框架,JEECG-BOOT是基于Spring Boot的版本,这篇文章介绍一下搭建的方式(JEECG-BOOT 2.1.1). 事前准备操作系统 lium ...
爱旅行-前端环境搭建
tomcat设置点击+号 http协议的端口号为80 前端我们用的是react框架不再是jsp/html react写的js 需要打包才能用前端在请求的时候只会请求本地访问不到后端---- ...
要做单片机课课设的快看过来1：KEIL安装以及C51环境搭建和Protues安装保姆教程
文章目录前言一.准备工作 1.安装包以及注册机的获取 2.系统用户名的检查二.MDK安装与破解 1.安装keil a.关闭系统的防火墙,双击安装. b.慢慢等待 2.安装pack包 3.破解MD ...
iis php 环境搭建，非常详细的教程
2019独角兽企业重金招聘Python工程师标准>>> 准备篇一.环境说明: 操作系统:Windows Server 2016 PHP版本:php 7.1.0 MySQL版本:My ...
ant design后台模板-1.前端环境搭建
学习了一段时间的React,试着搭建一个后台管理的模板,算是这一段时间的学习总结,前端将采用create-react-app作为脚手架,引用react-router进行路由处理,后台将采用spring ...

前端环境搭建的软件和软件教程

前端环境搭建

一、下载

二、软件相关

1、vscode常用插件

2.sourcetree安装与使用

前端环境搭建的软件和软件教程相关推荐

最新文章

热门文章