Vue3 -- 项目配置之prettier【企业级项目配置保姆级教程2】

引言:

有了eslint,为什么还要有prettier?

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

总结起来,eslint和prettier这俩兄弟一个保证js代码质量,一个保证代码美观。 【摘自尚硅谷课程笔记】

配置prettier:

安装依赖包:

javascript 复制代码
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

创建.prettierrc.cjs:

在根目录下创建.prettierrc.cjs文件:

javascript 复制代码
// @see: https://www.prettier.cn

module.exports = {
    // 指定最大换行长度
    printWidth: 130,
    // 缩进制表符宽度 | 空格数
    tabWidth: 2,
    // 使用制表符而不是空格缩进行 (true:制表符,false:空格)
    useTabs: false,
    // 结尾不用分号 (true:有,false:没有)
    semi: true,
    // 使用单引号 (true:单引号,false:双引号)
    singleQuote: false,
    // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
    quoteProps: "as-needed",
    // 在JSX中使用单引号而不是双引号 (true:单引号,false:双引号)
    jsxSingleQuote: false,
    // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
    trailingComma: "none",
    // 在对象,数组括号与文字之间加空格 "{ foo: bar }" (true:有,false:没有)
    bracketSpacing: true,
    // 将 > 多行元素放在最后一行的末尾,而不是单独放在下一行 (true:放末尾,false:单独一行)
    bracketSameLine: false,
    // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid:省略括号,always:不省略括号)
    arrowParens: "avoid",
    // 指定要使用的解析器,不需要写文件开头的 @prettier
    requirePragma: false,
    // 可以在文件顶部插入一个特殊标记,指定该文件已使用 Prettier 格式化
    insertPragma: false,
    // 用于控制文本是否应该被换行以及如何进行换行
    proseWrap: "preserve",
    // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值, "strict" - 空格被认为是敏感的 ,"ignore" - 空格被认为是不敏感的
    htmlWhitespaceSensitivity: "css",
    // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
    vueIndentScriptAndStyle: false,
    // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
    endOfLine: "auto",
    // 这两个选项可用于格式化以给定字符偏移量(分别包括和不包括)开始和结束的代码 (rangeStart:开始,rangeEnd:结束)
    rangeStart: 0,
    rangeEnd: Infinity
};

具体看prettier官网

创建.prettierignore文件:

javascript 复制代码
/dist/*
.local
/node_modules/**


**/*.svg
**/*.sh

/public/*
stats.html

测试:

如上图代码,书写的语法没有问题,但是格式非常丑陋。我们运行 pnpm run lint,他会给我们指出这里的格式规范:

使用 pnpm run fix 自动将代码修改整齐:

总之,我感觉是非常有用的!对于一个有代码洁癖的人来说,狂喜!!爱了爱了~~~/// . ///

相关推荐
麦麦大数据1 天前
F024 RNN+Vue+Flask电影推荐可视化系统 python flask mysql 深度学习 echarts
python·rnn·深度学习·vue·echarts·电影推荐
技术钱1 天前
vue3 封装图片上传预览组件支持docx、excel、pdf、图片、txt格式
vue.js·pdf·excel
kyle~1 天前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light601 天前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏1 天前
elementUI 表单验证-联动型校验
前端·javascript·elementui
一只小风华~1 天前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟1 天前
html 实现鼠标滑动点亮横轴
前端·javascript·html
计算机学姐1 天前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA1 天前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
iCoding911 天前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构