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 相关文章推荐
简略的前端架构心得&&基于editor为例子的编码小技巧
Nov 25 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 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自定义函数返回多个值
2006/11/26 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
pytorch forward两个参数实例
2020/01/17 Python
Python处理PDF与CDF实例
2020/02/26 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python中pop()函数的语法与实例
2020/12/01 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
中学自我评价
2014/01/31 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
篮球比赛口号
2014/06/10 职场文书
班级活动总结格式
2014/08/30 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
北京故宫导游词
2015/01/31 职场文书
论文致谢词范文
2015/05/14 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书