Prettier-Codeformatter使⽤
更多VSCode插件使⽤请访问：
Prettier - Code formatter这是⼀款格式化js、css代码插件，暂不解释。
Prettier是什么？
的中⽂意思是“漂亮的、机灵的”，也是⼀个流⾏的代码格式化⼯具的名称，它能够解析代码，使⽤你⾃⼰设定的规则来重新打印出格式规范的代码。
Prettier具有以下⼏个有优点：
1.可配置化
2.⽀持多种语⾔
3.集成多数的编辑器
4.简洁的配置项
使⽤Prettier在code review时不需要再讨论代码样式，节省了时间与精⼒。
如何对Prettier进⾏配置
⼀共有三种⽅式⽀持对Prettier进⾏配置：
1.根⽬录创建.prettierrc⽂件，能够写⼊YML、JSON的配置格式，并且⽀持.yaml、.yml、.json、.js后缀；
2.根⽬录创建.fig.js⽂件，并对外export⼀个对象；
3.在package.json中新建prettier属性。
下⾯我们使⽤prettierrc.js的⽅式对prettier进⾏配置，同时讲解下各个配置的作⽤。
// 使⽤ 2 个空格缩进
tabWidth: 2,
// 不使⽤缩进符，⽽使⽤空格
useTabs: false,
// ⾏尾需要有分号
semi: true,
// 使⽤单引号
singleQuote: true,
// 对象的 key 仅在必要时⽤引号
quoteProps: 'as-needed',
// jsx 不使⽤单引号，⽽使⽤双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// ⼤括号内的⾸尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换⾏
jsxBracketSameLine: false,
// 箭头函数，只有⼀个参数的时候，也需要括号
arrowParens: 'always',
// 每个⽂件格式化的范围是⽂件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写⽂件开头的 @prettier
requirePragma: false,
// 不需要⾃动在⽂件开头插⼊ @prettier
insertPragma: false,
// 使⽤默认的折⾏标准
proseWrap: 'preserve',
// 根据显⽰样式决定 html 要不要折⾏
htmlWhitespaceSensitivity: 'css',
// 换⾏符使⽤ lf
endOfLine: 'lf'
}
配置⼤概列出了这些，还有⼀些其他配置可以在进⾏查阅。
注意⼀点，parser的配置项官⽹列出了如下可选项：
babylon
flow
typescript Since v1.4.0
postcss Since v1.4.0
json Since v1.5.0
graphql Since v1.5.0
markdown Since v1.8.0
但是如果你使⽤了vue的单⽂件组件形式，记得将parser配置为vue，⽬前官⽅⽂档没有列出来。当然如果你⾃⼰写过AST的解析器，也可以⽤你⾃⼰的写的parser: require("./my-parser") 。
Prettier + editorConfig 搭配使⽤处理旧项⽬⽂件
如果你有⼀个旧项⽬想通过Prettier + editorConfig来简单规范⼀下格式也可以使⽤这个⼯具：
1.分别安装两个⼯具不必多说了
2.创建.prettierrc配置⽂件
该配置⽂件会继承editorConfig的配置
3.向package.json添加可执⾏脚本: prettier": "prettier --write ./*
例如：
prettier": "prettier --write './src/**/*.js' './src/**/*.jsx' './src/**/*.css' './src/**/*.scss'
4.创建.prettierignore⽂件，⽤来忽略⼀些⽂件 && ⽬录
5.⼀切准备就绪之后 !!!! npm run prettier就可以看到提⽰⽂件更改记录了
.prettierrc.js配置⽂件：
# .prettierrc.js 配置⽂件
// prettier.io/docs/en/options.html
trailingComma: "none", // 数组对象尾随不需要逗号
浏览器json格式化
bracketSpacing: true, // 对象空格 { foo: bar }, false=> {foo:bar}
jsxBracketSameLine: false, // jsx闭标签是否另起⼀⾏ <Test></Test>
arrowParens: 'always', // 箭头函数，只有⼀个参数的时候，也需要括号
singleQuote: true, // 单引号
semi: true, //是否在语句末尾就分号
};
.prettierignore⽂件配置
# .prettierignore ⽂件配置
/node_modules
/dist
/src/lib/
/
src/global/fonts
/docs
/.vscode
node_modules
.eslintrc.js
package.json
package-lock.json

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。