VS Code保存后Prettier自动格式化代码

机灵的小飞机

已于 2024-01-05 17:00:49 修改

阅读量955

点赞数 10

分类专栏：开发工具配置文章标签： eslint prettier vscode

于 2024-01-05 16:57:36 首次发布

本文链接：https://blog.csdn.net/weixin_42354407/article/details/135413668

版权

开发工具配置专栏收录该内容

1 篇文章 1 订阅

订阅专栏

第一步：打开设置面板
第二步：搜索files.autoSave筛出设置项，并把设置项属性选择为onFocuschange
第三步：设置默认代码格式化（美化）的插件为Prettier，在搜索设置框输入editor.defaultFormatter，将配置项选择为Prettier
第四步：设置Prettier插件保存时自动格式化代码，搜索设置项贴入editor.formatOnSave，将如下图所示的选项框打钩即可。
设置完成

// .prettierrc.json
{
  "printWidth": 100,	//每行最多显示的字符数
  "tabWidth": 2,//tab的宽度 2个字符
  "useTabs": false,//禁止使用tab代替空格
  "semi": true,//结尾使用分号
  "singleQuote": true,//使用单引号代替双引号
  "trailingComma": "none",//结尾是否添加逗号
  "bracketSpacing": true,//对象括号俩边是否用空格隔开
  "bracketSameLine": true,;//组件最后的尖括号不另起一行
  "arrowParens": "always",//箭头函数参数始终添加括号
  "htmlWhitespaceSensitivity": "ignore",//html存在空格是不敏感的
  "vueIndentScriptAndStyle": false,//vue 的script和style的内容是否缩进
  "endOfLine": "auto",//行结尾形式 mac和linux是\n  windows是\r\n 
  "singleAttributePerLine": false //组件或者标签的属性是否控制一行只显示一个属性
}