VSCode保存自动格式化代码-Prettier - Code formatter

一、首先在vscode中安装扩展Prettier - Code formatter

 项目根目录创建文件.prettierrc.json

//.prettierrc.json
{
  "printWidth": 100,//定义每行代码的最大字符数。超过这个限制的行将被自动换行。
  "tabWidth": 2,//设置一个制表符(tab)所占的空格数。
  "useTabs": false,//指定是否使用制表符代替空格进行缩进,false 表示使用空格。
  "semi": false,//控制语句末尾是否使用分号。false 表示不使用分号,所有语句末尾都将省略分号。
  "vueIndentScriptAndStyle": true,//当格式化 Vue 文件时,是否缩进 <script> 和 <style> 标签内的内容。
  "singleQuote": true,//设置是否使用单引号(')而不是双引号(")。
  "quoteProps": "as-needed",//定义在对象字面量中如何处理属性名的引号。as-needed 表示仅在必要时使用引号(如属性名包含空格或特殊字符时)。
  "bracketSpacing": true,//控制对象字面量中大括号之间的空格。true 表示 { foo: bar } 的形式,而 false 则为 {foo: bar}。
  "trailingComma": "es5",//控制对象、数组等结构末尾是否添加逗号。es5 表示在可以的情况下添加尾随逗号(如对象字面量、数组等),但不会在函数参数中添加。
  "jsxBracketSameLine": false,//控制 JSX 元素的闭合括号是否与最后一行内容在同一行。false 表示闭合括号会独占一行。
  "jsxSingleQuote": false,//指定在 JSX 中是否使用单引号。false 表示使用双引号。
  "arrowParens": "always",//控制箭头函数参数是否需要括号。always 表示即使只有一个参数也要使用括号,例如 (param) => {}。
  "insertPragma": false,//控制是否在格式化的文件顶部插入一个特殊的注释。false 表示不插入。
  "requirePragma": false,//控制是否仅格式化包含特定注释的文件。false 表示不要求注释。
  "proseWrap": "never",//设置如何处理文本块的换行。never 表示不进行换行。
  "htmlWhitespaceSensitivity": "strict",//控制 HTML 中的空白字符敏感度。strict 表示严格遵循 HTML 规范。
  "endOfLine": "auto",//定义行尾字符的处理方式。auto 表示使用操作系统的默认行尾格式。
  "rangeStart": 0//设置格式化的起始字符位置。0 表示从文件的开始位置开始格式化。
}

 二、编辑器中选择文件==》首选先==》设置==》工作区,搜索框输入:@ext:esbenp.prettier-vscode

 三、编辑器中选择文件==》首选先==》设置==》工作区,搜索框输入:files.autoSave

设置项属性选择为onFocuschange

 四、设置默认代码格式化(美化)的插件为Prettier,在搜索设置框输入editor.defaultFormatter

设置项属性选择为Prettier 

 五、设置Prettier插件保存时自动格式化代码,搜索设置项贴入editor.formatOnSave

将下图所示的选项框勾选

 完成以上步骤,保存后即可实现代码格式化。如未生效重启一下VSCode。

posted @ 2022-11-29 13:30  小呀小恐龙  阅读(3373)  评论(0编辑  收藏  举报