首页 | 编程 | Java

vscode 使用Prettier插件格式化配置使用代码详解

2020年08月10日 作者：胖鹅68原文

参考

使用ESLint+Prettier来统一前端代码风格

vscode 配置vue+vetur+eslint+prettier自动格式化功能

问题描述

  1. 最近用Nodejs + express 写了一个zip文件上传的功能，代码给了别人看，各种吐槽，代码不规范，没有按照eslint，编辑器打开就是各种红色提醒，当然还有其他许多…
  2. 第一反应就是反感，后面冷静一想，还是自己做事的态度有问题，做完了功能已经完成了95%，为什么不到最后一步一键格式化，做到百分百呢？反思中

为了让以后代码美观，不让别人吐槽，自己整理了vscode + prettier

1.使用vscode 安装 prettier 插件

2.先用 prettier 插件格式化

3.鼠标放到script代码中，右键 -> 源代码操作 -> eslint fix all auto-fixable problems 格式化

Vue文件中的HTML>结尾符号换行？

1.将配置文件.prettierrc.js的printWidth属性设置最大长度，尽量让html在同一行，如果html过长，换行的也是存在的，可以针对极少的手动去修改

module.exports = {
 "printWidth": 200, // 超过最大值换行
};

格式化函数的最后一个参数后面有逗号？

尾随逗号 Trailing Commas
多行时尽可能打印尾随逗号。（例如，单行数组永远不会得到尾随逗号。）

module.exports = {
	"trailingComma": "none" // 函数最后不需要逗号
};

有效选项：

“none” - 没有尾随逗号。

“es5” - 在ES5中有效的尾随逗号（对象，数组等）

“all” - 尽可能使用尾随逗号（包括函数参数）。这需要 nodejs 8。

JSX>结尾符号换行？— JSX Brackets

将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）。
默认CLIAPI/.prettierrc/prettier.config.js/package.json[“prettier”]
false--jsx-bracket-same-linejsxBracketSameLine:

module.exports = {
	"jsxBracketSameLine": true, // 在jsx中把'>' 不单独放一行
};

有效选项：

true - 示例：

<button
 className="prettier-class"
 id="prettier-id"
 onClick={this.handleClick}>
 Click Here
</button>

false - 示例：

<button
 className="prettier-class"
 id="prettier-id"
 onClick={this.handleClick}
>
 Click Here
</button>

总结

到此这篇关于vscode 使用Prettier插件格式化配置使用的文章就介绍到这了,更多相关vscode 使用Prettier插件格式化配置内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！

相关链接