vue3+ts的Prettier格式化配置.prettierrc.json

前言

推荐一份最近研究的格式化配置。

代码

.prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": true,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "vueIndentScriptAndStyle": false,
  "overrides": [
    {
      "files": "*.vue",
      "options": {
        "parser": "vue"
      }
    },
    {
      "files": "*.ts",
      "options": {
        "parser": "typescript"
      }
    }
  ]
}

解释：

• "$schema" 用来告诉编辑器我这个json是一个什么样的配置模式，可以提供什么样的语法提示之类的，这里指定为Prettier的模式；
• "printWidth": 120 每行代码最长多少个字符；
• "tabWidth": 2：指定一个制表符的宽度为2个空格。
• "useTabs": true：指定是否使用制表符进行缩进，这里设置为true，表示使用tab进行缩进。
• "semi": true：指定是否在语句末尾添加分号。
• "singleQuote": false：指定是否使用单引号。
• "trailingComma": "none"：指定是否在对象和数组的末尾添加逗号。
• "bracketSpacing": true：指定是否在对象的属性和值之间添加空格。
• "jsxBracketSameLine": false：指定是否将JSX元素的左括号放在同一行。
• "arrowParens": "always"：指定箭头函数的参数是否使用括号，always总是使用。
• "endOfLine": "lf"：指定换行符的类型。
• "vueIndentScriptAndStyle": false：指定是否对Vue文件中的script和style标签进行缩进。
• "overrides": []：指定针对某些文件类型的特殊配置。

overrides用于针对某些文件类型进行特殊配置，比如对于.vue文件和.ts文件，分别使用vue和typescript解析器进行解析。