Prettier2。5发布支持TypeScript4。5新语

　　首发知乎：https：zhuanlan。zhihu。comp438830128
　　链接：Prettier2。5：TypeScript4。5andMDXv2commentsyntax！Prettier
　　作者：SosukeSuzuki（sosukesuzuki）
　　这个发布支持了TypeScript4。5的新语法和MDXv2的注释语法！
　　如果你喜欢Prettier，同时想支持我们的工作，可以通过OpenCollective来支持我们，也可以支持我们其他的项目，包括typescripteslint，remark，和Babel。重要更新TypeScript使用长类型时避免在箭头函数中产生位移（Avoidextraoffsetinarrowfunctionbodywhenusinglongtypes（11515bykachkaevandthorn0））
　　在Prettier2。3。0开始，箭头函数的类型声明可能影响函数体的压缩情况。改变类型签名的长度有可能造成更大的区别，从而导致git冲突的可能性。为了防止这个事情，函数体的位移以后是稳定的。
　　注意：这个改变可能会影响很多你的代码。输入constMyComponentWithLongName：React。VoidFunctionComponentMyComponentWithLongNameProps（｛x，y｝）｛constauseA（）；return｛xya｝；｝；Prettier2。2及以下constMyComponentWithLongName：React。VoidFunctionComponentMyComponentWithLongNameProps（｛x，y，｝）｛constauseA（）；return｛xya｝；｝；Prettier2。4constMyComponentWithLongName：React。VoidFunctionComponentMyComponentWithLongNameProps（｛x，y｝）｛constauseA（）；return｛xya｝；｝；Prettier2。5constMyComponentWithLongName：React。VoidFunctionComponentMyComponentWithLongNameProps（｛x，y｝）｛constauseA（）；return｛xya｝；｝；支持TypeScript4。5SupportTypeScript4。5（11721，11723，11813bysosukesuzuki）
　　我们支持了TypeScript4。5的新语法：
　　Import语句中的type例子import｛typeA｝frommod；
　　私有属性例子classFoo｛prop1；method（）｛returnprop1inthis；｝｝
　　Import断言例子importobjfrom。something。jsonassert｛type：json｝；
　　处理。mts和。cts
　　Prettier现在会以TypeScript处理。mts和。cts结尾的文件。HTML折叠HTML的class属性到一行CollapseHTMLclassattributesontooneline（11827byjlongster）
　　回退7865。
　　虽然之前的这个特性对于一些CSS库例如Tailwind的用户是有用的。因为这些库会产生大量的CSS属性。但是我们始终没法找到合适的方法得到让我们满意的结果。我们仍然在找更好的办法来去处理大量CSS的问题。如果你关心这个事情，请来和我们讨论。！输入！Prettier2。4！Prettier2。5MDX增加对MDXv2注释语法的支持AddsupportforMDXv2commentsyntax（11563bywooorm）
　　目前增加了对于MDXv2注释的语法，类似JavaScript形式，而MDXv1的注释时形如HTML样式的。
　　注意：目前Prettier只支持单行注释，所以｛prettierignore｝可以使用，MDXv2其他的部分还不支持。Input：｛Acomment｝Prettier2。4：｛Acomment｝Prettier2。5：｛Acomment｝其他改变JavaScript修复括号作为箭头函数返回的序列表达式时的情况Fixparenthesesaroundsequenceexpressionasbodyofarrowchain（11593bybakkot）
　　箭头函数返回的序列表达式的括号会保留下来。之前，Prettier会移除他们，会造成语法问题。输入constf（）（）（0，1）；Prettier2。4constf（）（）0，1；Prettier2。5constf（）（）（0，1）；sloppy模式的语法错误会忽略Ignoreerrorsforsloppymodesyntax（11750byfisker，11778bysosukesuzuki）
　　JavaScript的严格模式会增加一些有用的报错来避免错误。一些错误是在解析语法时触发的。因为Prettier的目标是格式化代码，而不是这些代码是否能跑起来，这些跑起来正确的检查任务应该留给linters，compilers和runtime。输入functionfoo（）｛varbar1；deletebar；｝Prettier2。4SyntaxError：Deletinglocalvariableinstrictmode。（1：31）1functionfoo（）｛varbar1；deletebar；｝Prettier2。5functionfoo（）｛varbar1；deletebar；｝嵌入CSS的括号和表达式之间的空格会保留RespectspacingforbetweenexpressionsandparenthesesinembeddedCSS（11800bysosukesuzuki）输入constparagraph2csstransform1：｛expr｝（30px）；transform2：｛expr｝（30px）；；Prettier2。4constparagraph2csstransform1：｛expr｝（30px）；transform2：｛expr｝（30px）；；Prettier2。5constparagraph2csstransform1：｛expr｝（30px）；transform2：｛expr｝（30px）；；espree解析器支持ES2022私有类属性SupportES2022classprivatefieldsinsyntaxinespreeparser（11835byfisker）例子classFoo｛brand；staticisC（obj）｛returnbrandinFoo；｝｝TypeScript去除装饰器的不必要的括号Removeunnecessaryparenthesesfordecorators（11717，11849bysosukesuzuki）输入classTest｛foobartest1：stringtesttest（）。x（global）。y（）test2：stringtest；｝Prettier2。4classTest｛（foobar）test：stringtest（test（）。x（global）。y（））test2：stringtest；｝Prettier2。5classTest｛foobartest：stringtesttest（）。x（global）。y（）test2：stringtest；｝SCSS改进usewith格式Improveusewithformatting（11637bysosukesuzuki）输入uselibrarywith（black：222，borderradius：0。1rem，fontfamily：Helvetica，sansserif）；Prettier2。4uselibrarywith（black：222，borderradius：0。1rem，fontfamily：Helvetica，sansserif）；Prettier2。5uselibrarywith（black：222，borderradius：0。1rem，fontfamily：Helvetica，sansserif）；修复forwardwith的格式错误Fixforwardwithformattingerror（11683bysriramarul，sosukesuzuki）输入forwardfoo。scsswith（components：red）；Prettier2。4TypeError：Cannotreadpropertiesofundefined（readingtype）Prettier2。5forwardfoo。scsswith（components：red）；EmberHandlebars使用相反的引号模式对于mustachestatements中的引用Usestheoppositequotetypeforquotesinsidemustachestatementsinattributes（11524bybmaehr）｛｝｛｝｛｝Markdown嵌入TSX的尾后逗号会保留KeeptrailingcommasfortypeparametersinembeddedTSX（11685bysosukesuzuki）
　　尾后逗号是必要的，因为它可以防止TypeScript认为是印个JSX表达式的开始！输入tsxconsttestT，（value：T）｛｝；！Prettier2。4tsxconsttestT（value：T）｛｝；！Prettier2。5tsxconsttestT，（value：T）｛｝；
　　转载请注明本文知乎链接和译者Hugo。