前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VS Code教程(JSON)

VS Code教程(JSON)

作者头像
云深无际
发布2021-04-14 11:22:47
5.2K0
发布2021-04-14 11:22:47
举报
文章被收录于专栏:云深之无迹云深之无迹

用json来配置你的编辑器,可以说是你从菜鸟迈向高阶玩家的必经之路.不管你是不是对于JSON很熟悉或者很懂,文章前面的部分会对JSON做一些简单的介绍.

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。

JSON建构于两种结构:

“名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。

值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式:

对象是一个无序的“‘名称/值’对”集合。一个对象以 {左括号 开始, }右括号 结束。每个“名称”后跟一个 :冒号 ;“‘名称/值’ 对”之间使用 ,逗号 分隔。

数组是值(value)的有序集合。一个数组以 [左中括号 开始, ]右中括号 结束。值之间使用 ,逗号 分隔。

值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。这些结构可以嵌套。

字符串(string)是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义。一个字符(character)即一个单独的字符串(character string)。

字符串(string)与C或者Java的字符串非常相似。

数值(number)也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。

这就是json的样子.

注意看,这是在编辑器中样子

JSON是配置文件(例如package.json或)中常见的数据格式project.json。我们还在Visual Studio Code中将其广泛用于我们的配置文件。当打开以结尾的文件时.json,VS Code提供的功能使编写或修改文件内容变得更加简单。

IntelliSense和验证

对于具有或不具有模式的JSON数据的属性和值,当您使用IntelliSense键入时,我们会提供建议。您还可以使用“ 触发建议”命令(Ctrl + Space)手动查看建议。我们还基于关联的JSON模式执行结构和价值验证,从而为您提供红色的花样。

包和项目的依赖

我们还提供智能感知特定值的集合,如包装和项目依赖package.jsonproject.jsonbower.json

快速导航

JSON文件可能会很大,我们支持使用“ 转到符号”命令(Ctrl + Shift + O)快速导航到属性。

盘旋

当您将鼠标悬停在带有或不带有模式的JSON数据的属性和值上时,我们将提供其他上下文。

格式化

您可以使用Shift + Alt + F或从上下文菜单中的“ 格式化文档”来格式化JSON文档。

折叠式

您可以使用装订线在行号和行首之间的折叠图标来折叠源代码区域。折叠区域可用于所有对象和数组元素。

带有注释的JSON

除了遵循JSON规范的默认JSON模式外,VS Code还具有带注释的JSON(jsonc)模式。该模式用于VS代码配置文件,如settings.jsontasks.json,或launch.json。在带注释的JSON模式下,您可以使用JavaScript中使用的单行(//)以及块注释(/ * * /)。当前的编辑器模式在编辑器的状态栏中显示。单击模式指示器以更改模式并配置文件名和扩展名与模式的关联方式。

JSON模式和设置

为了了解JSON文件的结构,我们使用JSON模式。JSON模式描述JSON文件的形状以及值集,默认值和描述。VS Code附带的JSON支持支持JSON Schema Draft 7。

诸如JSON Schema Store之类的服务器为大多数常见的基于JSON的配置文件提供了架构。但是,也可以在VS Code工作区中的文件以及VS Code设置文件中定义架构。

可以使用$schema属性在JSON文件本身中,也可以在属性下的用户或工作区设置(文件 > 首选项 > 设置)中完成JSON文件与模式的关联json.schemas

VS Code扩展还可以定义架构和架构映射。这就是为什么VS代码已经知道一些知名JSON的模式文件,如package.jsonbower.jsontsconfig.json

JSON映射

在以下示例中,JSON文件指定其内容遵循CoffeeLint模式。

代码语言:javascript
复制
{
  "$schema": "http://json.schemastore.org/coffeelint",
  "line_endings": "unix"
}

请注意,此语法是特定于VS Code的,而不是JSON Schema规范的一部分。添加$schema密钥会更改JSON本身,使用JSON的系统可能不会想到,例如,架构验证可能会失败。在这种情况下,可以使用其他映射方法之一。

用户设置中的映射

以下来自用户设置的摘录显示了.babelrc文件如何映射到位于http://json.schemastore.org/babelrc上的babelrc模式。

代码语言:javascript
复制
"json.schemas": [
    {
        "fileMatch": [
            "/.babelrc"
        ],
        "url": "http://json.schemastore.org/babelrc"
    }
]

提示:除了为定义架构之外.babelrc,还请确保该架构.babelrc与JSON语言模式相关联。也可以使用files.association数组设置在设置中完成此操作。

映射到工作空间中的架构

要映射位于工作空间中的架构,请使用相对路径。在此示例中,工作空间根目录中名为的文件myschema.json将用作以结尾的所有文件的模式.foo.json

代码语言:javascript
复制
"json.schemas": [
    {
        "fileMatch": [
            "/*.foo.json"
        ],
        "url": "./myschema.json"
    }
]

映射到设置中定义的架构

要映射“用户”或“工作区”设置中定义的架构,请使用该schema属性。在此示例中,定义了一个架构,该架构将用于名为的所有文件.myconfig

代码语言:javascript
复制
"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

在扩展中映射模式

模式和模式关联也可以通过扩展定义。查看jsonValidation贡献点。

文件匹配语法

文件匹配语法支持'*'通配符。另外,您可以定义排除模式,以“!”开头。为了使关联匹配,至少需要匹配一个模式,并且最后一个匹配模式不得为排除模式。

代码语言:javascript
复制
  "json.schemas": [
    {
      "fileMatch": [
        "/receipts/*.json",
        "!/receipts/*.excluded.json"
      ],
      "url": "./receipts.schema.json"
    }
  ]

在JSON模式中定义代码片段

JSON模式描述了JSON文件的形状以及值集和默认值,JSON语言支持人员使用它们来提供完成建议。如果您是架构作者,并且想提供更多的自定义完成建议,则还可以在架构中指定摘要。

以下示例显示了用于定义代码段的键绑定设置文件的架构:

代码语言:javascript
复制
{
    "type": "array",
    "title": "Keybindings configuration",
    "items": {
        "type": "object",
        "required": ["key"],
        "defaultSnippets": [
            {
                "label": "New keybinding",
                "description": "Binds a key to a command for a given state",
                "body": { "key": "$1", "command": "$2", "when": "$3" }
            }
        ],
        "properties": {
            "key": {
                "type": "string"
            }
            ...
        }
    }
}

这是JSON模式中的示例:

使用该属性defaultSnippets可以为给定的JSON对象指定任意数量的代码段。

  • label并将description显示在完成选择对话框中。如果未提供标签,则代码段的字符串化对象表示将显示为标签。
  • body是当用户选择完成时被字符串化并插入的JSON对象。片段语法可以在字符串文字中使用,以定义制表符,占位符和变量。如果字符串以开头^,则字符串内容将原样插入,而不是按字符串插入。您可以使用它来指定数字和布尔值的代码段。

请注意,这defaultSnippets不是JSON模式规范的一部分,而是VS代码特定的模式扩展。

离线模式

json.schemaDownload.enable控制JSON扩展是否从http和获取JSON模式https

当前编辑器想要使用无法下载的架构时,状态栏中会显示一个警告三角形。

用户设置与工作空间设置

VS Code提供了两种设置方式:

- 用户设置:这种方式进行的设置,会应用于该用户打开的所有工程;

- 工作空间设置:工作空间是指使用VS Code打开的某个文件夹,在该文件夹下会创建一个名为.vscode的隐藏文件夹,里面包含着**仅适用于当前目录的**VS Code的设置。工作空间的设置会覆盖用户的设置。

如果没有,就自己创建,然后添加一个json文件

每个人都有自己的偏好,在使用VS Code进行开发时,都会根据自己的习惯来对VS Code进行用户级别的配置。

但是,当多人共同完成某个项目的时候,该项目会有一定的编码规范,如: 编辑某个语言时的设置,代码的缩进等等,这个时候就需要对该项目进行单独的工作空间级别的设置。

更改默认用户设置与工作空间设置

VS Code的设置文件为setting.json。

用户设置的文件保存在如下目录:

- Window %APPDATA%\Code\User\settings.json

- Mac $HOME/Library/Application Support/Code/User/settings.json

- Linux $HOME/.config/Code/User/settings.json

工作空间设置的文件保存在当前目录的.vscode文件夹下。

所以有三种方式更改默认的设置:

- 使用编辑器直接打开setting.json文件;

- 点击 VS Code 的 文件 > 首选项 > 设置 ,可以打开设置面板;

- 在 VS Code 中使用 Ctrl+Shift+P打开命令面板,输入Preferences: Open User Settings或Preferences: Open Workspace Settings。

有可视化的配置方式,也有json的配置方式

对工作区配置

或是对当前文件夹进行设置,这是最新更新拥有的功能

这个是json的配置方式

如果没有这个文件,调出命令板->Open Workspace Settings执行一下

对当前文件夹进行精细化操作,在UI界面里面更改了两个设置,实时的反映到了json文件里面.


但是对当前工作区区域的更改并没有反应到这个文件中,但是他是反映到

这个文件中

但是这个工作区的json并不是在当前工作木中保存而是在appdata的文件夹里面

尝试工作区命名为中文名字.报错.这个地方不是报错,就是我也不知道怎么回事,你关闭编辑器,重新打开试试.

代码语言:javascript
复制
C:\Users\yunswj\AppData\Roaming\Code\Workspaces

要是不想设置到一长串的路径里面,点图中所示的地方

可以看到配置文件在.vscode中


以后可以把这个文件复制到另一个文件夹中,自动配置.省的自己配置.也可以,各种语言,各种项目单独配置.

好处就是没有环境污染问题.

对某个语言进行特定配置

可以对某个语言进行专门的设定。在 VS Code 中使用 Ctrl+Shift+P打开命令面板,输入Preferences: Configure language specific settings…,然后选择相应的语言进行设置。

也可以直接对setting.json进行编辑。如下:

注意settings是对当前文件夹生效,右边是全局配置.

一定是配置文件用

{

}

这个东西括起来,一定是这样写,如果不懂看我的图.

代码语言:javascript
复制
{
  "[语言]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
  },
  "[markdown]": {
    "editor.formatOnSave": true,
    "editor.wordWrap": "on",
    "editor.renderWhitespace": "all",
    "editor.acceptSuggestionOnEnter": "off"
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-07-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 云深之无迹 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • IntelliSense和验证
    • 包和项目的依赖
    • 快速导航
    • 盘旋
    • 格式化
    • 折叠式
    • 带有注释的JSON
    • JSON模式和设置
      • JSON映射
        • 用户设置中的映射
          • 映射到工作空间中的架构
            • 映射到设置中定义的架构
              • 在扩展中映射模式
                • 文件匹配语法
                  • 在JSON模式中定义代码片段
                    • 离线模式
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档