当前位置:首页 > 经验笔记 > 其他 > 正文内容

VScode格式化HTML代码保持标签属性不换行 配置记录

han32685年前 (2020-11-13)其他10656
{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // #值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按shift+alt+F
  "editor.formatOnSave": false,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //  #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用带引号替代双引号
  "prettier.singleQuote": true,
  "prettier.tabWidth": 4,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按"prettier"格式进行格式化
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // #vue组件中html代码格式化样式
      "wrap_attributes": "auto", // " // html 标签属性 换行设置[auto|force|force-aligned|force-expand-multiline] [“auto”]
      "wrap_line_length": 0, // 设置多个字符后换行 0 表示忽略
      "end_with_newline": false, // 在文件结尾添加新行
      "semi": false,
      "singleQuote": true
    },
    "prettier": {
      "semi": false,
      "singleQuote": true
    }
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "prettier.useTabs": false,
  "explorer.confirmDelete": false,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.startupEditor": "welcomePage",
  "liveServer.settings.donotShowInfoMsg": true,
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "workbench.editorAssociations": {
    "*.ipynb": "jupyter.notebook.ipynb"
  },
  "git.enableSmartCommit": true,
  "editor.tabSize": 2,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "files.autoSave": "afterDelay",
  "git.confirmSync": false, // 两个选择器中是否换行
}


扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://hanwenblog.com/post/36.html

分享给朋友:

相关文章

使用git bash统计vue项目的代码量行数

需求想要统计一下自己写的vue项目的代码量。主要是src文件夹下的html、css、js、vue文件的总代码量解决方案使用git bash,切换至vue项目的src目录下,然后输入如下命令:find&...

审查元素获取支付宝用户ID,PID,2088ID

审查元素获取支付宝用户ID,PID,2088ID

第一步:先登录支付宝官方网址 https://www.alipay.com/ 第二部:点击“进入我的支付宝”第三步:打开审查元素 快捷键F12  打开后选择 elemen...

windows全角半角切换 | 解决英文字符变宽

windows全角半角切换 | 解决英文字符变宽

问题有时候在使用中会发现英文字符变宽,例如变成:abcdefg而正常应为:abcdefg这是由于被切换到了全角,而正常应是半角解决办法1Shift+空格 完成相互切换解决办法2先切换到英文输入法右键输...

使用VS code 生成vue-cli代码片段模板

使用VS code 生成vue-cli代码片段模板

左下角设置->配置优惠代码片段–》搜索vue–》找到vue.json–》粘贴这段代码{   "Print to console":&...

用powershell控制Hyper-V开关机 windows 计划任务执行脚本

用powershell控制Hyper-V开关机 windows 计划任务执行脚本

控制Hyper-V虚拟机的开关机对应的PowerShell脚本示例:# 启动虚拟机 Start-VM -Name "VMName" #&nbs...