Vue项目配置代码格式化工具-蒲公英云

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

灰太狼 2023-07-13 15:12 178阅读 0赞

1.为什么要用Prettier

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

2.配置过程

在项目根目录创建一个 .prettierrc文件
文件中添加所需要的规则，如将分号;进行去除（semi），或者将双引号改为单引号(singleQuote)。
进行文件的保存，然后使用格式化代码快捷键，就可以看到效果了。

格式化前： 在这里插入图片描述

格式化后： 在这里插入图片描述

可以看到双引号变成了单引号，分号也不见了。

然后下面是一些常见的配置项，可以根据需要自行添加。

"printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
  "tabWidth": 2, //一个tab代表几个空格数，默认为80
  "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  "semi": true, //行位是否使用分号，默认为true
  "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
  "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。