[JavaScript知识库]10-Prettier配置

Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列

?01-创建项目???????02-环境变量???????03-Vite配置???????04-引入scss???????05-路由初试???????06-TS配置???????07-axios初试???????08-axios封装???????09-ESLint配置???????10-Prettier配置

源码地址：GitHub / 码云

Prettier配置

🎯 目标

完成 ESLint 与 Prettier 集成，使用 Prettier 执行代码格式化。

😴 功课

和上一章一样，我们还是先对 Prettier 做点功课。贴上 官方文档 。

什么是 Prettier

Prettier 是一个多语言支持的可配置化的代美化（码格式）化工具，用于统一项目中的代码风格。

那么问题来了，ESLint 不是也有格式化代码的功能吗？为什么还要用 Prettier？因为它们的侧重点不同。

为什么还要用 Prettier

ESLint 主要解决的是 代码质量问题 ，帮助开发人员发现编码错误。例如，如果你使用一个变量而不声明它，ESLint 会给你一个警告。Prettier 不会提供这方面的帮助。

Prettier 只解决 代码风格问题 ，它解析您的代码，并根据配置的格式规则重新 打印 所有代码。Prettier 可以强制执行一致的最大行长度，确保不要混合单引号和双引号，为每个数组项添加空格等。

Prettier 和 Linter 在代码格式化的思路上是不一样的：

• ESLint 的格式化思路是：给我一个规则，如果不符合这个规则，我才会去格式化。（被动格式化）
• Prettier 的格式化思路是：给我一个规则，如果不符合这个规则，我按照A格式格式化，如果符合这个规则，我按照B格式格式化。Prettier 会以一致的方式从头开始重新打印整个程序。（主动格式化）

💡 所以最好的解决方案是将两者集成。

Prettier 怎么用

怎么读取配置

Prettier 支持以下几种格式的配置文件（按优先级顺序排列）：

• package.json

• .prettierrc

• prettierrc.json

• .prettierrc.yml

• .prettierrc.yaml

• .prettierrc.json5

  以下是使用 module.exports 导出对象的方式：

  • .prettierrc.js
  • .prettierrc.cjs
  • prettier.config.js
  • prettier.config.cjs

配置文件将从被格式化的文件位置开始解析，并在文件树中搜索，直到找到（或未找到）配置文件。

怎么忽略被检测文件

使用 .prettierignore 文件忽略（即不格式化）某些文件和文件夹。把文件放到项目根目录，忽略模式同Git的 .gitignore 规范 。

配置项说明

• printWidth：指定编辑器中一行代码的长度，超过会换行。（默认 80）
• tabWidth：制表符 tab 宽度。（默认 2）
• useTabs：用制表符而不是空格缩进行。（默认 false）
• semi：在语句末尾加分号。（默认 true)
• singleQuote：使用单引号代替双引号。（默认 false）
• quoteProps：对象属性的引号配置。（默认 as-needed）
  • as-needed：仅在需要时给对象属性添加引号。
  • consistent：有一个对象属性需要引号，其它属性全部加上引号。
  • preserve：保留原样。
• jsxSingleQuote：在 JSX 中使用单引号代替双引号。（默认 false）
• trailingComma：在多行逗号分隔的语法结构中打印末尾逗号。（默认 es5）
  • es5：在es5有效的地方加上逗号。
  • none：末尾没有逗号。
  • all：在可能的地方都加上逗号。
• bracketSpacing：对象字面值中括号之间的空格。（默认 true)
• jsxBracketSameLine：将多行 JSX 元素的 > 放在最后一行的末尾，而不是单独放在下一行。（不适用于自关闭元素，默认 false）
• arrowParens：箭头函数中的参数加上括号。（默认 always）
  • always：始终使用。
  • avoid：有需要时使用。
• rangeStart：仅格式化文件的一部分。（默认 0 - Infinity）
  • rangeStart：开头位置。
  • rangeEnd：结束位置。
• parser：要使用的解析器，Prettier 会自动推断解析器，建议保持默认。
• filepath：要使用的解析器的文件名。此选项仅在 CLI 和 API 中有用，在配置文件中使用它没有意义。
• requirePragma：只格式化在文件顶部包含特殊注释的文件。（默认 false）
• insertPragma：在文件顶部插入一个特殊的 @format 标记，指定该文件使用 Prettier 进行格式化。（默认 false）
• proseWrap：Markdown 文本包装处理。（默认 preserve）
  • always：超过 printWidth 时处理。
  • never：从不处理。
  • preserve：保留原样。
• htmlWhitespaceSensitivity：HTML、Vue、Angular和Handlebars的空格敏感性。（默认 css）
  • css：保留 css 样式默认值。对 Handlebars 为 strict。
  • strict：所有标签周围的空白（或没有空白）都是重要的。
  • ignore：所有标签周围的空白（或没有空白）都是无关紧要的。
• vueIndentScriptAndStyle：是否缩进Vue中 <script> 和 <style> 标签内的代码。（默认 false）
• endOfLine：换行符。（默认 lf）
  • lf：仅换行 (\n)，常见于 Linux 和 macOS 以及 git repos 。
  • crlf：回车符 + 换行符 (\r\n)，常见于在 Windows 。
  • cr：仅回车符 (\r)，很少使用。
  • auto：保持现有换行符。
• embeddedLanguageFormatting：是否格式化文件中嵌入的引用代码，比如 Markdown 的代码。（默认 auto）
  • auto：格式化嵌入代码。
  • off：不格式化嵌入代码。

ESLint 与 Prettier 集成

当 ESLint 和 Prettier 一起使用时，因为都有代码格式化的功能，我需要解决两者之间的冲突（通过 eslint-config-prettier 和 eslint-plugin-prettier）：

• 关闭掉 ESLint 中所有与 Prettier 冲突的格式化规则。
• 针对 Prettier 自身的规则，使用 Prettier 进行格式化。

🍸 准备

安装依赖

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

在 VS Code 启用

1. 在 VS Code 安装 Prettier - Code formatter 扩展。如果您想打开和关闭格式化程序，可安装 vscode-status-bar-format-toggle。

2. 设置为默认格式化程序。在 VS Code 中按 F1，输入 open settings json 打开首选项（settings.json）配置。输入或添加以下配置：

   {
       // ↓为所有语言启用格式化
       "editor.defaultFormatter": "esbenp.prettier-vscode",
       // ↓为指定语言启用格式化
       "[javascript]": {
           "editor.defaultFormatter": "esbenp.prettier-vscode"
       }
   }
   

3. 自动格式化。在 settings.json 添加配置：

   {
       // ↓自动格式化
       "editor.formatOnSave": true,
   }
   

创建 Prettier 配置文件

在 src 目录下创建 .prettierrc.js 和 .prettierignore 文件。

🌈 Coding

修改 ESLint 文件

在 .eslintrc.js 中的 extends 属性增加两个扩展，代码如下：

"extends": [
    // ↓ESLint的内置基本规则集
    "eslint:recommended",
    // ↓Vue规则集，尚不支持Vue3 CSS变量注入功能
    "plugin:vue/vue3-recommended",
    // ↓Vue-TypeScript规则集
    "@vue/typescript/recommended",
    // ↓解决和 ESLint 的冲突
    "prettier",
    // ↓prettier规则集
    "plugin:prettier/recommended",
]

配置 Prettier

.prettierrc.js 代码如下：

module.exports = {
  printWidth: 120,
  semi: false,
  singleQuote: true,
}

配置被忽略文件

.prettierignore 代码如下：

*.sh
node_modules
*.md
*.woff
*.ttf
*.svg
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

🎭 结果

打开 Axios.vue ，“get请求” 和 “post请求” 两个按钮出现红色下划线错误。Ctrl + s 保存文件时自动修复。

之前被 ESLint 格式化，拆分几行的按钮又合到一行去了，说明已经是按 Prettier 执行代码格式。

本文为博主原创文章，任何个人、团体、机构转载和摘录，请注明出处。