prettier自动格式化去换行的实现代码

 更新时间:2020年8月26日 08:32  点击:2923

插件

在这里插入图片描述
在这里插入图片描述

新建 .prettierrc 文件在根目录,里面写上这个
第一个是超出800字符换行,第二个是单引号,第三个是结尾不要分号

在这里插入图片描述

vscode里面的设置文件settings。json代码

{
 // vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,
 // 重新设定tabsize
 "editor.tabSize": 2,
 // #每次保存的时候自动格式化
 "editor.formatOnSave": true,
 // // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 "eslint.autoFixOnSave": true,
 "vetur.validation.template": false,
 // #让prettier使用eslint的代码格式进行校验
 "prettier.eslintIntegration": true,
 // #去掉代码结尾的分号
 "prettier.semi": false,
 // #使用带引号替代双引号
 "prettier.singleQuote": true,
 // #让函数(名)和后面的括号之间加个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 // #这个按用户自身习惯选择
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // #让vue中的js按编辑器自带的ts格式进行格式化
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   // 换行
   // "wrap_attributes": "force-aligned"
   // 不换行
   "wrap_attributes": "aligned-multiple"
  }
 },
 // 格式化stylus, 需安装Manta's Stylus Supremacy插件
 "stylusSupremacy.insertColons": false, // 是否插入冒号
 "stylusSupremacy.insertSemicolons": false, // 是否插入分好
 "stylusSupremacy.insertBraces": false, // 是否插入大括号
 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
 "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
 "auto-rename-tag.activationOnLanguage": [
  "*"
 ],
 "window.zoomLevel": 0,
 // esli弹框报错
 "devDependencies": {
  "babel-eslint": "^10.0.3",
  "eslint": "^4.15.0",
  "eslint-config-airbnb": "^16.1.0",
  "eslint-plugin-jsx-a11y": "^6.0.3",
  "eslint-plugin-react": "^7.12.1",
  "eslint-config-google": "^0.9.1",
  "eslint-config-standard": "^10.2.1",
  "eslint-plugin-html": "^4.0.1",
  "eslint-plugin-import": "^2.8.0",
  "eslint-plugin-node": "^5.2.1",
  "eslint-plugin-promise": "^3.6.0",
  "eslint-plugin-standard": "^3.0.1"
 },
 "http.proxyAuthorization": null,
 "eslint.migration.2_x": "off",
 "workbench.editorAssociations": [],
 "eslint.codeAction.disableRuleComment": {},
 "eslint.codeAction.showDocumentation": {},
 "editor.suggest.snippetsPreventQuickSuggestions": false,
 "files.associations": {
  "*.cjson": "jsonc",
  "*.wxss": "css",
  "*.wxs": "javascript"
 },
 "emmet.includeLanguages": {
  "wxml": "html"
 },
 "minapp-vscode.disableAutoConfig": true,
 "editor.codeActionsOnSave": null,
 "[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[jsonc]": {
  "editor.defaultFormatter": "vscode.json-language-features"
 },
 "[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
}

保存,打开一个后缀名为.vue文件,右键文档格式方式

在这里插入图片描述

点默认格式化程序,再点Vetur

在这里插入图片描述
在这里插入图片描述

大功告成,,ctrl+s自动格式化,这是不换行的方式

后缀名为 .js,用上面同样步骤,但是默认值用prettier

在这里插入图片描述

喜欢标签换行用这个
打开vscode设置文件settings。json,找到,想用哪个打开就好,不用就注释

在这里插入图片描述

总结

到此这篇关于prettier自动格式化去换行的实现代码的文章就介绍到这了,更多相关prettier格式化换行内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

[!--infotagslink--]

相关文章

  • php过滤所有的空白字符(空格、全角空格、换行等)

    在php中自带的trim函数只能替换左右两端的空格,感觉在有些情况下不怎么好使,如果要将一个字符串中所有空白字符过滤掉(空格、全角空格、换行等),那么我们可以自己写一个过滤函数。php学习str_replace函数都知道,可以批量替...2015-10-30
  • 解决vue字符串换行问题(绝对管用)

    这篇文章主要介绍了解决vue字符串换行问题(绝对管用),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-06
  • C#格式化数字字符串的方法

    这篇文章主要为大家详细介绍了C#格式化数字字符串的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • prettier自动格式化去换行的实现代码

    这篇文章主要介绍了prettier自动格式化去换行的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-26
  • php过滤所有的空白字符(空格、全角空格、换行等)

    在php中自带的trim函数只能替换左右两端的空格,感觉在有些情况下不怎么好使,如果要将一个字符串中所有空白字符过滤掉(空格、全角空格、换行等),那么我们可以自己写一个过滤函数。php学习str_replace函数都知道,可以批量替...2015-10-30
  • PHP如何通过date() 函数格式化显示时间

    这篇文章主要介绍了PHP如何通过date() 函数格式化显示时间,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-13
  • 浅谈Python3中print函数的换行

    这篇文章主要介绍了浅谈Python3中print函数的换行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-05
  • 微信小程序 时间格式化(util.formatTime(new Date))详解

    这篇文章主要介绍了微信小程序 时间格式化(util.formatTime(new Date))详解的相关资料,这里附实例,一目了然很容易解决,需要的朋友可以参考下...2016-11-22
  • vue.js实现价格格式化的方法

    这里分享一个常用的价格格式化的一个方法,在电商的价格处理中非常的实用,具体实现代码大家参考下本文...2017-05-27
  • 关于VSCode格式化JS自动添加或去掉分号的问题

    这篇文章主要介绍了VSCode格式化JS自动添加或去掉分号的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-10-12
  • C#小数点格式化用法小结

    这篇文章主要介绍了C#小数点格式化用法,结合实例形式分析了C#小数点格式化运算的常用函数与相关使用技巧,需要的朋友可以参考下...2020-06-25
  • ASP.NET Lable中进行换行解决方案

    这个问题,应该算是很简单的问题,可说实在的,折腾了2个小时的时候,后面整出来的时候,真坑爹呢。现在把这个过程给大家,希望可以给大家一个提醒...2021-09-22
  • C# 字符串多行显示/文本换行以textbox为例讲解

    C# 字符串多行显示、文本换行以textbox为例讲为大家详细介绍并附演示效果图及演示代码,感兴趣的朋友可以了解下,或许对你学习字符串换行有所帮助...2020-06-25
  • Asp.net中时间格式化的6种方法详细总结

    数据控件绑定时格式化日期方法/用DataBinder.Eval进行数据绑定时/直接用ToString方法转换日期显示格式/用String类转换日期显示格式等等,感兴趣的你了解下哦,或许对你学习时间格式化有所帮助...2021-09-22
  • C# 格式化字符首字母大写的方法

    这篇文章介绍了C# 格式化字符首字母大写的方法,有需要的朋友可以参考一下...2020-06-25
  • IDEA 格式化SQL代码技巧分享

    这篇文章主要介绍了IDEA 格式化SQL代码技巧分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-25
  • 文本超过div 自动换行代码

    文本超过div 自动换行代码文本自动换行IE中解决方法: word-wrap:break-word; word-break:break-all; 注:在要换行的内容相应的单元格或者DIV里加入,如: <div style=word-...2016-09-20
  • 显示格式化的用户输入

    这个文档描述如何安全显示的有格式的用户输入。我们将讨论没有经过过滤的输出的危险,给出一个安全的显示格式化输出的方法。 没有过滤输出的危险 如果你仅仅获得用户的...2016-11-25
  • Golang中使用Date进行日期格式化(沿用Java风格)

    这篇文章主要介绍了Golang中使用Date进行日期格式化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-11
  • 阿里云主机Windows 2008服务器硬盘分区和格式化图文教程

    这篇文章主要介绍了阿里云主机Windows 2008服务器硬盘分区和格式化图文教程,本文对每一个步骤都配有图文解说,一看就会呀,需要的朋友可以参考下...2016-01-27