Prettier 代码格式化插件

编辑器选择

VS Code

安装Prettier VS Code 自动格式化代码插件

安装成功后右键，多了“使用...格式化文档”，点击此项，VS Code 正上方弹出来的选择框有 Prettier 选项，表示安装成功。

使用

虽然，每次点击右键“使用...格式化文档“都能使用，但是更推荐，把 Prettier 设置成默认格式化程序。

1. 右键弹出菜单，点击 “使用...格式化文档”，弹出来格式化的选择框

2. 选择“配置默认格式化程序”，再选择“Prettier”。

   1. 

3. 再次打开“使用...格式化文档”，此时 Prettier 变成默认值，设置成功。

4. 下次就可以使用右键“格式化文档”，或 Shift + Alt + F 完成格式化了。

Prettier - Code formatter插件的设置

1. 打开settings文件

   1.   快捷键：
   2.      mac：Command + ，
   3.      Windows：Ctrl + ,
   4.     此时如下图打开settings视图界面，点击右上角图标（鼠标悬上去显示“Open Settings(UI)”字样），打开settings.json文件（Windows环境）
   5. 

2. 添加配置信息到settings.json文件中

// *  prettier的配置 */
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "terminal.integrated.allowMnemonics": true,
    // 额外配置
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    //报错的话，检查一下有没有用逗号与上一项设置分隔

上述是基础配置，可根据自己需要添加定制化配置。