常用的vscode前端插件

Live Server

Ritwick Dey的这个很酷的扩展为您的静态和动态页面创建了一个开发本地服务器。任务栏上会出现一个上线按钮，因此您可以将代码无缝地作为开发服务器运行。它还带有一个闪亮的功能：Live Reload，可以在您保存工作后立即重新加载页面。

Live Sass编译器

Ritwick Dey的这个扩展将你的scss文件编译成css文件，就像node-sass一样快速和实时。通过任务栏上的watch-my-sass按钮，它可以在首选浏览器中显示已编译样式的实时预览，同时还具有实时重新加载功能。

Javascript代码片段

Charalampos Karypidis的这一扩展包含超过200万的下载和计数，提供了ECMAscript 6语法中的javascript代码片段，同时使用了javascript文件和其他文件，如Typescript，Javascript React，Typescript React。

NPM

这是VS Code上的官方Node Package Manager支持。它有助于以任何可想象的方式管理package.json文件。它标记了已定义但未安装的依赖项的警告，或者已安装但未在package.json中定义的依赖项的警告，它还表示软件包的版本控制存在差异。它还提供了快速运行npm命令和简单的快捷方式。

ESLint

这里是你的Javascript和jsx的所有linting。可插拔，并确保您坚持标准做法，如缩进和定位等等。它是VS Code中下载次数最多的扩展之一，下载量近1200万

Prettier

这是Esben Petersen非常受欢迎的扩展。它目前拥有近400万次下载。它有助于格式化Javascript代码，颜色关键字，使您的代码易于阅读。有类似的扩展，其中一个受欢迎的是美化（也可在市场上买到）

CSS Peek

Pranay Prakash的这个非常有用的扩展通过识别和枚举已经应用于所述元素的不同样式来帮助我们处理标记语言类字符串和ID。这非常有用，因为它为我们节省了大量时间来回传递html和css文件，并且对于不喜欢分屏的开发人员来说也很方便。

Vetur

Vetur一直致力于帮助Vue js开发更轻松。它具有错误检查功能，代码自动完成功能，并且还支持提供代码段。 Vue开发人员还可以在这里获得有关聚会和会议的最新更新，真的很酷。

适用于Chrome的调试器

这是Chrome的VS Code官方调试器扩展。目前是VS Code市场上最常用的扩展之一。它可以帮助您直接从VS Code调试在Chrome浏览器中运行的js文件，这有多酷？它拥有众多专门的贡献者，并且为前端开发人员提供了很多便利。

设置编辑器背景图片

1、下载扩展：background
2、background.usedefault： false
3、在setting.json中
    """
        "background.customImages": [
        "file:///C:/Users/Administrator/Pictures/Microsoft.Windows.Photos_8wekyb3d8bbwe!App/timg.jpg"
    ],
    "background.style": {
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "right",
        "background-repeat": "no-repeat",
        "background-size": "100%,100%",
        "opacity": 0.2
    },
        "background.useDefault": false
    }
    """