初入前端，你一定要安装的VS Code插件

这几天看了一些刚学习前端#前端#的新人发来代码，总结几款易用的插件，可供规范代码和提升开发效率。

 

VS Code （https://code.visualstudio.com/）

首先2020年了，竟然真的还有同学竟然真的还有使用纯文本编辑器写代码。可能也和当年学习前端的我一样。看到有教程说，一定要注重基本功，在没用代码提示和代码错误提示的前提下，写出顺利运行的代码。这种类似苦行僧的学习方法，不讨论实际意义，对于新人其实是低效的，会把他们从有趣轻松的代码编辑带进记忆和报错的深渊。

所以首先给大家推荐的正是代码基石，天下无敌的VS Code。

 

其由巨硬微软#微软#以Electron开发，优秀的性能，丰富的插件，快速的个性化配置。对于前端同学还有一个天然的激励效果因为他是由typescript开发的。

ESlint

 

ESlint是javascript代码，发现问题，自动修正，和推行团队规范的利器。这里推荐所有前端开发人员安装。另外使用typescript开发的同学，也请安装，因为tslint团队不再维护tslint，推荐使用eslint。

在VScode中ESlint中的安装非常简便，在扩展商店中，搜索ESlint。按照其安装说明安装即可。

 

有一点说明下，若要开启保存自动修正，需要在VScode中如下配置即可。

 

GitLens

如果你已经通过学习进入一个团队开发，并且团队使用git管理代码的话。这边一定推荐GitLens，帮助你更好的团（jing）队（xing）开（si）发（bi）。

他的功能只有一个，在光标处于的那还代码尾部，显示提交这行代码的时间，hash,作者。

特别是作者！嗯，大家自行体会。

Debugger for chrome

这个插件帮助你可以在VScode中打断点，动态插入代码。

关于配置可以看下。

{
    "version": "0.1.0",
    "configurations": [
      	// 这份配置是针对服务
        {            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
          	//启动页面
            "url": "http://localhost:8080/index",
          	//文件映射根目录
            "webRoot": "${workspaceFolder}/wwwroot"
        },      	// 这份配置是针对本地文件的
        {            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/index.html"
        },    ]}

调试js代码就靠它了。

 

如果你不想折腾繁琐的配置，看下这边文章IDE的大户：JetBrains，他们的IDE, webstorm可以让你把更快的进入丝滑开发。

以上就是我认为在工具层面，对前端学习有所帮助的插件了。

大家有什么好的想法可以发在评论里。