parallel to: prettier/prettier#4675

problem

i use a private npm registry, but parse-srcset is getting pulled from github, which is offlimits in my CI env 😭

discussion

could we move this to an npm hosted version of srcset, or do we really need a particular sha? perhaps a npm publish could be acheived?

From issues such as issue #41 and prettier/prettier#5814, I am starting to wonder if we should consider a better way to format ternary expressions.

As described in prettier/prettier#5814 (comment) & prettier/prettier#5814 (comment), my idea would be to format JavaScript & TypeScript ternaries just like Prettier formats ternaries in JSX:

const result = type === 'first' ? (
  getFirstThing()
) : type === 'second' ? (
  getSecondThing()
) : (
  getOtherThing()
)

I tried the following update and it seems to do what we want here:

--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -370,6 +370,7 @@ function printTernaryOperator(path, options, print, operatorOptions) {
   const lastConditionalParent = previousParent;
 
   if (
+    true || // [prettierx option goes here instead of `true`]
     operatorOptions.shouldCheckJsx &&
     (isJSXNode(testNode) ||
       isJSXNode(consequentNode) ||

/cc @aMarCruz @sheerun

advice from sheerun/prettier-standard#90 (comment):

My advise (sic) for @brodybits would be to remove typescript as peerDependency, because it gives annoying warning when someone does not need it. Instead you can use something like require.resolve to check if typescript is available and require it conditionally only then.

/cc @havenchyk @sheerun

Prettier 1.16.4
Playground link

--parser babylon

Input:

export const foo = function (r, isSpace) {
  const type = /work|trabajo|empresa|negocio/i.test(r.Type)
    ? 't'
    : /home|hogar|Personal|Particular|casa/i.test(r.Type)
      ? ''
      : null

  return type
}

Output:

export const foo = function(r, isSpace) {
  const type = /work|trabajo|empresa|negocio/i.test(r.Type)
    ? "t"
    : /home|hogar|Personal|Particular|casa/i.test(r.Type)
    ? ""
    : null;

  return type;
};

Expected behavior:

The Input must be preserved.

The ESLint indent rule for StandardJS has flatTernaryExpressions: true, as seen in enforce consistent indentation (indent).

@brodybits , thanks for your awesome fork!

Would like this to act like the eslint-prettier

gits
https://github.com/prettier/tslint-config-prettier
https://github.com/prettier/tslint-plugin-prettier

Hi
Thanks for your solution.
I use it on my latest project.
But I have one problem
If cache is enabled (useCache: true)
When I try to install some npm plugin my cli get error

src/language-js/printer-estree.js seems to be a monolithic set of functions to format all possible elements of an estree that comes in some form from the parser

I wonder if there could be a way to make this functionality more pluggable somehow, in a similar fashion to the way Babel and ESLint can work with parsing, analysis, and formatting plugins.

related (2021):

• prettier/prettier#4424 - support library-specific plugin
• #418 - VS Code support
• #8 - provide the additional formatting options in a Prettier plugin, which is now working in prettier-plugin-x

See prettier/prettier#5903:

Input:

const str = 'abc'

[1, 2, 3].forEach(secondaryEffectFn)

It is using ASI, which is accepted by Prietter and generates this

Output:

const str = 'abc'[(1, 2, 3)].forEach(secondaryEffectFn)

This is valid and correct JavaScript but clearly not desired.

The recommended solution is to use ESLint to catch this kind of a pattern before using Prettier or prettierx.

This needs to be documented here and in Prettier itself.

I think this is the ideal way to format objects with properties.

I would love to do this kind of formatting for a project like Cordova.

I think this idea is inconsistent with “Standard JS” and Prettier, which both do quote-props: [“error”, “as-needed”] (if I am not mistaken).

Looking for an option to not indent cases:

switch(type) {
case "one":
  // ...
case "two": {
  let foo = "bar"
  // ...
  break
}
case "three": {
  let something = "here"
  // ...
  break
}}

Cannot get normal prettier to cooperate w/ our style guidelines here. The reason for this is we write Go and TypeScript code, and Go mandates case formatting be inline, so we have standardized on that. We try to keep our formatting standards as close as possible between languages.

So I'm looking for a fork to provide such an option. Unfortunately there isn't much out there besides prettier.

If I could have my way, I would like a tslint plugin that handled the line wrapping and use the other auto-fix rules for everything else. But nothing like that exists that I know of.

It would be cool if the version of this module would mirror the (minor) version of prettier it is forking, e.g. currently 1.16.X. The reason for this is that some tools (e.g. WebStorm) have dedicated functionality for prettier, that allows for pointing to a different binary, but they do a version check before. After editing the files' version from 0.6.X to 1.16.x in my case, prettierx works as a replacement without any issues.

I get that it's not SemVer, but maybe something to consider :)

If I would try the parenSpacing: true setting in tests/align-object-properties it seems to break the alignment.

as proposed in prettier/prettier#6400

Prettierx 0.3.0

--generator-star-spacing
--yield-star-spacing
--space-before-function-paren
--no-semi
--jsx-single-quote
--single-quote

Input:

let isSpace = false

const dress = isSpace ? {
      spaceSuit: 3,
      oxygenCylinders: 6
    } : {
      shirts: 3,
      paints: 3
    }

Output:

let isSpace = false

const dress = isSpace
  ? {
      spaceSuit: 3,
      oxygenCylinders: 6
    }
  : {
      shirts: 3,
      paints: 3
    }

Expected behavior:

The output should be compatible with standard. i.e. it should be something like

let isSpace = false

const dress = isSpace
  ? {
    spaceSuit: 3,
    oxygenCylinders: 6
  }
  : {
    shirts: 3,
    paints: 3
  }

Doesn't this mean prettierx can't achieve standard like formatting or am I missing something ?

• prettier/prettier#840
• prettier/prettier#4870

I'm looking for a solution to prettier/prettier#2550 - Keep multi-line formatting for destructuring assignment.

It's really my only problem with prettier. Ideally, I'd like prettier to just not re-wrap my destructuring when I've chosen to put it on separate lines, similar to how it treats object literals.

From npm outdated some "dev", "beta", and "rc" dependency versions have been superseded by stable versions. Dependencies need to be updated. It would be ideal if the dependencies would be updated on the upstream prettier repository, as was already attempted in prettier#5562.

in the following:

• tests/empty_paren_comment
• tests/generator-star-spacing
• tests/space-before-function-paren/eslint-compat
• tests/standard
• tests/ternaries
• tests/yield-star-spacing

this would be a prerequisite to #54 - use Babel parser to parse TypeScript (internally)

yarn audit currently shows 499 vulnerabilities.

While most of these vulnerabilities would lie in the devDependencies, and I would not expect any major security vulnerabilities in practice, I would like to get these resolved if possible.

Note that unlike prettier, there is no need to support Node.js 4 in prettierx, and I would like to drop Node.js versions 6 and 8 in the near future (see #6).

Edited, initial version was not correct

I came across the weird and likely wrong behavior with formatting of the next lines of code

function foo<T>(x: T): T {
  return x
}

Even if I don't pass --space-before-function-paren flag (default value is false), space is added between foo<T extends number> and (x: T),

so the result is:

function foo<T> (x: T): T { // <-- space between <T> and (x: T)
  return T
}

Could you please confirm it's an issue?

Hi @brodybits ,
I have an issue after upgrading my eslint-plugin-prettierx to prettierx 0.7 that cannot be reproduced in the Prettier playground.
In this fragment the JSDoc comment is marked for deletion:

Have you seen something like this before?

The error is present with ESLint 5.16 and 6.0, with @typescript-eslint/parser 1.9 and 1.11

This is the config of prettierx:

{
  "alignTernaryLines": false,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "generatorStarSpacing": true,
  "indentChains": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 92,
  "quoteProps": "consistent",
  "semi": false,
  "singleQuote": true,
  "spaceBeforeFunctionParen": true,
  "trailingComma": "es5",
  "yieldStarSpacing": true,
  "overrides": [
    {
      "files": "src/lib/toPlainLowerCase.ts",
      "options": {
        "printWidth": 320
      }
    }
  ]
}

It is not happening if <Card contact={contact} /> is closed: <Card contact={contact}></Card>, but prettierx removes </Card> forcing to selfclose.

Any help is appreciated. Thanks.

I hope to make this update soon.

mirror of prettier/prettier#5257

I have reproduced this issue on prettierx with and without using the --no-align-ternary-lines option.

P.S. I found prettier/prettier#5257 by looking through prettier/prettier#5039 where the ternary formatting was changed while investigating the cause and possible solutions for #41.

I now get the following warning messages when installing prettierx, no different from installing from GitHub:

/Users/brodybits/dev/nvs/node/10.17.0/x64/lib/node_modules/prettierx/bin/prettierx.js
npm WARN [email protected] requires a peer of @angular/compiler@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

I think this issue is caused by removing the special production build as discussed in #48.

• prettier/prettier#4428 which does seem to already show itself in the existing test suite
• prettier/prettier#7487, with solution already proposed in prettier/prettier#8120

• Node.js 4 (#25, prettier#3919)
• Node.js 6 - maintenance will end in April (https://github.com/nodejs/Release#release-schedule), see prettier#5711
• Node.js 8 maintenance will end in December (ibid)

Should be done as part of a new 0.x release according to semver

This means that Node.js version 10 is currently recommended.

idea from prettier/prettier#5995

I am downvoting this idea due to personal bias (yes, downvoting my own issue), raising it for the sake of tracking and possible discussion.

This relates to sheerun/prettier-standard#76

Here's example formatting of prettierx with indents on nested ternaries enabled:

search.premium
  ? commission => {
    return suggestions.hits.map(hit => something(hit))
  }
  : something
    ? commission => {
      return suggestions.hits.map(hit => something(hit))
    }
    : null

The core of this issue is that it's possible to configure prettierx to add extra indents to nested ternary expressions, but it also enables another extra formatting rule described below:

function is normally formatted with indentation:

commission => {
  return suggestions.hits.map(hit => something(hit))
}

but when ternary expression is used (with --align-ternary-lines=false option that enables indents on nested ternaries) it doesn't have it:

search.premium
  ? commission => {
    return suggestions.hits.map(hit => something(hit))
  }
  : () => onOpen()

Command used:

prettierx --generator-star-spacing --space-before-function-paren --single-quote --jsx-single-quote --no-semi --yield-star-spacing --align-ternary-lines=false

The real issue with this formatting is that's what standard --fix actually does! So technically is nothing wrong with prettierx, but for me it seems indeed this is wrong decision and the indentation should be at the level of expression after ?, not the ? itself (this doesn't prevent expressions being indented for each level of ?:):

search.premium
  ? commission => {
      return suggestions.hits.map(hit => something(hit))
    }
  : () => onOpen()

Unfortunately this also means formatting would be divergent from what standard.js does.

In the end the correct code, with just indents on nested ternaries enabled, is:

search.premium
  ? commission => {
      return suggestions.hits.map(hit => something(hit))
    }
  : something
    ? commission => {
        return suggestions.hits.map(hit => something(hit))
      }
    : null

The TypeScript implementation from the typescript package is no longer bundled with prettierx, and prod build is no longer done as of prettierx 0.9.0.

It is desired to include and support use of TypeScript via babel-ts parser as proposed in prettier/prettier#6400, once it is ready for real-world usage.

Rationale:

• I personally find the idea of automatically embedded implementation of TypeScript in the generated bundle, even with tree shaking, to be excessive in added complexity.
• Since TypeScript is under the longer Apache 2.0 license statement, I think any package embedding TypeScript should technically fall under that license.

P.S. Here are some known side effects:

• npm installation warning messages
• browser build is no longer expected to work (see https://prettier.io/docs/en/browser.html)

since it does not seem to be official (prettier/prettier#4908)

Extension of PR #35 (was mostly working in first-take PR #4). Requested on prettier-miscellaneous in arijs/prettier-miscellaneous#38.

idea under discussion on Standard in: standard/standard#1144

I think this would simply mean always keeping parens around the parameter in case of an arrow function with only one parameter.

P.S. Here is a MDN doc ref:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

as documented in https://prettier.io/docs/en/plugins.html#printers

This idea should make it easier to integrate with existing eslint plugins and other existing tools.

P.S. An interesting question on this subject asked in prettier/prettier#5747.

Should use prettierx for linting. This would likely require a special eslint plugin.

extension of #10 (Continuous Integration testing)

A side effect of removing the prod build (#48) is that use in a browser build (https://prettier.io/docs/en/browser.html) is no longer expected to work.

I think it would be ideal if we could add a browser entry to package.json with a limited number of substitutions to make this package work in a browser ref:

• https://2ality.com/2017/04/setting-up-multi-platform-packages.html
• https://nolanlawson.com/2017/01/09/how-to-write-a-javascript-package-for-both-node-and-the-browser/

Update June 2021: This means that the information in docs/browser.md does not apply for prettierX.

Some form of browser build support is under consideration for the future. And a switch to ES modules would likely increase the chances of working in more and more environments such as modern browsers and Deno out of the box.

The recommended solution for now is to use a bundler such as Rollup or Webpack.

Prettier 1.16.1
Playground link

# Options (if any):
# using prettier-standard package

Input:

docRef.update({[`schedule.${this.state.currDbLoc}.submission`]: selectedSubmission})

// -- or --

docRef.update({
  [`schedule.${this.state.currDbLoc}.submission`]: selectedSubmission
})

Output:

docRef
            .update({
              [`schedule.${
                this.state.currDbLoc
              }.submission`]: selectedSubmission
            })

Expected behavior:
Should produce (or stay as):

docRef.update({
  [`schedule.${this.state.currDbLoc}.submission`]: selectedSubmission
})

I'm using the prettier-standard package which uses this package to format and I'm getting this really weird formatting using a template literal inside an object key.

This seems partially like an issue with brackets on the same line rule of standard not being followed, and something else to do with the template literal.

Apart from this issue I do also have issues happening just with the brackets on same line rule not being followed, I just thought this one would showcase more.

Opposite of #68 and prettier/prettier#5995: keep multi-line import statement in multiple lines if there is a newline after the left brace ({), as an option

Should be very similar to the way Prettier supports multi-line objects.

Also related #67 - multi-line "destructuring assignments"

There is a trick how to force parser to think it's a generic and not TSX code in .tsx file
typescript-eslint/typescript-eslint#1457

prettierx removes space after comma at <T,>: const MyComponent = <T, >({x, y, z}: Props<T>) => {…}, eslint standard config on the other hand expects this space.

Probably it can be an issue at prettier-standard instead, but I don't see an option to configure having this space only for generics

• https://jlongster.com/A-Prettier-Formatter - nice historical information
• http://homepages.inf.ed.ac.uk/wadler/papers/prettier/prettier.pdf - research whitepaper
• https://prettier.io/docs/en/technical-details.html
• https://www.google.com/search?q=prettier+algorithm
• prettier/prettier#4298 - interesting discussion of printWidth
• https://www.google.com/search?q=eslint+space-before-function-paren+prettier - this term came up in my search bar when I was looking to check something, seems like a commonly wanted feature which is supported by this fork
• prettier/prettier-vscode#318 - came up in a search, could be supported by using this fork

Now that prettierx is no longer bundled before publishing, I think files entry is needed to avoid publish artfiacts not needed to npm, mostly in tests.

When someone installs prettier-standard (which depends on prettierx) without typescript as peer-dependency he/she gets following warning:

/usr/local/bin/prettier-standard -> /usr/local/lib/node_modules/prettier-standard/src/cli.js
npm WARN [email protected] requires a peer of @angular/compiler@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

This is because prettierx depends on angular-estree-parser which requires @angular/compiler@^6.0.0 as peer dependency. Also @typescript-eslint/typescript-estree which indrectly requires tsutils which requires typescript as peer dependency.

I'm leaving this issue here without suggestion how to fix it because I don't know how.

Prettier 1.16.4
Playground link

--parser babylon
--no-semi
--single-quote

Input:

export class Foo {
  static [Symbol.hasInstance] (obj) {
    return 'bar' in obj
  }
}

Output:

export class Foo {
  static [Symbol.hasInstance](obj) {
    return 'bar' in obj
  }
}

Expected behavior:
Should retain the space before the function parentheses.

Issue demonstrated in PR #17 where using --align-object-properties leads to the following exception:

    TypeError: Cannot read property 'raw' of undefined

      226 |       : n.raw
      227 |       ? n.raw.length
    > 228 |       : n.extra.raw
          |                 ^
      229 |       ? n.extra.raw.length
      230 |       : undefined;
      231 | 

      at getPropertyPadding (src/language-js/printer-estree.js:228:17)
      at FastPath.call (src/common/fast-path.js:69:18)
      at printPathNoParens (src/language-js/printer-estree.js:1507:38)
      at Object.genericPrint [as print] (src/language-js/printer-estree.js:96:30)
      at callPluginPrintFunction (src/main/ast-to-doc.js:126:18)
      at comments.printComments.p (src/main/ast-to-doc.js:63:14)
      at Object.printComments (src/main/comments.js:488:19)
      at printGenerically (src/main/ast-to-doc.js:61:22)
      at path.each.childPath (src/language-js/printer-estree.js:1403:22)
      at FastPath.each (src/common/fast-path.js:103:7)

like @aMarCruz made here: https://github.com/aMarCruz/eslint-plugin-prettierx/tree/0.4.0/prettier

I am unsure whether this should be extracted into a special project or package, or if it can be integrated with prettierx somehow.

It may be able to help mirror version of Prettier (#24).