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

柔光的暖阳◎ 2023-02-26 11:24 157阅读 0赞

1.为什么要用Prettier

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

2.配置过程

  1. 在项目根目录创建一个 .prettierrc文件
    在这里插入图片描述
  2. 文件中添加所需要的规则，如将分号;进行去除（semi），或者将双引号改为单引号(singleQuote)
    在这里插入图片描述

  3. 进行文件的保存，然后使用格式化代码快捷键shift+art+F，就可以看到效果了
    格式化前：在这里插入图片描述
    格式化后：
    可以看到双引号变成了单引号，分号也不见了
    在这里插入图片描述
    然后下面是一些常见的配置项，可以根据需要自行添加

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

prettier官网链接

发表评论

表情：
评论列表 （有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读