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 动态路由权限控制
文章目录
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-prettier
和 eslint-plugin-prettier
):
- 关闭掉 ESLint 中所有与 Prettier 冲突的格式化规则。
- 针对 Prettier 自身的规则,使用 Prettier 进行格式化。
🍸 准备
安装依赖
npm install -D prettier eslint-config-prettier eslint-plugin-prettier
在 VS Code 启用
-
在 VS Code 安装 Prettier - Code formatter 扩展。如果您想打开和关闭格式化程序,可安装 vscode-status-bar-format-toggle。
-
设置为默认格式化程序。在 VS Code 中按
F1
,输入open settings json
打开首选项(settings.json)配置。输入或添加以下配置:{ // ↓为所有语言启用格式化 "editor.defaultFormatter": "esbenp.prettier-vscode", // ↓为指定语言启用格式化 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }
-
自动格式化。在
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 执行代码格式。
本文为博主原创文章,任何个人、团体、机构转载和摘录,请注明出处。