# User Guide

# 💿 Installation

npm install --save-dev eslint eslint-plugin-jsonc

Requirements

  • ESLint v6.0.0 and above
  • Node.js v12.22.x, v14.17.x, v16.x and above

# 📖 Usage

# Configuration

Use .eslintrc.* file to configure rules. See also: https://eslint.org/docs/user-guide/configuring (opens new window).

Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    "plugin:jsonc/recommended-with-jsonc",
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'jsonc/rule-name': 'error'
  },
};

This plugin provides configs:

  • plugin:jsonc/base ... Configuration to enable correct JSON parsing.
  • plugin:jsonc/recommended-with-json ... Recommended configuration for JSON.
  • plugin:jsonc/recommended-with-jsonc ... Recommended configuration for JSONC.
  • plugin:jsonc/recommended-with-json5 ... Recommended configuration for JSON5.
  • plugin:jsonc/prettier ... Turn off rules that may conflict with Prettier (opens new window).
  • plugin:jsonc/all ... Enables all rules. It's meant for testing, not for production use because it changes with every minor and major version of the plugin. Use it at your own risk.

This plugin will parse .json, .jsonc and .json5 by default using the configuration provided by the plugin (unless you already have a parser configured - see below).

See the rule list to get the rules that this plugin provides.

# Parser Configuration

If you have already specified a parser in your .eslintrc, you will also need to manually configure the parser for JSON files (your parser config takes priority over that defined by extends shared configs).

For example, if you are using the "@babel/eslint-parser", configure it as follows:

module.exports = {
  // ...
  extends: ["plugin:jsonc/recommended-with-jsonc"],
  // ...
  parser: "@babel/eslint-parser",
  // Add an `overrides` section to add a parser configuration for json.
  overrides: [
    {
      files: ["*.json", "*.json5", "*.jsonc"],
      parser: "jsonc-eslint-parser",
    },
  ],
  // ...
};

# 💻 Editor Integrations

# Visual Studio Code

Use the dbaeumer.vscode-eslint (opens new window) extension that Microsoft provides officially.

You have to configure the eslint.validate option of the extension to check .json files, because the extension targets only *.js or *.jsx files by default.

Example .vscode/settings.json:

{
  "eslint.validate": ["javascript", "javascriptreact", "json", "jsonc", "json5"]
}

# ❓ FAQ

# How to parse files other than .json, .jsonc and .json5?

This plugin will parse .json, .jsonc and .json5 using the configuration provided by the plugin. To parse other extensions, you need to add a setting to your configuration.

Example .eslintrc.js:

module.exports = {
  // ...
  // Add the following settings.
  overrides: [
    {
      files: ["*.json6"], // If you want to parse `.json6`
      parser: "jsonc-eslint-parser", // Set jsonc-eslint-parser.
    },
  ],
}

# How to verify JSON using JSON Schema?

You can verify using JSON Schema by checking and installing eslint-plugin-json-schema-validator (opens new window). I believe it will help you.

Last Updated: 9/28/2022, 11:33:48 AM