Vue3 -- 项目配置之prettier【企业级项目配置保姆级教程2】

引言：

有了eslint，为什么还要有prettier？

eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持包含js在内的多种语言。

总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。 【摘自尚硅谷课程笔记】

配置prettier：

安装依赖包：

javascript 复制代码

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

创建.prettierrc.cjs：

在根目录下创建.prettierrc.cjs文件：

javascript 复制代码

// @see: https://www.prettier.cn

module.exports = {
    // 指定最大换行长度
    printWidth: 130,
    // 缩进制表符宽度 | 空格数
    tabWidth: 2,
    // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
    useTabs: false,
    // 结尾不用分号 (true：有，false：没有)
    semi: true,
    // 使用单引号 (true：单引号，false：双引号)
    singleQuote: false,
    // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
    quoteProps: "as-needed",
    // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
    jsxSingleQuote: false,
    // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
    trailingComma: "none",
    // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
    bracketSpacing: true,
    // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
    bracketSameLine: false,
    // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
    arrowParens: "avoid",
    // 指定要使用的解析器，不需要写文件开头的 @prettier
    requirePragma: false,
    // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
    insertPragma: false,
    // 用于控制文本是否应该被换行以及如何进行换行
    proseWrap: "preserve",
    // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
    htmlWhitespaceSensitivity: "css",
    // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
    vueIndentScriptAndStyle: false,
    // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
    endOfLine: "auto",
    // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
    rangeStart: 0,
    rangeEnd: Infinity
};

具体看prettier官网

创建.prettierignore文件：

javascript 复制代码

/dist/*
.local
/node_modules/**


**/*.svg
**/*.sh

/public/*
stats.html

测试：

如上图代码，书写的语法没有问题，但是格式非常丑陋。我们运行 pnpm run lint，他会给我们指出这里的格式规范：

使用 pnpm run fix 自动将代码修改整齐：

总之，我感觉是非常有用的！对于一个有代码洁癖的人来说，狂喜！！爱了爱了~~~/// . ///