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


Posted in Javascript onAugust 25, 2020

插件

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

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

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

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文件,右键文档格式方式

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

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

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
jquery.validate使用攻略 第三部
Jul 01 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
Vue中 axios delete请求参数操作
Aug 25 #Javascript
React实现轮播效果
Aug 25 #Javascript
React实现全选功能
Aug 25 #Javascript
react实现复选框全选和反选组件效果
Aug 25 #Javascript
js实现数字跳动到指定数字
Aug 25 #Javascript
js实现点击选项置顶动画效果
Aug 25 #Javascript
理解JavaScript中的对象
Aug 25 #Javascript
You might like
PHP之变量、常量学习笔记
2008/03/27 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php 如何获取数组第一个值
2013/08/06 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Django中的forms组件实例详解
2018/11/08 Python
python实现手机销售管理系统
2019/03/19 Python
Django-imagekit的使用详解
2020/07/06 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
任意存:BOXFUL
2018/05/21 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
二年级数学教学反思
2014/01/21 职场文书
临床护士自荐信
2014/01/31 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
施工安全生产承诺书
2014/05/23 职场文书
计算机毕业生求职信
2014/06/10 职场文书
个人安全生产责任书
2014/07/28 职场文书
超市周年庆活动方案
2014/08/16 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
初一语文教学反思
2016/03/03 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python