webstorm 配置项目 .prettierrc 文件,规范项目代码

562 阅读1分钟

1.全局安装 prettier

包安装在Node安装目录下的node_modules文件夹中,一般在\Users\用户名\AppData\Roaming\ 目录下,可以使用npm root -g查看全局安装目录。

全局安装

npm install --global prettier

2.在webstrom加载prettier

我的版本是2023的

image.png

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