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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python实现图像几何变换
2015/07/06 Python
Python实现的桶排序算法示例
2017/11/29 Python
python实现教务管理系统
2018/03/12 Python
python做反被爬保护的方法
2019/07/01 Python
python中PyQuery库用法分享
2021/01/15 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
html5 标签
2009/07/16 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
主管职责范文
2013/11/09 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
《我的信念》教学反思
2014/02/15 职场文书
人事部经理岗位职责
2014/03/07 职场文书
婚礼司仪主持词
2014/03/14 职场文书
职业生涯规划书前言
2014/04/15 职场文书
大学生读书笔记范文
2015/07/01 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
浅谈Python中对象是如何被调用的
2022/04/06 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL