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 相关文章推荐
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
jquery图片切换插件
Mar 16 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
vue前端工程的搭建
Mar 31 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
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Python中表示字符串的三种方法
2017/09/06 Python
python编写Logistic逻辑回归
2020/12/30 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python读取文件名并改名字的实例
2019/01/07 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python logging设置和logger解析
2019/08/28 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
python 实现单例模式的5种方法
2020/09/23 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
详解python的变量缓存机制
2021/01/24 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
造价工程师个人求职信
2013/09/21 职场文书
师范生教师实习自我鉴定
2013/09/27 职场文书
经销商会议欢迎词
2014/01/11 职场文书
面试后的英文感谢信
2014/02/01 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
孝女彩金观后感
2015/06/10 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Mysql 设置boolean类型的操作
2021/06/04 MySQL