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 子窗口操作父窗口的代码
Sep 21 Javascript
JavaScript中Object和Function的关系小结
Sep 26 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
javascript实现时钟动画
Dec 03 Javascript
JavaScript代码实现简单计算器
Dec 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/11/07 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
Python smallseg分词用法实例分析
2015/05/28 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
应届生求职信写作技巧
2013/10/24 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
辞职信怎么写
2015/02/27 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
Python学习之时间包使用教程详解
2022/03/21 Python