Vue项目配置代码格式化工具Prettier

最新推荐文章于 2024-05-06 10:07:11 发布
最新推荐文章于 2024-05-06 10:07:11 发布
阅读量7.6k 收藏 4
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011200562/article/details/107361707
版权
1.为什么要用Prettier用来替代lint中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查出问题之后还需要手动修改，而通常这样的错误都是空格或者符号之类的，这样相对来说不太优雅，利用格式化工具自动生成省时省力。2.配置过程在项目根目录创建一个 .prettierrc文件文件中添加所需要的规则，如将分号;进行去除（semi），或者将双引号改为单引号(singleQuote)进行文件的保存，然后使用格式化代码快捷键shift+art+F，就可以看到效果了格式化前：
摘要由CSDN通过智能技术生成

1.为什么要用Prettier

用来替代lint中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查出问题之后还需要手动修改，而通常这样的错误都是空格或者符号之类的，这样相对来说不太优雅，利用格式化工具自动生成省时省力。

2.配置过程

  1. 在项目根目录创建一个 .prettierrc文件
    在这里插入图片描述
  2. 文件中添加所需要的规则，如将分号;进行去除（semi），或者将双引号改为单引号(singleQuote)
    在这里插入图片描述
  3. 进行文件的保存，然后使用格式化代码快捷键shift+art+F，就可以看到效果了
    格式化前：
最低0.47元/天 解锁文章
前端一枚
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解如何在vue项目中使用eslint+prettier格式化代码
10-17
本文将详细讲解如何在Vue项目中集成`eslint`和`prettier`，以实现代码的自动格式化和规范检查。 `eslint`是一款强大的静态代码分析工具，它可以检查代码中的错误、潜在问题，并且支持自定义规则来符合特定的编码...
prettier
besttoby01的博客
09-21 1648
保存一套prettier规则 { // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter":
vue项目中配置eslint和prettier
热门推荐
weixin_42349568的博客
10-24 2万+
一，现象 新建vue项目后，写完代码后，希望能保存ctrl+s之后，自动格式化代码 目前只是使用vue-cli脚手架创建的项目，虽然引入了eslint，但要想在vscode中保存代码时，实现自动格式化，还需要做以下的配置。 二.安装vscode插件 ????首先要确保已经安装了 ESLlint、Vetur、Prettier 这三个插件。 1，eslint 在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量
常用的Prettier配置项
最新发布
qq_40483419的博客
05-06 1440
代码格式化工具Prettier的介绍及其配置项
【vue基础篇】极简 ESLint + Prettier 配置教程
军火库
09-21 3459
删繁就简，字斟句酌，只写通俗易懂的文章；我曾在很长一段时间里，都没有搞清楚 ESLint 的正确配置方法。网上的文章质量也是一言难尽，造成了许多的误导。现在，我理清楚了 ESLint 的配置逻辑。撰写此文，以作日后查漏补缺之用，也希望能对同样迷惑的你带来帮助；亲测，历经多次测试。不管是在创建新项目，还是改造旧项目时，跟着教程进行配置都是 ok 的；node.js 版本是：v12.14.0npm 版本是：6.13.4vue-cli 版本是：vue/cli 4.5.11。
Vue3+Ts+Vite 项目搭建&项目说明
kiku
07-26 2913
如题。
vue项目通过eslint格式校验，通过prettier格式化，eslint+prettier前端项目统一格式规范
liqifengmu的博客
08-07 1782
Eslint+Prettier详细配置，解决Eslint和Prettier冲突，统一团队中所有的vscode编辑器配置，减少因为格式问题导致的冲突
vue项目代码规范eslint和prettier插件
黎小小的博客
01-16 1712
Prettier用于统一代码格式，它主要关注代码外观，例如缩进、换行、引号等ESlint 用于代码质量和规范，它主要可以检查代码错误，不良习惯和潜在问题在VScode中下载插件。
prettier自动格式化去换行的实现代码
10-14
Prettier是一款流行的代码格式化工具，它可以帮助开发者统一代码风格，提高代码可读性和团队协作效率。在本文中，我们将深入探讨如何实现Prettier自动格式化去换行的功能，以及相关的配置设置。 首先，要实现...
vscode 配置vue+vetur+eslint+prettier自动格式化功能
10-15
主要介绍了vscode 配置vue+vetur+eslint+prettier自动格式化功能，本文通过实例代码图文的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
详解VS Code使用之Vue工程配置format代码格式化
01-19
编辑器另外一个很重要的功能就是代码格式化了，VS Code默认提供常见文件的格式化，如.js,.html等。 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持。 1. 安装 Vetur 插件 2. 在 VS Code 的...
vue中使用prettier
weixin_45855469的博客
02-28 815
配置Prettier在这里使用文件的形式，在src目录下新建文件，使用CommonJS的方式导出，先写上官网提供的简单的实例semi: false, // 结尾不使用分号singleQuote: false, // 字符串使用双引号。
Vue 项目中使用 ESLint 和 Prettier 偏难怪的超深度解析
王森的博客
05-24 2987
ESlint是一种用于识别和报告在Javascript代码中发现的格式错误的工具，其目标是使代码更加一致并避免错误。它类似于JSlint和JSHint，但还有点区别： ESlint使用Espree进行JavaScript解析； ESlint使用AST来评估代码中的模式； ESlint是完全可插拔的，每一条规则都是一个插件，你可以运行时添加更多； 我一开始认为ESlint和webpack有关系，实则两者是平行关系，ESlint是可执行的命令行，通we...
Vue项目中代码规范（Prettier + ESLint）
東三城的博客
08-30 2398
Prettier用于统一代码格式，它主要关注代码外观，例如缩进、换行、引号等； ESLint用于代码质量和规范，它主要可以检查代码错误，不良习惯和潜在问题
Prettier + Vetur 进行Vue2项目代码格式化
huangpb的博客
08-01 1万+
Prettier 是一个代码格式化工具，它可以支持 js/jsx/ts/flow/json/css/less/scss 等文件格式。 为什么要使用 Prettier？ 用来替代 lint 中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查出问题之后还需要手动修改，而通常这样的错误都是空格或者符号之类的，这样相对来说不太优雅，利用格式化工具自动生成省时省力。 VSCode...........................
Vue3 + ESLint + Prettier
高大哥
11-23 4480
Vue3 + ESLint + Prettier，setting.json配置，文件嵌套显示
vue项目使用eslint(编码规范)+prettier(格式)统一代码风格
weixin_43697548的博客
04-29 2618
vue项目使用eslint(编码规范)+prettier(格式)统一代码风格
vue3+vite 项目中配置prettier
Aurora_juan的博客
11-22 3344
遵循一致的代码规范能够显著增强代码可读性、可维护性，使得代码结构简洁清晰，还能减少bug的出现。为了防止Prettier和ESLint格式化功能冲突，还需要安装 eslint-config-prettier 来关闭ESLint中的代码格式化功能。在 .prettierignore 和 .eslintignore 文件中可以添加那些不需要格式化的文件或文件夹，在美化代码挑bug时忽略这些文件。美化代码结构的Prettier，检查代码质量的ESLint，强强结合会碰撞出什么样的火花呢？
vue 格式化代码规则配置
09-10
Vue 格式化代码规则配置可以通过使用 ESLint 和 Prettier 这两个常见的代码规范工具来实现。下面是一些常用的配置规则： 1. 安装依赖：使用 npm 或者 yarn 安装相关依赖 ```bash npm install eslint prettier ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值