对于刚开始接触前端开发的学习者来说，搭建一个高效便捷的开发环境是至关重要的。这不仅能让编码过程更加顺畅，还能显著提升开发效率。以下是我在使用代码时的一些常用工具和插件推荐，希望对你们有所帮助。未来如果我发现更多实用的工具，也会继续与大家分享。
1.首先，汉化包是必不可少的
下载完还不知道如何添加工具和插件的可以通过Ctrl+Shift+X来查询工具并且添加
或者在如下位置直接点击进行搜索
2.A-super-comprehensive
代码补全 包含 vue,webpack,bootstrap3,javascript,css,html,php,ajax,node 等等..
3.Auto Close Tag
Auto Close Tag扩展的主要作用是在编写HTML/XML代码时自动添加闭合标签。它会根据开放标签的闭合括号的位置自动插入相应的闭合标签，并将光标定位在开始标签和结束标签之间，提高了编写代码的效率和准确性。此外，它还具有其他功能，如设置不会自动关闭的标签列表、自动关闭自闭合标签、支持Sublime Text 3模式等。通过这个扩展，您可以更快地编写HTML/XML代码，减少错误，并且可以根据自己的需求进行配置。
4.Auto Rename Tag
在修改开头标签时，自动跟随修改结尾标签
5.AutoFileName
功能：快捷输入文件名
简介：自动完成文件名的输入，如图片选取
使用：输入”/”即可看到相对于本项目文件夹的其他文件
只要输入 src="" 输入双引号就立马出来当前目录的所有的目录地址 ，超级好用
6.Document This
"Document This"是一个Visual Studio code扩展，可自动为TypeScript和JavaScript文件生成详细的
JSDoc注释。
支持JSDoc和封闭编译器标签:@class、@description、@enum、@export、@function、@implements、@interface、@param、@private、@retums或@retum、@static、@template、@type、@memberOf和@date。
7.Error Lens
一款可以在VSCode中实时高亮显示代码错误的插件，支持多种编程语言，如JavaScript、TypeScript和C#。只需在VSCode扩展商店安装并配置语言设置，即可提高开发效率。
在安装完成后进入设置，搜索 typescript:locale 之后将区域设置更改成 zh-CN 就可以将错误提示语言更改为中文简体
8.HTML Boilerplate
此插件是一个HTML 模版插件，可以摆脱为 HTML 新文件重新编写头部和正文标签的苦恼。
只需在空文件中输入 html，并按 tab 键，即可生成干净的文档结构。也可以输入！，然后按tab键或者enter键来生成初始干净的文档结构。
9.HTML CSS Support
在VScode中提示CSS相关扩展 这是写CSS代码快捷神器
10.JavaScript (ES6) code snippets
此扩展包含Vs Code编辑器中 ES6 语法的JavaScript代码片段(同时支持JavaScript和TypeScript)，是写ES6语法的最佳神器，拥有补全ES6语法和检查的功效。
11.Path Intellisense
Path Intellisense是一个简单但极其实用的VSCode扩展，它可以智能感知并自动补全你在代码中引用的文件路径。只需输入几个字符，你就能快速找到目标文件，大大提高你的编码效率。
以上便是本人使用的工具和拓展，如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~
