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

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

### 前端环境搭建 ###

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

# 一、下载 #

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

# 二、软件相关 #

## 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][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

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

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

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

![在这里插入图片描述][20201209150242370.png]

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

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

[https_git-scm.com_downloads]: https://git-scm.com/downloads
[20201209150242370.png]: /images/20221120/60f6a4e81cf7414b9e6876a3aeccde63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201209150709446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM_size_16_color_FFFFFF_t_70 1]: /images/20221120/f699a3e6e480444cbb058a9b55bd4707.png
[https_www.sourcetreeapp.com]: https://www.sourcetreeapp.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201209151955226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020120915241130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201209152928424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201209152711857.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWFubmExMjM=,size_16,color_FFFFFF,t_70