Repository files navigation

eslint-plugin-jsonc is ESLint plugin forJSON,JSONC andJSON5 files.

This ESLint plugin provides linting rules relate to better ways to help you avoid problems when usingJSON,JSONC andJSON5.

• You can use ESLint to lintJSON.
• 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 usingJSON,JSONC orJSON5.
• SupportsVue SFC custom blocks such as<i18n>.
  Requirementsvue-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 theOnline DEMO.

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

This plugin parses.json with its own parser, but this parser just converts AST parsed byacorn (It is used internally by the ESLint standard parser) into AST with another name. However, ASTs that do not exist inJSON 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 isjsonc-eslint-parser.

They work similarly, but@eslint/json is an ESLint JSON language plugin, buteslint-plugin-jsonc is an ESLint plugin.

• eslint-plugin-jsonc was created 4 years before@eslint/json and it has more rules than@eslint/json.
• The parser used byeslint-plugin-jsonc accepts more non-standard JSON syntax than@eslint/json.eslint-plugin-jsonc has rules that can auto-fixed these non-standard syntax to standard syntax.
• eslint-plugin-jsonc can also be used together with@eslint/json.

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.

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 byeslint-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.

Seedocuments.

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

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

Exampleeslint.config.js:

importeslintPluginJsoncfrom'eslint-plugin-jsonc';exportdefault[// 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 withPrettier.
• *.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).

Seethe rule list to get therules that this plugin provides.

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 withPrettier.
• 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).

Seethe rule list to get therules that this plugin provides.

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

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

Configure it as follows:

importjsonfrom"@eslint/json";importjsoncfrom'eslint-plugin-jsonc';exportdefault[{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.

Use thedbaeumer.vscode-eslint extension that Microsoft provides officially.

You have to configure theeslint.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"]}

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

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

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

eslint-plugin-jsonc followsSemantic Versioning andESLint's Semantic Versioning Policy.

Welcome contributing!

Please use GitHub's Issues/PRs.

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

• 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.

See theLICENSE file for license rights and limitations (MIT).