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修改css样式style浅谈
May 06 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
学生信息管理系统python版
2018/10/17 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
python构造IP报文实例
2020/05/05 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
安全员岗位职责
2013/11/11 职场文书
护理实习自我鉴定
2013/12/14 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js