eslint-plugin-prettierx

Format your code with ESLint using Prettierx, with presets for Prettier and StandardJS or your custom options.

• Based on ESLint or external configuration.
• Presets* for default options.

For use with ESLint v7.2.0 as minimum, for ESLint v7.1 or lower use eslint-config-prettierx 0.13 or bellow.

Minimum NodeJS version supported: NodeJS 10.13.0 or 12.0.0 and above, as described in brodybits/prettierx#6

Note

Please see the Changelog for more info.

If you are using the (fake) Prettier package, please update it.

Setup

Install ESLint v6.x and the Prettierx plugin with npm or yarn:

yarn add eslint@6.8.x eslint-plugin-prettierx -D

Install other plugins that you need.

Now configure ESLint to make it work without conflicts between its internal rules, those of other plugins, and the prettierx settings.

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

2. Then, in "extends", put the configs of other plugins that you are using. Almost all plugins include configs to enable several of its rules.

3. Bellow these configs, put "plugin:prettierx/<preset>", where <preset> is the name of the preset (style) that you will use.

4. Last, add the configs provided by prettierx for the plugins that you included in the step 2. This configs will disable rules that conflict with those plugins.

This is an example for projects using TypeScript with the @typescript-eslint parser, the @typescript-eslint plugin, the "react" plugin, and "prettierx" with the "standardx" preset:

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

Configure eslint

module.exports = {
  // "root" is optional, avoids searching eslintrc upwards.
  root: true,
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    es6: true,
  },
  // the prettierx plugin already sets ecmaVersion 2018,
  // sourceType "module" and enables ecmaFeatures.jsx
  parserOptions: {
    warnOnUnsupportedTypeScriptVersion: false,
  },

  plugins: [
    '@typescript-eslint',
    'react',
    // 1. Add the prettierx plugin
    'prettierx',
  ],
  extends: [
    // OPTIONAL: the eslint recommended config
    'eslint:recommended',
    // OPTIONAL: configs to enable plugin rules
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    // 2. prettierx settings with the "standardx" style
    'plugin:prettierx/standardx',
    // 3. add exclusions for additional plugins
    'plugin:prettierx/@typescript-eslint',
    'plugin:prettierx/react',
  ],
}

That's all! but you can personalize it, if you want.

See the provided exclusions later in this doc.

You don't need exclusions for 'eslint:recommended' nor for plugins that affect the layout.

Important

The provided presets only configure the style used by prettierx and disable conflicting ESLint rules. They do not enable rules. You must use the plugin configs for that, along with the exclusions provided by prettierx for each plugin.

Presets

The presets of eslint-plugin-prettierx are special ESLint configs that set the initial PrettierX options and disable several ESLint rules that can cause conflicts. 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 is the StandardJS style. You can use it with the standard config from StandardJS, but it is not recommended because you will need to setup all manually.

  Note: In a future version, I will provide an customized preset for the StandardJS bundle, much like the standardize-bundle.

• standardize

  This is my personal preset, a modified version of StandardJS with trailing commas in multiline format, consistent quotes in object properties, and double quotes for JSX properties that I use with my standardize config (but it can be used with your own config).

Differences in presets

These are the prettierx options used for each preset:

You can override individual options through a .prettierrc(.json) or .editorconfig file or through the "prettierx/options" rule of your ESLint config.

Bundle Presets

For the "standardized" bundle, prettierx provides the special config 'plugin:prettierx/standardize-bundle', so you do not need to worry about the details.

Usage

yarn add eslint eslint-plugin-prettierx eslint-config-standardize -D

{
  "plugins": ["prettierx"],
  "extends": ["standardize", "plugin:prettierx/standardize-bundle"]
}

Usage with TypeScript

yarn add eslint eslint-plugin-prettierx eslint-config-standardize @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

{
  "plugins": ["@typescript-eslint", "prettierx"],
  "extends": [
    "standardize",
    "standardize/typescript",
    "plugin:prettierx/standardize-bundle",
    "plugin:prettierx/@typescript-eslint"
  ]
}

Exclusions

eslint-plugin-prettierx provide exclusion rules 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, stc), does not need exclusions.

Rules

Because the way that Prettierx works, this plugin has one only rule: prettierx/options, that contains all the plugin 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.

The values of a preset are used as defaults for missing options when you override the options.

The precedence of the plugin configuration:

• prettierx/options from your ESLint config.
• .prettierrc, if configured in the settings.
• .editorconfig, if configured and usePrettierrc is used.
• Preset options.

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

Settings

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

This example shows the default values for the "default" preset:

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

These are the same for the "standardx" and "standardize" presets, except usePrettierrc, which is set to false.

• usePrettierrc

  Type: boolean, default: true.

  Set to false to ignore any configuration file.

• editorconfig

  Type: boolean, default: true

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

  If set to true and an .editorconfig file is in your project, Prettierx will parse it and convert its properties to the corresponding prettierx configuration.

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

  • end_of_line
  • indent_style
  • indent_size/tab_width
  • max_line_length

• ignorePath

  Type: string, default: ".prettierignore"

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

• withNodeModules

  Type: boolean, default: false

  Prettierx will ignore files located in node_modules directory. Use this flag 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.

Supported Options

All allowed, but not all makes sense.

Prettier Options

Prettierx Extensions

VS Code ESLint

Install the plugin as normal, then use it with the "ESLint: Fix all auto-fixable Problems" (it is not a formatter ...yet).

• Assign a hotkey

  Open File > Preferences > Keyboard Shortcuts and assign a key to "ESLint: Fix all auto-fixable Problems" (eslint.executeAutofix).

• If you want auto-fix when saving, add "eslint.autoFixOnSave": true to the VS Code settings.

Formating TypeScript

ESLint does not fix TypeScript files by default. To enable this feature, you need add the "autoFix" flag to the TS types in your VS Code settings:

{
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll": true // or "source.fixAll.eslint": true
  }
}

Formating Fenced Blocks

To fix JS or TS blocks in markdown or HTML, try eslint-plugin-markdown and eslint-plugin-html.

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"],
    "*.{md,json,css}": ["prettierx --write"]
  }
}

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

Migrating

Migrating from other tools (tslint, prettier, prettier-eslint, etc).

Understanding prettierx

Prettierx is a fork of prettier which provides a few more options which resolve some conflicts with the Standard JS tool.

Precautions

Avoid formating rules from other plugins.

Comment Directives

Do not use trailing comments for directives, put them to its own line.

TODO

• Config for the StandardJS bundle
• Test

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.