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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
js实现网页随机验证码
Oct 19 Javascript
vue实现简单加法计算器
Oct 22 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
swiper自定义分页器的样式
2020/09/14 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
软件测试工程师面试问题精选
2016/10/28 面试题
值传递还是引用传递
2015/02/08 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
商务日语专业自荐信
2014/04/17 职场文书
医学专业自荐信
2014/06/14 职场文书
教师求职信
2014/06/17 职场文书
整改报告格式
2014/11/06 职场文书
升学宴答谢词
2015/01/05 职场文书
民事上诉状范文
2015/05/22 职场文书
优秀员工演讲稿
2019/06/21 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers