欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解vue保存自动格式化换行

程序员文章站 2022-03-07 14:15:00
网上找了好多方法改着也没用,后面从一个大佬上看到的,就摘下来了,字体的话还是原来系统自带的看着舒服,就自己添加上去了,需要改动的可自行修改,在右上角文件--首选项--设置--搜索setting---在...

网上找了好多方法改着也没用,后面从一个大佬上看到的,就摘下来了,字体的话还是原来系统自带的看着舒服,就自己添加上去了,需要改动的可自行修改,在右上角文件--首选项--设置--搜索setting---在setting.json编辑,把其他的注释掉,换上下面的代码块就可以了,字体大小和行高可自行修改

{
  //设置文字大小
  "editor.fontsize": 18,
  //设置文字行高
  "editor.lineheight": 20,
  //开启行数提示
  "editor.linenumbers": "on",
  // 在输入时显示含有参数文档和类型信息的小面板。
  "editor.parameterhints.enabled": true,
  // 调整窗口的缩放级别
  "window.zoomlevel": 0,
  // 文件目录
  // "workbench.icontheme": "vscode-icons",
  // 设置字体
  "editor.fontfamily": "'consolas','droid sans mono', 'courier new', monospace, 'droid sans fallback'",
  // 自动换行
  "editor.wordwrap": "on",
  // 自定义vscode面板颜色
  "workbench.colorcustomizations": {
    // "tab.activebackground": "#253046", // 活动选项卡的背景色
    // "activitybar.background": "#253046", //活动栏背景色
    // "sidebar.background": "#253046", //侧边栏背景色
    // "activitybar.foreground": "#23f8c8", //活动栏前景色(例如用于图标)
    "editor.background": "#292a2c" //编辑器背景颜色
  },
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectindentation": false,
  // 重新设定tabsize
  "editor.tabsize": 2,
  // #每次保存的时候自动格式化
  "editor.formatonsave": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertspacebeforefunctionparenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultformatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultformatter.js": "vscode-typescript",
  // 保存时运行的代码eslint操作类型。
  "editor.codeactionsonsave": {
    "source.fixall.eslint": true
  },
  // 添加emmet支持vue文件
  "emmet.includelanguages": {
    "wxml": "html",
    "vue": "html"
  },
  // 两个选择器中是否换行
  "minapp-vscode.disableautoconfig": true,
  //快速预览(右侧)
  "editor.minimap.enabled": true,
  // tab 代码补全
  "files.associations": {
    "*.wpy": "vue",
    "*.vue": "vue",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  // 用来配置如何使用eslint cli引擎api启动eslint。 默认为空选项
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  // 在onsave还是ontype时执行linter。默认为ontype。
  "eslint.run": "onsave",
  // 启用eslint作为已验证文件的格式化程序。
  "eslint.format.enable": true,
  // 语言标识符的数组,为此eslint扩展应被激活,并应尝试验证文件。
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "vue-html",
    "vue",
    "html"
  ],
  //关闭rg.exe进程 用cnpm导致会出现rg.exe占用内存很高
  "search.followsymlinks": false,
  // 给js-beautify-html设置属性隔断
  "vetur.format.defaultformatteroptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto",
      "wrap_line_length": 200,
      "end_with_newline": false
    },
    "prettyhtml": {
      "printwidth": 200,
      "singlequote": false,
      "wrapattributes": false,
      "sortattributes": false
    },
    "prettier": {
      "semi": false,
      "singlequote": true
    }
  },
  // style默认偏移一个indent
  "vetur.format.styleinitialindent": true,
  // 定义匿名函数的函数关键字后面的空格处理。
  "javascript.format.insertspaceafterfunctionkeywordforanonymousfunctions": true,
  // 定义函数参数括号前的空格处理方式。
  "typescript.format.insertspacebeforefunctionparenthesis": true,
  // 新版本消息
  "vsicons.dontshownewversionmessage": true,
  // 控制资源管理器是否在把文件删除到废纸篓时进行确认。
  "explorer.confirmdelete": true,
  // 使用eslint-plugin-vue验证<template>中的vue-html
  "vetur.validation.template": false,
  // 指定用在工作台中的颜色主题。
  // "workbench.colortheme": "one dark pro"
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!

相关标签: vue 换行