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

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

## 1.为什么要用Prettier ##

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

## 2.配置过程 ##

1.  在项目根目录创建一个 .prettierrc文件  
    ![在这里插入图片描述][20200715152656100.jpg]
2.  文件中添加所需要的规则，如将分号;进行去除（semi），或者将双引号改为单引号(singleQuote)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]
3.  进行文件的保存，然后使用格式化代码快捷键shift+art+F，就可以看到效果了  
    **格式化前：**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1]  
    **格式化后：**  
    可以看到双引号变成了单引号，分号也不见了  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 2]  
    然后下面是一些常见的配置项，可以根据需要自行添加

"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相同。

[prettier官网链接][prettier]

[20200715152656100.jpg]: /images/20230209/531dcc5e673b4ae2b05c8762b7901558.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20230209/2e95232424414bacb8a904ff1d237ce5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1]: /images/20230209/188678bfb16c426e8d8380a7f7f0cf36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 2]: /images/20230209/4b3da396ab3045aaa4c0b13e4074a70a.png
[prettier]: https://prettier.io/