Prettier2。5发布支持TypeScript4。5新语法官文全文翻译

　　首发知乎：https://zhuanlan.zhihu.com/p/438830128
　　链接：Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax! · Prettier
　　作者： Sosuke Suzuki (@sosukesuzuki)
　　这个发布支持了 TypeScript 4.5 的新语法和 MDX v2 的注释语法！
　　如果你喜欢 Prettier，同时想支持我们的工作，可以通过 OpenCollective 来支持我们，也可以支持我们其他的项目，包括 typescript-eslint，remark，和 Babel。 重要更新TypeScript使用长类型时避免在箭头函数中产生位移（Avoid extra offset in arrow function body when using long types (#11515by@kachkaevand@thorn0)）
　　在 Prettier 2.3.0 开始，箭头函数的类型声明可能影响函数体的压缩情况。改变类型签名的长度有可能造成更大的区别，从而导致 git 冲突的可能性。为了防止这个事情，函数体的位移以后是稳定的。
　　注意：这个改变可能会影响很多你的代码。 // 输入 const MyComponentWithLongName: React.VoidFunctionComponent = ({ x, y }) => {   const a = useA();   return {x + y + a}; };  // Prettier 2.2 及以下 const MyComponentWithLongName: React.VoidFunctionComponent = ({   x,   y, }) => {   const a = useA();   return {x + y + a}; };  // Prettier 2.4 const MyComponentWithLongName: React.VoidFunctionComponent =   ({ x, y }) => {     const a = useA();     return {x + y + a};   };  // Prettier 2.5 const MyComponentWithLongName: React.VoidFunctionComponent<   MyComponentWithLongNameProps > = ({ x, y }) => {   const a = useA();   return {x + y + a}; }; 支持 TypeScript 4.5 Support TypeScript 4.5 (#11721,#11723,#11813by@sosukesuzuki)
　　我们支持了 TypeScript 4.5 的新语法：
　　Import 语句中的 type // 例子 import { type A } from ＂mod＂;
　　私有属性 // 例子 class Foo {   #prop1;   method() {     return #prop1 in this;   } }
　　Import 断言 // 例子 import obj from ＂./something.json＂ assert { type: ＂json＂ };
　　处理 .mts 和 .cts
　　Prettier 现在会以 TypeScript 处理 .mts 和 .cts 结尾的文件。 HTML折叠 HTML 的 class 属性到一行Collapse HTMLclassattributes onto one line (#11827by@jlongster)
　　回退  #7865。
　　虽然之前的这个特性对于一些 CSS 库例如 Tailwind 的用户是有用的。因为这些库会产生大量的 CSS 属性。但是我们始终没法找到合适的方法得到让我们满意的结果。我们仍然在找更好的办法来去处理大量 CSS 的问题。如果你关心这个事情，请来和我们讨论。         MDX增加对 MDX v2 注释语法的支持Add support for MDX v2 comment syntax (#11563by@wooorm)
　　目前增加了对于 MDX v2注释的语法，类似 JavaScript 形式，而 MDX v1 的注释时形如 HTML 样式的。
　　注意：目前 Prettier 只支持单行注释，所以{/* prettier-ignore */}可以使用，MDX v2 其他的部分还不支持。 Input: {/*A comment*/}  Prettier 2.4: {/_A comment_/}  Prettier 2.5: {/*A comment*/}其他改变JavaScript修复括号作为箭头函数返回的序列表达式时的情况Fix parentheses around sequence expression as body of arrow chain (#11593by@bakkot)
　　箭头函数返回的序列表达式的括号会保留下来。之前，Prettier 会移除他们，会造成语法问题。 // 输入 const f = () => () => (0, 1);  // Prettier 2.4 const f = () => () => 0, 1;  // Prettier 2.5 const f = () => () => (0, 1);sloppy 模式的语法错误会忽略Ignore errors for sloppy mode syntax (#11750by@fisker,#11778by@sosukesuzuki)
　　JavaScript 的严格模式会增加一些有用的报错来避免错误。一些错误是在解析语法时触发的。因为 Prettier 的目标是格式化代码，而不是这些代码是否能跑起来，这些跑起来正确的检查任务应该留给 linters，compilers 和 runtime。 // 输入 function foo() { var bar = 1; delete bar; }  // Prettier 2.4 SyntaxError: Deleting local variable in strict mode. (1:31) > 1 | function foo() { var bar = 1; delete bar; }     |                               ^  // Prettier 2.5 function foo() {   var bar = 1;   delete bar; }嵌入 CSS 的括号和表达式之间的空格会保留Respect spacing for between expressions and parentheses in embedded CSS (#11800by@sosukesuzuki)// 输入 const paragraph2 = css`   transform1: ${expr}(30px);   transform2: ${expr} (30px); `;  // Prettier 2.4 const paragraph2 = css`   transform1: ${expr} (30px);   transform2: ${expr} (30px); `;  // Prettier 2.5 const paragraph2 = css`   transform1: ${expr}(30px);   transform2: ${expr} (30px); `;espree 解析器支持 ES2022 私有类属性 Support ES2022 class-private-fields-in syntax inespreeparser (#11835by@fisker)// 例子 class Foo {   #brand;   static isC(obj) {     return #brand in Foo;   } } TypeScript去除装饰器的不必要的括号Remove unnecessary parentheses for decorators (#11717,#11849by@sosukesuzuki)// 输入 class Test {   @foo`bar`   test1: string = ＂test＂    @test().x(＂global＂).y()   test2: string = ＂test＂; }  // Prettier 2.4 class Test {   @(foo`bar`)   test: string = ＂test＂    @(test().x(＂global＂).y())   test2: string = ＂test＂; }  // Prettier 2.5 class Test {   @foo`bar`   test: string = ＂test＂    @test().x(＂global＂).y()   test2: string = ＂test＂; }SCSS改进 @use with 格式 Improve@use withformatting (#11637by@sosukesuzuki)// 输入 @use ＂library＂ with (   $black: #222,   $border-radius: 0.1rem,   $font-family: ＂Helvetica, sans-serif＂ );  // Prettier 2.4 @use ＂library＂ with   ($black: #222, $border-radius: 0.1rem, $font-family: ＂Helvetica, sans-serif＂);  // Prettier 2.5 @use ＂library＂ with (   $black: #222,   $border-radius: 0.1rem,   $font-family: ＂Helvetica, sans-serif＂ ); 修复 @forward with 的格式错误 Fix@forward withformatting error (#11683by@sriramarul,@sosukesuzuki)// 输入 @forward ＂foo.scss＂ with ($components: red);  // Prettier 2.4 TypeError: Cannot read properties of undefined (reading ＂type＂)  // Prettier 2.5 @forward ＂foo.scss＂ with (   $components: red ); Ember / Handlebars使用相反的引号模式对于 mustache statements 中的引用Uses the opposite quote type for quotes inside mustache statements in attributes (#11524by@bmaehr){}   {}   {} Markdown嵌入 TSX 的尾后逗号会保留Keep trailing commas for type parameters in embedded TSX (#11685by@sosukesuzuki)
　　尾后逗号是必要的，因为它可以防止 TypeScript 认为  是印个 JSX 表达式的开始  ```tsx const test = (value: T) => {}; ```   ```tsx const test = (value: T) => {}; ```   ```tsx const test = (value: T) => {};
　　转载请注明本文知乎链接和译者 Hugo。