代码格式化

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

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

安装

# 安装prettier
pnpm install -D prettier
# 解决prettier和eslint的冲突
pnpm install -D eslint-plugin-prettier  eslint-config-prettier

配置规则

• 在根目录下新建.prettierrc.js，然后在.prettier.js中加入规则
• 官方配置

export default module = {
    printWidth: 100, // 一行代码的最大字符数，超过最大值换行
    tabWidth: 4, // 缩进字节数
    useTabs: true, // 使用tab来缩进
    semi: true, // 句尾添加分号
    singleQuote: true,   // 使用单引号代替双引号。
    bracketSpacing: true,//打印对象文字中括号之间的空格。
    embeddedLanguageFormatting: 'off',//永远不要自动格式化嵌入的代码。
}

配置脚本

• 在package.json中加入脚本

"scripts": {
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json}\"",
},

配置忽略

• 项目根目录创建.prettierignore 并加入规则

/dist/*
/html/
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*