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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
js中split和replace的用法实例
Feb 28 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 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 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
python实现的各种排序算法代码
2013/03/04 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python并发编程之线程实例解析
2017/12/27 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
python快排算法详解
2019/03/04 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
外贸业务员岗位职责
2013/11/24 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
写给老婆的检讨书
2014/02/21 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Python MNIST手写体识别详解与试练
2021/11/07 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android
TS 类型兼容教程示例详解
2022/09/23 Javascript