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 ESLint 5.12 or above.

Please see a breaking change in bundle presets

Setup

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

yarn add eslint 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 (the @typescript-eslint/eslint-plugin already includes the typescript parser):

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

Configure eslint

{
  // "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',
    // 2. configs to enable plugin rules
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    // 3. prettierx settings with the "standardx" style
    'plugin:prettierx/standardx',
    // 4. add exclusions for additional plugins
    'plugin:prettierx/@typescript-eslint',
    'plugin:prettierx/react',
  ],
}

That is 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 now 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 configs (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 (es5) and double quotes for JSX properties that I use with my standardize config (but it can be used with your own config).

These are the prettierx options used for each preset:

If you want to configure prettierx by means of a file .prettierrc or .editorconfig, add usePrettierrc: true in the "settings.prettierx" section of the .eslintrc if you are using the "standardx" or "standardize" presets. The preset "default" already set this to true.

In any case, you can use the "prettierx/options" rule, that has precedence over other options.

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/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". The last turns prettierx off.

• 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: false for "default", true for other presets.

  Set to true to look for a configuration file, if false the plugin or default settings will be used.

• 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",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": 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,jsx,ts,tsx}": ["eslint --fix", "git add"],
    "*.{md,json,css}": ["prettierx --write", "git add"]
  }
}

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.

FAQ

Known Issues

TODO

• Config for the StandardJS bundle
• Test
• Enhance this doc
• Many other things

License

The MIT License, © 2019, Alberto Martínez

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