格式化工具 Prettier

谈一谈格式化工具 Prettier

目录

• 1 、🧊前言
• 2 、📙Prettier是什么？
• 3 、安装
  • 3.1 首先、需要在项目中安装 Prettier , 可以使用 npm 或yarn 以及 pnpm
  • 3.2 适用于 vue3：
  • 3.3 安装完成后，在项目中创建一个.prettierrc.json或者.prettierrc文件来配置 prettier选项，例如缩进、换行符、引号等。这个文件可以放在项目中的根目录或者子目录中
• 4 、配置示例

1 、🧊前言

工欲善其事必先利其器，一个优秀的工具可以显著提高生产力。前端领域的工具并不多，常用的有 ESLint、stylelint、Prettier 等等

2 、📙Prettier是什么？

Prettier 是一个强约束的代码格式化工具，将原始格式的源代码按照设定的规则进行格式化， 然后输出格式化后的代码。支持常见的 js、jsx、html、json 等等编程语言或数据格式。

3 、安装

3.1 首先、需要在项目中安装 Prettier , 可以使用 npm 或yarn 以及 pnpm

pnpm install prettier --save-dev

3.2 适用于 vue3：

pnpm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier

3.3 安装完成后，在项目中创建一个.prettierrc.json或者.prettierrc文件来配置 prettier选项，例如缩进、换行符、引号等。这个文件可以放在项目中的根目录或者子目录中

4 、配置示例

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}