eslint-plugin-json-format

An ESLint plugin to lint, format, auto-fix, and sort your json files.

Features

lint, format, and auto-fix json files (files ending with .json or rc)
auto-sort package.json files (default true, can be disabled and sorting configured)
ignores json-with-comments files (default ["**/.tsconfig.json", ".vscode/**"])
ignores certain files by default (default ["**/package-lock.json"])

Installation

You'll first need to install ESLint:

npm install eslint --save-dev

Next, install eslint-plugin-json-format:

npm install eslint-plugin-json-format --save-dev

Usage

Add json-format to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": [
    "json-format"
  ]
}

Optional: setup editor integration to format-on-save

cli example:

# lint entire poject for js and various json files
eslint --ext .js,.json,.eslintrc,.babelrc --fix .

Note: In order to lint hidden files (e.g. .eslintrc.json), you'll need to modify/create a .eslintignore in your project root with these contents: .eslintignore:

# eslint ignores hidden files by default
!.*.json
**/node_modules

Settings

default settings (`.eslintrc`):

"settings": {
  "json/sort-package-json": "standard",
  "json/ignore-files": ["**/package-lock.json"],
  "json/json-with-comments-files": ["**/tsconfig.json", ".vscode/**"],
}

Note: glob patterns use minimatch against path names relative to the project root (cwd)

`sort-package-json` order

You can configure the exact sort order of your package.json files (or turn it off entirely with false)

Available sorting options

false: disable package.json sorting.

"standard": default from sort-package-json. This is a sane, standard order.

"pro": places scripts and dependencies at the top, reducing need to scroll down to view them. Pros only.

["your", "custom", "order", "here"]: provide an array to manually set the sort order.

Settings examples

to turn off sorting package.json files for example, in your .eslintrc:

{
  "plugins": [
    "json-format"
  ],
  "settings": {
    "json/sort-package-json": false,
  }
}

to format tsconfig.json (this will strip comments!), in your .eslintrc:

{
  "plugins": [
    "json-format"
  ],
  "settings": {
    "json/json-with-comments-files": [],
  }
}

change the sort order of package.json:

{
  "plugins": [
    "json-format"
  ],
  "settings": {
    "json/sort-package-json": ["license", "dependencies"],
  }
}

Editor Configuration

VSCode:

In order for editor integration via the vscode-eslint extension, you'll need to enable linting json files.

.vscode/settings.json:

{
  "eslint.enable": true,
  "editor.formatOnSave": true,
  // enable for eslint-plugin json-format
  "eslint.validate": ["json"],
}

to auto-format* json-with-comments-files, also add "eslint.validate": ["jsonc"] (* will strip comments)

Related Tools

husky + lint-staged set up lint and auto-fix on commit

npm i -D husky lint-staged

in your package.json:

{
  ...
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json}": [
      "eslint --fix"
    ]
  },
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  ...
}

License

MIT

Credits

large amount of code borrowed from eslint-plugin-html

kuceb/eslint-plugin-json-format