前端入门-VS code安装与前端套件介绍

小弟在前端打滚多年
最近发现有越来越多人想学习前端

首先我们需要先安装一个写code的环境

1. 安装vs code

市面上的IDE（整合开发环境）百百种
包括adobe开发的dreamweaver、nopade++、sublime、vs code等等
当然每一种IDE都有它的特点

从第一次写程式接触到的dreamweaver
可以直接用拖曳的方式来产生程式码
当时就觉得有够酷

在这边我只先介绍市面上最常用的vscode

首先先去vs code官网安装他的的软体
https://code.visualstudio.com/

下载以后安装完打开会呈下以下画面

2.vs code介绍

首先可以看到左方的选项

分别是档案管理、搜寻、版本控制、套件安装

3.常用套件安装

工程师是一群很懒惰的人（可以自动化的东西就不会用手动）

所以在这边会介绍一下前端小弟觉得比较实用的套件

1.中文套件


可以看中文就不要看英文XD
上面也有说要怎么安装进去

2.Auto close tag

在html里面会有很多语法都是需要头尾的

例如<div> </div>
或者<h1> </h1>

它可以帮助你你只要写前面他后面就会帮助你自动跳出来
帮助你减少错误的发生

P.S.前端没有像后端需要那么严谨，或许少了一个</div>页面还是可以呈现的出来，不过当程式码一多的时候会越来越难维护，所以还是需要一个良好的写code习惯，能少一个错就尽量少一个。

3.Auto import

在写程式的时候大部分都很需要import人家写好的js或是css
或是图片上传的时候也需要引入路径

此套件在你想引入的时候会自动帮你取得路径
也会帮助工程师降低出错机率

4.beautify

这个是我觉得很好用的插件之一
他会帮你定义程式码的排列组合

当你按下程式码重新整理的快捷键(vs code内建shift+alt+f)

程式码还没整理之前

程式码整理之后（shift+alt+f之后）

5.Bracket Pair Colorizer

写程式的时候尤其是一些很複杂的功能
很常会遇到Nested（巢状）的困扰

他会帮你把每一个巢状都标示不同的颜色
这样你在删掉function或是任一巢状的时候都比较不会出错

6.git（版本控制）

大概就会长得这样
会显示他的历史纪录还有他的图表

git是每个工程师都需要知道的东西
不过如果是专案不大或是初学前端等其他原因
可以先不用学
若初学比较建议先学好前端的其他基础知识

建议从html+css+js -> jquery -> git -> webpack or scss 等等 -> 前端三大框架（个人看法）

先把基础打好总是没错的

7.HTML Snippets

在你打入关键字的时候
此套件会跳出对应的选项

只需要选择自己需要的项目他就可以帮你对应到所对应的程式码了

8.indent-rainbow

可以看到下面图片左边
依据空格的数目多寡都会有对应的颜色

对于在除错或是Code review的时候都很实用

9.Live Server

这也是一个超实用的套件
前端有时候改完程式码都需要储存过后
再去浏览器重新整理这个页面
才知道想要做的功能有没有上去

他安装完只需要在IDE按下储存
浏览器就会自动帮你更新

省下很多工

10.Power mode

纯推坑一下XDD
这种东西不能只有我用过

他会在你在打字的时候帮你加入特效
为平时枯燥无味的工作增加了一些趣味

当时有安装 不过因为这个特效太碍眼所以又卸载了

vs code的介绍与需安装的套件就先介绍到这边

前端太广了
几乎很多想得到的东西都有人开发过

大家不妨想想看自己需要什么套件
然后去找找看有没有人开发过

到现在环境都安装好了
接下来就是继续学习写网站的基本知识吧～