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

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

han32685年前 (2020-11-13)其他10549
{
  // 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

分享给朋友:

相关文章

设置端口映射从外网访问内网的共享文件(需公网ip )

开启端口映射,从外网访问内网的文件共享:    以前我的做法是远程控制软件比如teamviewer或者radmin控制内网一台电脑后再通过其访问内网,缺点是要装软件,有办法直接通过...

Windows Server 网络连接由公用网络改为专用网络

Windows Server 网络连接由公用网络改为专用网络

1.Get-NetConnectionProfile //获取编号2. Set-NetConnectionProfile -Name "未识别的网络" -NetworkCatego...

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

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

Git国内镜像地址

1:官网下载https://git-scm.com/downloads使用官方的地址进行下载,速度很慢,大小40-50M,需要大约20分钟左右的时间才能够正常下载,所以寻找到下列国内镜像地址2:Git...

外网映射群晖为网络驱动器的方法

外网映射群晖为网络驱动器的方法

在外网环境下访问群晖文件通常是通过网页版DSM来完成的,相比局域网的直接访问,外网的网页访问方式多少有点不方便。这里介绍一种方法供大家参考。前提是:群晖和外网电脑都在ipv6环境下假设群晖的ipv6地...