eslint-plugin-jsonc
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Introduction

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

    NPM license NPM version NPM downloads NPM downloads NPM downloads NPM downloads NPM downloads Build Status Coverage Status

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

    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.

    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.

    📖 Documentation

    See documents.

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

    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.

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

    Parser Configuration

    If you have specified a parser, you need to configure a parser for .json.

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

    Running ESLint from the command line

    If you want to run eslint from the command line, make sure you include the .json extension using the --ext option or a glob pattern, because ESLint targets only .js files by default.

    Examples:

    eslint --ext .js,.json src
    eslint "src/**/*.{js,json}"

    💻 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"]
    }

    Rules

    The --fix option on the command line automatically fixes problems reported by rules which have a wrench 🔧 below.
    The rules with the following 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 🔧
    jsonc/key-name-casing enforce naming convention to property key names
    jsonc/no-bigint-literals disallow BigInt literals
    jsonc/no-binary-expression disallow binary expression 🔧
    jsonc/no-binary-numeric-literals disallow binary numeric literals 🔧
    jsonc/no-comments disallow comments
    jsonc/no-escape-sequence-in-identifier disallow escape sequences in identifiers. 🔧
    jsonc/no-hexadecimal-numeric-literals disallow hexadecimal numeric literals 🔧
    jsonc/no-infinity disallow Infinity
    jsonc/no-nan disallow NaN
    jsonc/no-number-props disallow number property keys 🔧
    jsonc/no-numeric-separators disallow numeric separators 🔧
    jsonc/no-octal-numeric-literals disallow octal numeric literals 🔧
    jsonc/no-parenthesized disallow parentheses around the expression 🔧
    jsonc/no-plus-sign disallow plus sign 🔧
    jsonc/no-regexp-literals disallow RegExp literals
    jsonc/no-template-literals disallow template literals 🔧
    jsonc/no-undefined-value disallow undefined
    jsonc/no-unicode-codepoint-escapes disallow Unicode code point escape sequences. 🔧
    jsonc/valid-json-number disallow invalid number for JSON 🔧
    jsonc/vue-custom-block/no-parsing-error disallow parsing errors in Vue custom blocks

    Extension Rules

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

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

    🚥 Semantic Versioning Policy

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

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

    👫 Related Packages

    🔒 License

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

    Install

    npm i eslint-plugin-jsonc

    DownloadsWeekly Downloads

    33,949

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    131 kB

    Total Files

    62

    Last publish

    Collaborators

    • ota-meshi