eslint-plugin-prettierx

ESLint plugin to format your code with PrettierX.

• Based on the ESLint configuration and/or external prettierrc config file.
• Include PrettierX presets for StandardJS and Standardize.
• Each PrettierX option can be overwritten without affecting the rest.

Requirements:

• ESLint 7 or later
• NodeJS 10.13 or 12, or as required by ESLint

IMPORTANT

Since v0.18.0, eslint-plugin-prettierx does not include separate groups of rules for the plugins it supports, which are now included in the presets.

As far as prettierx/standardize-bundle* is concerned, the new version of eslint-config-standardize includes PrettierX, so the bundle is no longer necessary and has also been removed.

* Do not confuse the "standardize" preset with the "standardize-bundle". The former is a generic version focused on PrettierX and designed to be used with other plugins, while "standardize-bundle" was intended to be used as a complement of eslint-config-standardize.

Please see the Changelog for info about other changes.

Setup

Install ESLint and the PrettierX plugin.

yarn add -D eslint eslint-plugin-prettierx

Install other plugins that you need.

Add "prettierx" to the plugins array of your .eslintrc file (.js, .json, .yaml, etc). You can omit the "eslint-plugin-" prefix.

Then, add to extends the configurations of other plugins that you are using, and bellow these, put "plugin:prettierx/<preset>", where <preset> is the name of the preset you want to use.

Presets

The presets of eslint-plugin-prettierx are special ESLint configurations that set the initial PrettierX options and disable various conflicting rules, both from ESLint and from other well-known plugins. Three are provided:

• default

  These are the predefined prettierx options and it is the best choice if you are migrating from prettier or prettier-eslint.

• standardx

  This one mimics the StandardJS style. You can use it with the eslint-config-standard, if you wish.

• standardize

  This is the preset that my team and I use, a modified version of StandardJS with trailing commas in multiline format, consistent quotes in object properties, and double quotes for JSX properties. Our full configuration, that already include this preset is in eslint-config-standardize and @quitsmx/eslint-config.

The provided presets only configure the style used by PrettierX, they do not enable rules. You must use your own plugin configurations for that.

Supported Plugins

eslint-plugin-prettierx include support for a few plugins:

• plugin:prettierx/@typescript-eslint for @typescript-eslint
• plugin:prettierx/babel for eslint-plugin-babel
• plugin:prettierx/flowtype for eslint-plugin-flowtype
• plugin:prettierx/react eslint-plugin-react
• plugin:prettierx/standard eslint-plugin-standard (only the plugin)
• plugin:prettierx/unicorn eslint-plugin-unicorn
• plugin:prettierx/vue eslint-plugin-vue

* Plugins that do not affect the format (node, promise, compat, etc), does not conflict with PrettierX.

Example

This is an example for projects based on TypeScript and React, with the "standardize" preset:

yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "env": {
    "browser": true,
    "es2020": true
  },
  "plugins": ["@typescript-eslint", "react", "prettierx"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettierx/standardize"
  ]
}

This .prettierrc.json file mirrors the "standardize" preset and can be used by the prettiex cli and other tools such as the Prettier extension for VS Code.

If you are using any Prettier tool, it is recommended that you use the Prettier package from aMarCruz/prettier to avoid conflicts.

{
  "arrowParens": "avoid",
  "generatorStarSpacing": true,
  "offsetTernaryExpressions": true,
  "printWidth": 92,
  "quoteProps": "consistent",
  "semi": false,
  "singleQuote": true,
  "spaceBeforeFunctionParen": true,
  "yieldStarSpacing": true
}

You can generate this file with the "prettierx-init" utility, provided by this plugin, from the command line.

npx prettierx-init standardize

NOTE:

The "default" preset generates an empty .prettierrc.json, which is fine and tells prettierx to use the default options, unless you overwrite one or more with ESLint. See precedence.

Rules

Due to the way it works, this plugin has only one rule: prettierx/options, that contains all the prettierx options.

  "prettierx/options": [severity, options],

• severity

  Common severity option for ESLint rules: 0, 1, 2, "off", "warn", "error". Use 0 or "off" to disable prettierx.

• options

  Allows override the options defined by the preset (you can also use a .prettierrc file for that).

Options

PrettierX ships with a handful of customizable format options, usable in both the CLI and API.

These are the Prettier/PrettierX options and its default values, along with the values overridden by each preset:

To learn more about these options please see the Options of PrettierX.

Precedence

The precedence of the plugin configuration is, from low to high:

• PrettierX defaults.
• Preset options, if any.
• .editorconfig, if both editorconfig and usePrettierrc is true.
• .prettierrc, if usePrettierrc is true.
• prettierx/options from your ESLint config.
• ESLint comments in source files.

Also, if you want to change the behavior of the plugin for certain directories, use the "overrides" property of the ESLint or Prettier config.

Settings

To fine-tune the prettierx operation, you can use the settings block of your .eslintrc file.

This .eslintrc.json shows the default values:

{
  "settings": {
    "prettierx": {
      "usePrettierrc": true,
      "editorconfig": false,
      "ignorePath": ".prettierignore",
      "pluginSearchDirs": [],
      "plugins": [],
      "withNodeModules": false,
      "useCache": true
    }
  }
}

These are the same for all the presets.

• usePrettierrc

  Type: boolean, default: true.

  Set to false to ignore any configuration file.

• editorconfig

  Type: boolean, default: false

  Note: This setting is valid only when usePrettierrc is true.

  If set to true and there's an .editorconfig file in the project, PrettierX will parse it and convert its properties to the corresponding PrettierX settings.

  This configuration will be overridden by .prettierrc. Currently, the following EditorConfig properties are supported:

  | EditorConfig | PrettierX | | ----------------------- | ------------- | | end_of_line | endOfLine | | indent_style | useTabs | | indent_size/tab_width | tabWidth | | max_line_length | printWidth | | quote_type | singleQuote |

• ignorePath

  Type: string, default: ".prettierignore"

  Path to a file containing patterns that describe files to ignore.

• pluginSearchDirs

  Type: string, default: []

  Custom directories that contains prettier plugins in the node_modules subdirectory.

  Overrides default behavior when plugins are searched relatively to the location of Prettier.

• plugins

  Type: string, default: []

  Array of plugins names to use.

• withNodeModules

  Type: boolean, default: false

  PrettierX will ignore files located in node_modules directory. Set this flag to true to change the default behavior.

• useCache

  Type: boolean, default: true

  If set to false, all caching will be bypassed.

  Use false only for test the settings, leave the default for normal use.

VS Code ESLint

If you want to use this plugin with the ESLint and Prettier extensions of VS Code:

1. Install ESLint, eslint-plugin-prettierx, and the aMarCruz/prettier.

   yarn add -D eslint eslint-plugin-prettierx aMarCruz/prettier

2. Enable the plugin in the VS Code settings to format the desired file types.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

As a git hook

(The easy way)

Install lint-staged along with husky

yarn add lint-staged husky --dev

and add this config to your package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,mjs,jsx,ts,tsx}": ["eslint --fix"],
    "*.{html,md,json,scss}": ["prettierx --write"]
  }
}

The last line is to format other files with prettierx, if you wish.

Can I use this plugin without a Preset?

Yes and No.

Any of the configurations offered by this plugin disables the rules that conflict with PrettierX. Using them with PrettierX disabled doesn't make sense.

Anyway, if you are using PrettierX separately (or a fake Prettier) I recommend that you add "plugin:prettierx/default" to the ESLint extends and keep the PrettierX settings in a separate ".prettierrc" file.

.eslintrc.json

{
  "plugins": ["prettierx"],
  "extends": ["plugin:prettierx/default"]
}

Then, generate a .prettierrc.json file with the desired preset settings:

yarn prettier-init standardize

Support my Work

I'm a full-stack developer with more than 20 year of experience and I try to share most of my work for free and help others, but this takes a significant amount of time and effort so, if you like my work, please consider...

Of course, feedback, PRs, and stars are also welcome 🙃

Thanks for your support!

License

The MIT License, © 2019, Alberto Martínez

Parts of this plugin were taken from tools from Prettier under the MIT license.

Changelog of eslint-plugin-prettierx

[0.18.0] - 2021-04-27

Added

• bin/prettierx-init tool for create a .prettierrc file

Changed

• Better schemas, pre-builded from the Prettierx sources
• Update properties and default values
• Update standardx & standardize presets
• Update dependencies, use Prettierx v0.18.0

Remove

• standardize-bundle, as eslint-config-standardize now include Prettierx
• Separate configs for supported plugins
• bin/list-eslint-config.js utility (undocummented)

[0.17.1] - 2021-02-08

Changed

• Use default value (false) for the breakLongMethodChains option (sorry).

[0.17.0] - 2021-02-07

Added

• Remove obsolete options and add new ones from PrettierX 0.17, see [options removed]('prettierx: Clearing prettier cache...')

Changed

• Use default value (false) for the breakLongMethodChains option (sorry).
• Updated PrettierX to 0.17.0

Removed

• Remove the 'prettierx: Clearing prettier cache...' message.
• Remove obsolete folder of the fake prettier package.

Fixed

• Fix #7 Unable to use standardx anymore

[0.16.0] - 2021-01-19

Added

• Set new rule breakLongMethodChains to true.

Changed

• Updated Readme
• Updated dependencies, prettiex 0.16.0 and ESLint 7.15 or later
• Updated TypeScript to v4.1.x

[0.14.0] - 2020-08-10

Changed

• Updated internal typings
• Updated dependencies, prettiex 0.14.0 and ESLint 7.2 or later
• Updated Readme

[0.13.1] - 2020-08-10

Changed

• Updated internal typings
• Updated dependencies, prettiex 0.13.1 and ESLint 7.2 or later

[0.12.1] - 2020-05-28

This is the last version with support for ESLint 6.x and typescript-eslint v2.x

Added

• typescript version >= 3.2 in peerDependencies to allow compatibility with typescript-eslint v2.34

Changed

• Updated README.md, now includes default for Prettier v2
• Updated dependencies
• Use "^" instead "~" in the Prettierx version of dependencies

[0.12.0] - 2020-05-15

Added

• Support for the new PrettierX option breakBeforeElse.

Changed

• Using prettierx v0.12.0
• Revised prettierrc.json now includes "breakBeforeElse" support.
• Updated year in the LICENSE file.
• Updated devDependencies.

[0.11.0] - 2019-01-27

Changed

• Now "settings.usePrettierrc" defaults to true for all presets.
• Revised prettierrc.json defaults, now includes "parenSpacing" support.
• Require nodeJS 10.12 or later.
• Updated devDependencies.

Fixed

• Value of "quoteProps" must be "as-needed" in the "standardx" preset.

Removed

• Removed fake Prettier package, please use aMarCruz/prettier.
• Removed TSLint, now using ESLint as TypeScript linter.

[0.10.0] - 2019-11-21

Changed

• Version of this package follows the prettierx version.
• Updated dependencies, including Prettierx based on Prettier 1.9.1
• ESLint minimum is v6.2.2

[0.5.0] - 2019-10-30

Changed

• Update Prettierx 0.8.0, based on Prettier 1.8.0
• Update the (fake) Prettier sub-package.
• Requires minimum Node 8 and ESLint 6.0.1

Removed

• Test with StandardJS and others.

[0.4.0] - 2019-06-25

Added

• New option quoteProps, similar to the quote-props option of ESLint.
• New option parenSpacing, which inserts many extra spaces inside parentheses.

Changed

• The standardize preset is configured with quoteProps: consistent.
• Updated dependencies, using Prettierx v0.7
• Requires NodeJS v8 or later.

[0.3.1] - 2019-02-27

Changed

• Update dependencies.

Fixed

• Wrong references to "plugin:prettier" instead "plugin:prettierx"

[0.3.0] - 2019-02-26

Changed

• When running from the CLI, clear cache only at the first run.
• Breaking: Remove 'standardize' from "extends" in the preset 'standardize-bundle', to allow other configs override its rules before the exclusions.

[0.2.1] - 2019-02-25

Added

• Prettier exclusions for '@typescript-eslint', 'babel', 'flowtype', 'react', 'standard', 'unicorn', 'vue'.
• Add the standardize-bundle preset.
• parserOptions block to the presets and the bundle preset.
• Exclusion for the unicorn config: unicorn/escape-case

Changed

• Runs prettierx last in the parsing, to allow ESLint fixes take precedence.
• Allows the ESLint rule no-useless-escape.
• Update Readme.

Fixed

• Presets not setting its options.

Removed

• devDependency on standard.

[0.1.3] - 2019-02-23

Added

• 'no-useless-escape' to the conflicting rules, test with '\ca'.

Fixed

• Refence to unexistent 'preset' option in the prettierx rule.

[0.1.2] - 2019-02-22

Added

• Markdown-lint config.

Fixed

• Wrong name for '@typescript-eslint/eslint-plugin'
• Erroneous link to npm in the Readme.

[0.1.1] - Unpublished

• Having bugs.

[0.1.0] - 2019-02-22

First release.