WebStorm中使用prettire统一代码风格

一些中大型项目肯定需要协同工作，除了使用版本工具管理我们的代码，还需要有统一的代码风格，现在市面上最常用的就是Prettire + Eslint的组合。两者有啥区别？你可以这么认为 Prettire主要针对代码的风格，Eslint则偏重于语法的检测。今天我们主要介绍Prettire(因为本人不喜欢Eslint，O(∩_∩)O哈哈~)

首先确保安装了node环境官方说是大于8.0即可，我的webstorm版本是最新的2021，NODE也是最新的，配置大同小异，稍有区别自己百度一下

安装配置

局部安装

npm install --save-dev --save-exact prettier

全局安装prettier(我的是全局安装，因为是非工程化项目，不想放在项目内污染目录结构)

npm install --global prettier

Windows全局安装包的位置一般为

C:\Users\用户名\AppData\Roaming\npm\node_modules\prettier

打开webstorm点击菜单file打开Settings/Languages and Frameworks/JavaScript/Prettier. 如图所示：

其中

Prettire package: // 选择你prettier的目录位置

Run for files: // 触发格式化的文件后缀，自己添加即可，我这里加了html

自定义规则

这时我们保存代码就已经可以进行格式化了，他默认的缩进是2个空格，但是我习惯用4个空格，这时就需要对Prettier的格式化规则进行定制，步骤如下：

1，我们项目根目录创建.prettierrc文件或.prettierrc.js文件(我为了写注释创建的是.prettierrc.js文件)

2，粘贴规则(以下是我的规则选其中一种文件类型即可)

// .prettierrc 文件

{
    "arrowParens": "always",
    "bracketSameLine": true,
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "jsxBracketSameLine": true,
    "printWidth": 200,
    "proseWrap": "preserve",
    "requirePragma": false,
    "semi": false,
    "singleQuote": false,
    "tabWidth": 4,
    "trailingComma": "none",
    "useTabs": false,
    "vueIndentScriptAndStyle": false
}

// .prettierrc.js 文件

module.exports = {
    arrowParens: "always", // 箭头函数参数括号 默认avoid 可选 avoid| always  PS：avoid 能省略括号的时候就省略 例如x => x | always 总是有括号
    bracketSameLine: true, // 设置为true时 > 放在最后一行的末尾，而不是单独放在下一行
    bracketSpacing: true, // 对象中打印空格 默认true  PS：true: { foo: bar } false: {foo: bar}
    embeddedLanguageFormatting: "auto", // 是否自动格式化嵌入的代码，可选值"<auto|off>" auto：如果 prettier 可以自动识别它，格式嵌入式代码。off：切勿自动格式化嵌入的代码
    htmlWhitespaceSensitivity: "css", // 根据显示样式决定 html 要不要折行
    insertPragma: false, // 自动在文件开头插入参数注释
    jsxSingleQuote: false, // JSX字符串使用单引号
    jsxBracketSameLine: true, // 设置为true时,将多行JSX元素的 > 放在最后一行的末尾，而不是单独放在下一行
    printWidth: 200, // 换行长度即一行多少字符，我的屏幕较大设置了200,默认80
    proseWrap: "preserve", // 使用默认的折行标准
    requirePragma: false, // 是否需要写文件开头的参数注释
    semi: false, // 每行末尾自动添加分号
    singleQuote: false, // 字符串使用单引号
    tabWidth: 4, // tab缩进大小,默认为2
    trailingComma: "none", // 最后一行是否使用尾逗号，有三个可选值"<none|es5|all>"
    useTabs: false, // 使用tab缩进，默认false为不使用tab使用空格
    vueIndentScriptAndStyle: false // 是否缩进Vue文件中的脚本和样式标签
}

注:可以用我的改，也可以去官网生成，地址：https://prettier.io/playground/