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 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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服务器实现多session并发运行
2006/10/09 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python多进程写入同一文件的方法
2019/01/14 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
基于python图像处理API的使用示例
2020/04/03 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
python链表类中获取元素实例方法
2021/02/23 Python
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
个人实用的自我评价范文
2013/11/23 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
自主招生英文自荐信
2015/03/25 职场文书
中秋节感想
2015/08/10 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书