VSCode

作者: 陈裔松的技术博客 | 来源:发表于2018-12-11 10:56 被阅读0次

VSCode是微软提供的一款轻量级代码编辑器,个人非常喜欢。
以下是一些比较好用的插件介绍:

vscode-icons

给vscode 资源树目录加上图标

Path Intellisense

自动路劲补全

View InBrowser

在浏览器中打开HTML文件
安装完之后直接在VSCode中右击HTML文件就可以在浏览器中打开了

Debugger for Chrome

让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试。

配置:
安装完之后会弹出以下配置文件,把url改成你的项目地址就可以了。
比如我现在正在做的一个React项目,地址是localhost:3000,那么就把url改成"http://localhost:3000"

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

使用:(以React项目为例)
第一步,在终端中输入yarn start启动项目
第二步,在需要调试的地方打上断点
第三步,按F5启动调试。当你在页面上的操作触发断点时,可以调试看到相关变量的值。

HTMLHint

html代码检测

HTML Snippets

H5代码片段以及提示

JavaScript (ES6) code snippets

JavaScript 代码片段以及提示
clg -> console.log

beautify

格式化代码的工具

Easy LESS

根据LESS文件自动生成CSS文件

jQuery Code Snippets

jQuery代码提示,必备良品

相关文章

网友评论

      本文标题:VSCode

      本文链接:https://www.haomeiwen.com/subject/uprshqtx.html