brodybits / prettierx Goto Github PK
View Code? Open in Web Editor NEWa less opinionated fork of Prettier code formatter
License: MIT License
a less opinionated fork of Prettier code formatter
License: MIT License
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.
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?
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 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!
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.
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.
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"
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).
Extension of PR #35 (was mostly working in first-take PR #4). Requested on prettier-miscellaneous in arijs/prettier-miscellaneous#38.
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)
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.
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
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
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).
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
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.
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.
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-plugin-x
since it does not seem to be official (prettier/prettier#4908)
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:
P.S. Here are some known side effects:
Should use prettierx
for linting. This would likely require a special eslint plugin.
If I would try the parenSpacing: true
setting in tests/align-object-properties
it seems to break the alignment.
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).
Should be done as part of a new 0.x release according to semver
This means that Node.js version 10 is currently recommended.
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:
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.
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 :)
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.
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.
parallel to: prettier/prettier#4675
Would like this to act like the eslint-prettier
gits
https://github.com/prettier/tslint-config-prettier
https://github.com/prettier/tslint-plugin-prettier
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.
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.
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:
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) ||
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 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.
i use a private npm registry, but parse-srcset is getting pulled from github, which is offlimits in my CI env 😭
Line 64 in 425d40c
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?
extension of #10 (Continuous Integration testing)
as proposed in prettier/prettier#6400
in the following:
this would be a prerequisite to #54 - use Babel parser to parse TypeScript (internally)
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.