走进前端、VSCode插件的安装及其使用

目录

一、走进前端

二、VSCode简单介绍

三、VSCode的下载及安装

四、VSCode插件的安装

五、部分插件及其使用

1.汉化

2.Bracket Pair Colorizer

3.markdownlint

4.open in browser

5.Path Intellisense

6.Prettier

7.vscode-icons

8.Indent-Rainbow

9.Atuo Rename Tag

10.filesize

---

一、走进前端

前端，也称web前端，通俗地讲：实现与用户沟通交互，展示给用户的，用户看到的网页浏览器界面，安装的软件应用程序等就是前端。

前端开发需要掌握HTML、CSS、JS等来提供前端应用运行的代码，前端应用的多媒体内容是由图片和视频等提供的。

前端应用由一个或多个应用页面构成，应用页面也俗称为网页或简称为页面。只有一个页面的前端应用成为单页面应用，而多页面应用是通过多个页面间的静态或动态链接而相互管理起来的应用。

二、VSCode简单介绍

VSCode的全称是Visual Studio Code，它可以运行于 Mac OS、Windows 和 Linux平台 ，具有 JavaScript，TypeScript 和 Node.js 的内置支持，还具有例如 C++、C#、Java、Python、PHP、Go 运行时的生态系统,是微软于2015年发布的一款免费开源的现代化轻量级代码编辑器。

三、VSCode的下载及安装

可以直接在官网下载，进入官网后点击download（一般在右上角）按照需求选择版本后即可下载。

官网链接：Visual Studio Code - Code Editing. Redefined

安装时注意勾选：将通过code 打开“操作添加到windows资源管理器文件上下文菜单”和将通过code 打开“操作添加到windows资源管理器目录上下文菜单”，便可以对文件使用鼠标右键，选择VSCode 打开。建议勾选：添加到PATH（重启后生效），便可以使用控制台打开VSCode 。

四、VSCode插件的安装

点击vscode左下面的拓展按钮或者ctrl + shift + x，就会出现搜索框，搜索你想要的插件即可。搜索后在右边还会出现该插件的详细功能，点击安装，等待后就会将目标插件安装成功。安装完成后重启vscode，就可以了。同样，也可以在插件的详情界面将已安装的插件禁用或卸载。

五、部分插件及其使用

1.汉化

按下Ctrl+Shift+P打开搜索框，输入Configure Display Language，设置 zh-cn 关闭软件重启。

汉化插件：Chinese (Simplified) Language Pack for Visual Studio Code。

2.Bracket Pair Colorizer

会在代码中给括号添上成对的颜色，便于识别和区分。

3.markdownlint

可以检测我们markdown的语法，进行语法纠错，使我们形成良好的markdown书写习惯。

4.open in browser

 VSCode 没有提供直接在浏览器中打开文件的内置界面，此插件在快捷菜单中添加了在默认浏览器查看文件的选项，可以在默认游览器打开你的网页然后进行预览。

5.Path Intellisense

可自动填充文件名，自动补全路径。

6.Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。

7.vscode-icons

可以使VScode左侧的资源管理器根据文件类型显示图标。

8.Indent-Rainbow

为文本前面的缩进着色，在每个步骤中交替使用不同的颜色。使我们能够直观地找出代码缩进的不一致之处，使代码更加美观。

9.Atuo Rename Tag

修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改，进行重命名。

10.filesize

会在状态栏显示当前文件的大小，点击后可以看到详细的创建和修改时间。