1.全局安装 prettier
包安装在Node安装目录下的node_modules文件夹中,一般在\Users\用户名\AppData\Roaming\ 目录下,可以使用npm root -g查看全局安装目录。
全局安装
npm install --global prettier
2.在webstrom加载prettier
我的版本是2023的
3.保存后,设置.prettierrc.js
在项目新建.prettierrc.js,跟package.json同级
module.exports = {
// 使用 4 个空格缩进
tabWidth: 4,
// 使用单引号
singleQuote: true,
// 在对象,数组括号与文字之间加空格 "{ foo: bar }"
bracketSpacing: true,
// 换行符使用 lf 结尾是 \n \r \n\r auto
endOfLine: 'auto',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'ignore',
// 末尾不需要逗号 'none'
trailingComma: 'none',
// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
arrowParens: 'avoid',
// 缩进使用tab,不使用空格
useTabs: true,
// 行尾需要有分号
semi: false,
// 一行最多 200 字符 超过最大值换行
printWidth: 200,
// 不缩进vue文件script和style标签
vueIndentScriptAndStyle: false,
// 在Html,Vue,JSX中是否强制每条属性占用一行
singleAttributePerLine:false,
// jsx中使用单引号 否
jsxSingleQuote: false
}
保存后,会自动校正。如果没有用就重启idea