站长资源
中国站长网站

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. 如图所示:

webstorm中使用prettire统一代码风格

其中

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/

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » webstorm中使用prettire统一代码风格

评论 抢沙发

评论前必须登录!