10-ESLint与Prettier集成配置及说明

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

✅01-初始化 Vite 项目
✅02-配置 Vite2 环境变量
✅03-Vite2 配置及说明
✅04-Vue3 使用 SCSS
✅05-Vue3 路由配置
✅06-TypeScript 配置及说明
✅07-Vue3 使用 axios
✅08-Vue3 axios 对象封装
✅09-ESLint 配置及说明
✅10-ESLint 与 Prettier 集成配置及说明
✅11-Mock.js 模拟接口数据
✅12-Vite2 引入 Element-Plus 框架
✅13-渐变+透明样式实现清爽登录页
✅14-Element-Plus 实现后台管理系统布局
✅15-Pinia 实现 store 状态管理
✅16-Vue3 动态路由权限控制


源码地址:GitHub / 码云


ESLint 与 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-prettiereslint-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 执行代码格式。
    在这里插入图片描述

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

code-bee

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值