vscode Prettier配置

news2024/12/24 2:07:08

常用配置项：

.prettierrc.json 是 Prettier 格式化工具的配置文件

{
  "printWidth": 200, // 指定行的最大长度
  "tabWidth": 2, // 指定缩进的空格数
  "useTabs": false, // 是否使用制表符进行缩进，默认为 false
  "singleQuote": true, // 是否使用单引号，默认为 false
  "quoteProps": "as-needed", // 对象属性是否使用引号，默认为 "as-needed"
  "trailingComma": "none", // 是否使用尾随逗号（末尾的逗号），可以是 "none"、"es5"、"all" 三个选项
  "bracketSpacing": true, // 对象字面量中的括号是否有空格，默认为 true
  "jsxBracketSameLine": false, // JSX 标签的右括号是否与前一行的末尾对齐，默认为 false
  "arrowParens": "always", // 箭头函数参数是否使用圆括号，默认为 "always"
  "rangeStart": 0, // 指定格式化的范围的起始位置
  "rangeEnd": Infinity, // 指定格式化的范围的结束位置
  "requirePragma": false, // 是否需要在文件顶部添加特殊的注释才能进行格式化，默认为 false
  "insertPragma": false, // 是否在格式化后的文件顶部插入特殊的注释，默认为 false
  "proseWrap": "preserve", // 是否保留 markdown 文件中的换行符，默认为 "preserve"
  "htmlWhitespaceSensitivity": "css", // 指定 HTML 文件中空格敏感度的配置选项，可以是 "css" 或 "strict" 两个选项
  "vueIndentScriptAndStyle": false, // 是否缩进 Vue 文件中的 <script> 和 <style> 标签，默认为 false
  "endOfLine": "auto", // 指定换行符的风格，可以是 "auto"、"lf"、"crlf"、"cr" 四个选项
  "semi": true, // 行末是否添加分号，默认为 true
  "usePrettierrc": true, // 是否使用项目根目录下的 .prettierrc 文件，默认为 true
  "overrides": [ // 针对特定文件或文件类型的格式化配置
    {
      "files": "*.json", // 匹配的文件或文件类型
      "options": {
        "tabWidth": 4 // 针对该文件类型的配置选项
      }
    },
    {
      "files": "*.md",
      "options": {
        "printWidth": 100
      }
    }
  ]
}

Prettier 安装配置方法

在这里插入图片描述
1.安装插件，并右击选择扩展设置

2.在箭头指向选项处设置，配置文件路径，一般配置文件放在项目根目录下，配置就如图所示；（注意，路径有误的话，格式化工具将会不起作用）

3.去设置中，找到第五步指向设置项，勾选；（作用：当你保存编辑的文件时，会触发格式化插件）
在这里插入图片描述
4.完成上述后，可以在需要格式化的文件上右击，并选择"使用…格式化文档"；（设置第三步后，可以不用操作这一步）

5.第四步完成后，出现这个弹框，选择Prettier格式化插件；
6.当页面代码布局和排版出现配置中的变化时，即格式化工具成功配置；