一、 安装

对于prettier的使用有三种安装使用方式

1. vs Code插件安装（作者推荐）

vsCode插件商店》搜索prettier》 安装

2. 项目中安装（论情况而定）

   安装命令

   
   //npm
   npm install --save-dev --save-exact prettier
   
   //yarn
   yarn add --dev --exact prettier
   
   

3. 全局安装（不推荐）

二、 创建文件

在项目根目录下创建.prettierrc.js或.prettierrc配置文件,如果需要配置忽略文件便继续创建.prettierignore文件，里面配置需要忽略的文件

三、 配置项

配置文件

• js格式（.prettierrc.js）

//此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

• json格式（.prettierrc）

{
     "semi": true,
     "singleQuote": true
}

忽略文件

在.prettierignore中写入以下内容：

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

这只是本人使用中的一些简单使用所总结

详情可 参考配置