vscode格式化json（vscode格式化json代码）

本篇文章给大家谈谈vscode格式化json，以及vscode格式化json代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、VSCODE 可无缝调试浏览器了！
• 2、vscode 中的beautify 插件怎么用
• 3、vue VSCode 开发设置（html自动补全、eslint保存时格式化、vetur 格式化html）
• 4、设置vscode的格式化代码

VSCODE 可无缝调试浏览器了！

2021-07-16 微软发布了一篇博客专门介绍了这个功能，VSCODE 牛逼！

在此之前，你想要在 vscode 内调试 chrome 或者 edge 需要借助于 Chrome Debugger 或者 the Microsoft Edge Debugger extension 这两款 vscode 扩展。

并且更重要的是，其仅能提供耐芦最基本的控制台功能，其他的诸如 network，element 是无法查看的，我们仍然需要到浏览器中查看。

更新之后，我们可以直接在 vscode 中 open link in chrome or edge，并且 「直接在 vscode 内完成诸如查看 element，network 等几乎所有的常见调试需要用到的功能」 。

效果截图：

使用方式非常简单，大家只需要在前端项目中按 F5 触发调试并进行简单的配置即可。这里给大家贴一份 lauch.json 配置，有了它就可以直接开启调试浏览器了。

原理其实和 chrome debugger 扩展原理类似。也是基于 Chrome 的 devtool 协议，建立 「websocket 链接。通过发送格式化的 json 数据进行交互」 ，这样 vscode 就可以动态拿到运行时的一些信息。比如浏览器网络线程发送的请求以及 DOM 节点信息。

你可以通过 「chrome devtool protocol」 拿到很多信息，比如上面提到的 network 请求。

由于是 websocket 建立的双向链接昌肆带，因此在 VSCODE 中改变 dom 等触发浏览器的修改也变得容易。我们只需要在 VSCODE（websocket client） 中操作后通过 websocket 发送一条 JSON 数雹雀据到浏览器（websocket server）即可。浏览器会根据收到的 JSON 数据进行一些操作，从效果上来看 「和用户直接在手动在浏览器中操作并无二致。」

值得注意的，chrome devtool protocol 的客户端有很多，不仅仅是 NodeJS 客户端，Python，Java，PHP 等各种客户端一应俱全。

vscode 中的beautify 插件怎么用

1、在VSCODE中打开JSON文件，未格式化之前所JSON的数据全部都是贴在一起的，非常不容易阅读。

2、快捷键：CTRL+ALT+P打开搜索命令的窗口，在输入框内输入：extensions后找到【Install Extensions】选项后点击打开安装扩展程序窗口。

3、安装JSON美化插件在插件搜索框内搜索json并找到【Pretty JSON】插件，点击插件右下烂李银方的【Install】按钮进行安装。安装好后点击【Reload】按钮重新加载。

4、格式化JSON文件，在JSON文件内打开右键菜单会发现多了一个选项【Format Document】快捷键为【ALT+SHILF+F】。这时就可以格式美化JSON数据饥宴。扰哪

vue VSCode 开发设置（html自动补全、eslint保存时格式化、vetur 格式化html）

File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

方法1：File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

Setting.json

方法2：File - Preference - 搜索框输入：files.autoSave

之后能看到 files.autoSave 的可选项有

off : 关闭自动保存（默认）

afterDelay: 延迟xx时间后保存，可在 "files.autoSaveDelay" 中配置延迟时间；

onFocusChange: 编辑器失去焦点时自动保存；

onWindowChange: 窗口失去焦点时(编辑器窗口的切换，桌面窗口的切换)自动保存；

安装 ESLint

vscode 中安装 ESLint 插件

然后配置 vscode 的 setting.json

File - Preference - User Snippers

vue.json文件，然后添加下面模板

然后新建.vue文件 ，写下vue然后Tap键就能生成什么的模板。

如果没有生成模板只是多了个空格或者生成的是vue标签的话，我们还得设置一下，打开settings.json，添加下面的设置

如果你的Setting.json文逗租件有 "files.associations" 设置的话，请删除，因为他会和上面 emmet.syntaxProfiles 冲突。

files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全山带兆，如果是要用.vue模板补全功能的话，html标签补全我们就用 emmet.syntaxProfiles 来设置。

vue 的开发中 vscode 可装用于开发规范的插件有

Prettier ：规范js

ESLint: 规范js

Vuter: 规范 .vue 文件中 template

stylus: 规范 stylus

注意：以下配置是基于接下来介绍的插件设置的，如果没有安装插件是不会生效的。

或者：

其中：

4.如果使用了stylus，那么vscode安装stylus插件，进行设置，不适用冒号双引号大括号

根目录下行行创建eslint规则文件 .eslintrc.js

（下面browsers 多了s 正确的为 browser ）

设置vscode的格式化代码

1.在vscode中安装插件灶塌岁 Prettier - Code formatter

2.在设置中搜索隐睁pettier,找到Tab Width 更改为4

1.在设置中搜索 Code Actions On Save

2.点击setting.json配置文件加入衫仔以下配置

[img]

关于vscode格式化json和vscode格式化json代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。