eslint-plugin-jsonc

What is eslint-plugin-jsonc?

eslint-plugin-jsonc is an ESLint plugin that provides linting rules for JSON and JSONC (JSON with comments) files. It helps ensure consistency and correctness in JSON files by enforcing specific coding standards and best practices.

What are eslint-plugin-jsonc's main functionalities?

Enforce Consistent Indentation

This rule enforces consistent indentation in JSON files. The example configures the rule to use 2 spaces for indentation.

{
  "rules": {
    "jsonc/indent": ["error", 2]
  }
}

Disallow Trailing Commas

This rule disallows trailing commas in JSON files, which can help prevent syntax errors in environments that do not support them.

{
  "rules": {
    "jsonc/no-trailing-comma": "error"
  }
}

Require Property Keys to be in CamelCase

This rule enforces that property keys in JSON files are written in camelCase, promoting a consistent naming convention.

{
  "rules": {
    "jsonc/camelcase": "error"
  }
}

Disallow Comments

This rule disallows comments in JSON files, ensuring that the files remain pure JSON without any additional annotations.

{
  "rules": {
    "jsonc/no-comments": "error"
  }
}

Other packages similar to eslint-plugin-jsonc

eslint-plugin-json

eslint-plugin-json is another ESLint plugin for linting JSON files. It provides basic rules for JSON file validation but does not support JSONC (JSON with comments). It is simpler and may be more suitable for projects that do not require JSONC support.

jsonlint

jsonlint is a standalone JSON parser and validator. It can be used to check the syntax of JSON files and ensure they are valid. Unlike eslint-plugin-jsonc, jsonlint is not an ESLint plugin and does not integrate with ESLint's rule system.

README

Introduction

eslint-plugin-jsonc is ESLint plugin for JSON, JSONC and JSON5 files.

:name_badge: Features

This ESLint plugin provides linting rules relate to better ways to help you avoid problems when using JSON, JSONC and JSON5.

• You can use ESLint to lint JSON.
• You can apply rules similar to the rules you use for JavaScript to JSON using the "jsonc/auto" rule provided by this plugin.
• You can choose the appropriate config provided by this plugin depending on whether you are using JSON, JSONC or JSON5.
• Supports Vue SFC custom blocks such as <i18n>.
  Requirements vue-eslint-parser v7.3.0 and above.
• Supports ESLint directives. e.g. // eslint-disable-next-line
• You can check your code in real-time using the ESLint editor integrations.

You can check on the Online DEMO.

:question: Why is it ESLint plugin?

ESLint is a great linter for JavaScript.
Since JSON is a subset of JavaScript, the same parser and rules can be applied to JSON.
Also, JSONC and JSON5, which are variants of JSON, are more similar to JavaScript than JSON. Applying a JavaScript linter to JSON is more rational than creating a JSON-specific linter.

How does eslint-plugin-jsonc work?

This plugin parses .json with its own parser, but this parser just converts AST parsed by acorn (It is used internally by the ESLint standard parser) into AST with another name. However, ASTs that do not exist in JSON and the superset of JSON syntaxes are reported as parsing errors. By converting the AST to another name, we prevent false positives from ESLint core rules.
Moreover, You can do the same linting using the extended rules of the ESLint core rules provided by this plugin.

The parser package used by this plugin is jsonc-eslint-parser.

:question: How is it different from other JSON plugins?

Plugins that do not use AST

e.g. eslint-plugin-json

These plugins use the processor to parse and return the results independently, without providing the ESLint engine with AST and source code text.

Plugins don't provide AST, so you can't use directive comments (e.g. /* eslint-disable */).
Plugins don't provide source code text, so you can't use it with plugins and rules that use text (e.g. eslint-plugin-prettier, eol-last).
Also, most plugins don't support JSON5.

eslint-plugin-jsonc works by providing AST and source code text to ESLint.

Plugins that use the same AST as JavaScript

e.g. eslint-plugin-json-files, eslint-plugin-json-es

These plugins use the same AST as JavaScript for linting.

Since the plugin uses the same AST as JavaScript, it may not report syntax that is not available in JSON (e.g. 1 + 1, (42)). Also, ESLint core rules and other plugin rules can false positives (e.g. quote-props rule reports quote on keys), which can complicate the your configuration.

The AST used by eslint-plugin-jsonc is similar to JavaScript AST, but with a different node name. This will prevent false positives. This means that it can be easily used in combination with other plugins.

:book: Documentation

See documents.

:cd: 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

:book: Usage

Configuration

New Config (eslint.config.js)

Use eslint.config.js file to configure rules. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new.

Example eslint.config.js:

import eslintPluginJsonc from 'eslint-plugin-jsonc';
export default [
  // add more generic rule sets here, such as:
  // js.configs.recommended,
  ...eslintPluginJsonc.configs['flat/recommended-with-jsonc'],
  {
    rules: {
      // override/add rules settings here, such as:
    // 'jsonc/rule-name': 'error'
    }
  }
];

This plugin provides configs:

• *.configs['flat/base'] ... Configuration to enable correct JSON parsing.
• *.configs['flat/recommended-with-json'] ... Recommended configuration for JSON.
• *.configs['flat/recommended-with-jsonc'] ... Recommended configuration for JSONC.
• *.configs['flat/recommended-with-json5'] ... Recommended configuration for JSON5.
• *.configs['flat/prettier'] ... Turn off rules that may conflict with Prettier.
• *.configs['flat/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.

Legacy Config (.eslintrc)

Use .eslintrc.* file to configure rules. See also: https://eslint.org/docs/latest/use/configure/.

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.
• 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",
    },
  ],
  // ...
};

Experimental support for @eslint/json

We've launched experimental support for @eslint/json.

Configure it as follows:

import json from "@eslint/json";
import jsonc from 'eslint-plugin-jsonc';

export default [
  {
    plugins: {
      json,
      jsonc
    },
  },
  {
    files: ["**/*.json"],
    language: "json/json",
    rules: {
      // 'json/rule-name': 'error',
      // 'jsonc/rule-name': 'error'
    },
  },
  {
    files: ["**/*.jsonc", ".vscode/*.json"],
    language: "json/jsonc",
    rules: {
      // 'json/rule-name': 'error',
      // 'jsonc/rule-name': 'error'
    },
  },
  {
    files: ["**/*.json5"],
    language: "json/json5",
    rules: {
      // 'json/rule-name': 'error',
      // 'jsonc/rule-name': 'error'
    },
  },
];

However, we're not yet sure how best to make this work. Please note that we may change behavior without notice.

:computer: Editor Integrations

Visual Studio Code

Use the dbaeumer.vscode-eslint 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"]
}

:white_check_mark: Rules

The --fix option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
The rules with the following star :star: are included in the config.

JSONC Rules

Rule ID	Description	Fixable	JSON	JSONC	JSON5
jsonc/auto	apply jsonc rules similar to your configured ESLint core rules	:wrench:
jsonc/key-name-casing	enforce naming convention to property key names
jsonc/no-bigint-literals	disallow BigInt literals		:star:	:star:	:star:
jsonc/no-binary-expression	disallow binary expression	:wrench:	:star:	:star:	:star:
jsonc/no-binary-numeric-literals	disallow binary numeric literals	:wrench:	:star:	:star:	:star:
jsonc/no-comments	disallow comments		:star:
jsonc/no-escape-sequence-in-identifier	disallow escape sequences in identifiers.	:wrench:	:star:	:star:	:star:
jsonc/no-hexadecimal-numeric-literals	disallow hexadecimal numeric literals	:wrench:	:star:	:star:
jsonc/no-infinity	disallow Infinity		:star:	:star:
jsonc/no-nan	disallow NaN		:star:	:star:
jsonc/no-number-props	disallow number property keys	:wrench:	:star:	:star:	:star:
jsonc/no-numeric-separators	disallow numeric separators	:wrench:	:star:	:star:	:star:
jsonc/no-octal-numeric-literals	disallow octal numeric literals	:wrench:	:star:	:star:	:star:
jsonc/no-parenthesized	disallow parentheses around the expression	:wrench:	:star:	:star:	:star:
jsonc/no-plus-sign	disallow plus sign	:wrench:	:star:	:star:
jsonc/no-regexp-literals	disallow RegExp literals		:star:	:star:	:star:
jsonc/no-template-literals	disallow template literals	:wrench:	:star:	:star:	:star:
jsonc/no-undefined-value	disallow undefined		:star:	:star:	:star:
jsonc/no-unicode-codepoint-escapes	disallow Unicode code point escape sequences.	:wrench:	:star:	:star:	:star:
jsonc/sort-array-values	require array values to be sorted	:wrench:
jsonc/sort-keys	require object keys to be sorted	:wrench:
jsonc/valid-json-number	disallow invalid number for JSON	:wrench:	:star:	:star:
jsonc/vue-custom-block/no-parsing-error	disallow parsing errors in Vue custom blocks		:star:	:star:	:star:

Extension Rules

Rule ID	Description	Fixable	JSON	JSONC	JSON5
jsonc/array-bracket-newline	enforce line breaks after opening and before closing array brackets	:wrench:
jsonc/array-bracket-spacing	disallow or enforce spaces inside of brackets	:wrench:
jsonc/array-element-newline	enforce line breaks between array elements	:wrench:
jsonc/comma-dangle	require or disallow trailing commas	:wrench:	:star:
jsonc/comma-style	enforce consistent comma style	:wrench:
jsonc/indent	enforce consistent indentation	:wrench:
jsonc/key-spacing	enforce consistent spacing between keys and values in object literal properties	:wrench:
jsonc/no-dupe-keys	disallow duplicate keys in object literals		:star:	:star:	:star:
jsonc/no-floating-decimal	disallow leading or trailing decimal points in numeric literals	:wrench:	:star:	:star:
jsonc/no-irregular-whitespace	disallow irregular whitespace
jsonc/no-multi-str	disallow multiline strings		:star:	:star:
jsonc/no-octal-escape	disallow octal escape sequences in string literals
jsonc/no-octal	disallow legacy octal literals		:star:	:star:	:star:
jsonc/no-sparse-arrays	disallow sparse arrays		:star:	:star:	:star:
jsonc/no-useless-escape	disallow unnecessary escape usage		:star:	:star:	:star:
jsonc/object-curly-newline	enforce consistent line breaks inside braces	:wrench:
jsonc/object-curly-spacing	enforce consistent spacing inside braces	:wrench:
jsonc/object-property-newline	enforce placing object properties on separate lines	:wrench:
jsonc/quote-props	require quotes around object literal property names	:wrench:	:star:	:star:
jsonc/quotes	enforce use of double or single quotes	:wrench:	:star:	:star:
jsonc/space-unary-ops	disallow spaces after unary operators	:wrench:	:star:	:star:	:star:

:rocket: To Do More Verification

Verify using JSON Schema

You can verify using JSON Schema by checking and installing eslint-plugin-json-schema-validator.

Verify the Vue I18n message resource files

You can verify the message files by checking and installing @intlify/eslint-plugin-vue-i18n.

:traffic_light: Semantic Versioning Policy

eslint-plugin-jsonc follows Semantic Versioning and ESLint's Semantic Versioning Policy.

:beers: Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

Development Tools

• npm test runs tests and measures coverage.
• npm run update runs in order to update readme and recommended configuration.

:couple: Related Packages

• eslint-plugin-yml ... ESLint plugin for YAML.
• eslint-plugin-toml ... ESLint plugin for TOML.
• eslint-plugin-json-schema-validator ... ESLint plugin that validates data using JSON Schema Validator.
• jsonc-eslint-parser ... JSON, JSONC and JSON5 parser for use with ESLint plugins.
• yaml-eslint-parser ... YAML parser for use with ESLint plugins.
• toml-eslint-parser ... TOML parser for use with ESLint plugins.

:lock: License

See the LICENSE file for license rights and limitations (MIT).