Javascript

【金秋打卡】第11天 vue3 Prettier

本文主要是介绍【金秋打卡】第11天 vue3 Prettier,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称:基于Vue3最新标准,实现后台前端综合解


课程章节: 第一章


课程讲师:Sunday



课程内容

    

    我们知道了 ESLint 可以让我们的代码格式变得更加规范,但是同样的它也会带来开发时编码复杂度上升的问题。


那么有没有办法既可以保证 ESLint 规则校验,又可以让开发者无需关注格式问题来进行顺畅的开发呢?就是prettier


  1.     一个代码格式化工具

  2.     开箱即用

  3.     可以直接集成到 VSCode 之中

  4.     在保存时,让代码直接符合 ESLint 标准(需要通过一些简单配置)


在 VSCode 中安装 prettier 插件(搜索 prettier),这个插件可以帮助我们在配置 prettier 的时候获得提示


https://img2.sycdn.imooc.com/636302740001e28707710293.jpg


在项目中新建 .prettierrc 文件,该文件为 perttier 默认配置文件

{
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中,最后一行不加逗号
  "trailingComma": "none"
}

并且再设置中 勾选

https://img1.sycdn.imooc.com/636302aa00012cdf08010246.jpg

那么此时的这个问题就是 prettier 和 ESLint 的冲突问题。


针对于这个问题我们想要解决也非常简单:


打开 .eslintrc.js 配置文件


在 rules 规则下,新增一条规则


'space-before-function-paren': 'off'


该规则表示关闭《方法名后增加空格》的规则




https://img4.sycdn.imooc.com/636303460001b96d10320680.jpg













 


这篇关于【金秋打卡】第11天 vue3 Prettier的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!