Vue3实践指南：Prettier代码格式化工具

本文主要是介绍Vue3实践指南：Prettier代码格式化工具，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、Prettier代码格式化工具

　　Prettier 是一个代码格式化工具，它可以支持 js/jsx/ts/flow/json/css/less/scss 等文件格式。

1、为什么要使用 Prettier？

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

2、VSCode 配置 Prettier

（1）安装 Prettier - Code formatter 插件

（2）在项目的根目录配置 .prettierrc

{
  "printWidth": 100, //每行到多少长度开始折行
  "tabWidth": 2,
  "singleQuote": true, //单引号
  "trailingComma": "none", //数组、对象最后一个元素的尾逗号
  "bracketSpacing": true, //花括号前后空格
  "jsxBracketSameLine": true, //使多行JSX元素最后一行末尾的 > 单独一行
  "parser": "babel", //指定使用哪一种解析器
  "semi": true, //是否在行尾加分号
  "useTabs": true, //使用tab（制表符）缩进而非空格
  "arrowParens": "avoid", //只有一个参数的箭头函数的参数是否带圆括号（默认avoid不带）
  "jsxSingleQuote": true, //在JSX中使用单引号
  "htmlWhitespaceSensitivity": "ignore", //为 HTML 文件定义全局空格敏感度
  "quoteProps": "as-needed" //自定义引号配置
}

　　放到项目中时注释要去掉。这样 Prettier 已经安装、配置完成了，以后用 Shift+Alt+F 格式化代码的时候就会按照 Prettier 的配置项进行格式化。

　　VSCode 中，Prettier 插件使用配置文件的优先级：.prettierrc > .editorconfig > Prettier插件默认设置。

这篇关于Vue3实践指南：Prettier代码格式化工具的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！