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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
了解一点js的Eval函数
Jul 26 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
js实现限定区域范围拖拉拽效果
Nov 20 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+APACHE实现用户论证的方法
2006/10/09 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
JavaScript 调试器简介
2009/02/21 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
express启用https使用小记
2019/05/21 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
Python的print用法示例
2014/02/11 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python元字符的用法实例解析
2018/01/17 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
python保留小数位的三种实现方法
2020/01/07 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
省优秀教师事迹材料
2014/01/30 职场文书
领导调研接待方案
2014/02/27 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
简单的辞职信模板
2015/05/12 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书