pettier学习

介绍

https://www.prettier.cn/

Prettier 是一款流行的代码格式化工具，它可以自动化地进行代码格式化，以帮助开发者提高代码的可读性和维护性。

vue项目安装Pettier

安装包

npm install --save-dev prettier

创建配置文件(.prettierrc)添加内容：

{
  "singleQuote": true,
  "trailingComma": "none"
}

singleQuote 表示是否使用单引号替代双引号

trailingComma 不加对象|数组最后逗号

添加内容至main.js

const a = {"b":1,}

执行：

npx prettier --write "**/*.js"

执行后发现b的双引号不见了，1后的逗号也不见了。

选择引入Perttier的VUE项目

默认配置(.prettierrc.json)：

{
  // 指定了配置文件的JSON Schema URL
  "$schema": "https://json.schemastore.org/prettierrc",
  // 是否在语句末尾打印分号
  "semi": false,
  // 设置了缩进时使用的空格数
  "tabWidth": 2,
  // 是否使用单引号而不是双引号
  "singleQuote": true,
  // 指定了打印时每行代码的最大字符数
  "printWidth": 100,
  // 控制是否在多行对象或数组字面量中打印尾随逗号
  "trailingComma": "none"
}

安装vscode的perttier插件

在扩展中搜索Prettier - Code formatter 安装即可。

同样在main.js中加const a = {“b”:1,}

保存后格式化。

在.vscode文件夹下settings.json中取消保存后格式化：

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  // 取消保存后格式化
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}