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

柔情只为你懂 2022-12-25 08:56 233阅读 0赞

前端环境搭建

  • 一、下载
  • 二、软件相关
    • 1、vscode常用插件
    • 2.sourcetree安装与使用

一、下载




































软件 作用 下载地址 备注
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常用插件

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

2.sourcetree安装与使用

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

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

    配置用户名

    git config —global user.name “username” //( “username”是自己的账户名,)

    配置邮箱

    git config —global user.email “username@email.com” //(“username@email.com”注册账号时用的邮箱)

    命令查看配置是否OK

    git config —global —list

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

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

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

在这里插入图片描述

  1. 打开github账户,将刚才生成的密钥用记事本打开,然后把内容粘贴上去
    在这里插入图片描述在这里插入图片描述
    这样,你自己的本地仓库就和远程仓库关联好了,接下来我们要配置sourcetree.
  2. 下载sourcetree,并配置
    地址为https://www.sourcetreeapp.com/,也是傻瓜式安装就好啦。
    然后打开软件,点击屏幕上方的工具->选项,将会出现如下的界面
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
就这样简单的结束啦,你就可以尽情的和远程仓库交互啦。

发表评论

表情:
评论列表 (有 0 条评论,233人围观)

还没有评论,来说两句吧...

相关阅读

    相关 软件设计师教程

    第2章程序设计语言基础知识 程序设计语言是为了书写计算机程序而人为设计的符号语言,用于对计算过程进行描述、组织和推导。程序设计语言的广泛使用始于1957年出现的 FORT

    相关 搭建准备环境

    最开始准备一篇写完但是发现篇幅太长,所以针对其中的一些配置会单独提出 搭建的准备环境 1.克隆虚拟机 2.修改克隆虚拟机的静态IP 3.修改主机名