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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
Javascript中Eval函数的使用说明
Oct 11 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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上传文件时自动分配路径的方法
2015/01/09 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
Javascript验证方法大全
2015/09/21 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python 计算文件的md5值实例
2017/01/13 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python实现简单遗传算法
2018/03/19 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
降消项目实施方案
2014/03/30 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL