VS Code 格式化后 自动让函数名后有空格

admin管理员组

文章数量:1530019

VS Code 格式化后 自动让函数名后有空格

• • 1. 简介
  • 2. setting.json配置代码
  • 3. setting.json 全部的配置
  • 4. 总结

1. 简介

嗨，大家好！今天给大家分享一下，怎么在vscode中给函数名后边加空格，让函数名和（）之间有空格，这里大家要注意的是：Prettier - Code formatter并不能实现这个功能，我们需要借助Vetur来实现，以前小编一直很迷，为什么配置都配置了。我们还是没有效果，其实是用错插件了，我们应该用Vetur.

2. setting.json配置代码

注意：这里只是一些代码片段，这里需要先安装Vetur这个插件，之后再配置。

// 这里是实现函数名后边有空格的效果
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

3. setting.json 全部的配置

这里只是一些简单的位置，有一个Path Autocomplete 这个插件，这个也蛮好用的，如果有喜欢的可以配置一下，相应的配置在第二个注释的地方

{
  // 基础配置
  "editor.fontSize": 18,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "window.zoomLevel": 2,

  /* 路径自动提示配置 + PathA... */
  "path-autocomplete.extensionOnImport": true,
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },

  // 使用vscode-icons主题
  "workbench.iconTheme": "vscode-icons",

  // 每次保存的时候将代码按格式进行修复
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    // "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    // "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  //vetur 格式化代码
  // "vetur.format.defaultFormatter.js": "prettier",
  // 这里是实现函数名后边有空格的效果
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  "vetur.format.defaultFormatter.html": "prettyhtml",
  "veturpletion.autoImport": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // 结尾无分号
      "semi": false,
      // 超过140个字符换行
      "printWidth": 300,
      // 使用单引号
      "singleQuote": true,
      // 无尾随逗号
      "trailingComma": "none",
      // 箭头函数单个参数不加分号
      "arrowParens": "avoid"
    },
    "prettyhtml": {
      "printWidth": 300
    }
  },

  // 同上prettier格式化代码
  "prettier.semi": false,
  "prettier.printWidth": 300,
  "prettier.tabWidth": 2,
  "prettier.trailingComma": "none",
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  "prettier.eslintIntegration": true,
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  // 指定wxml的格式化
  "minapp-vscode.wxmlFormatter": "prettyHtml",
  "minapp-vscode.disableAutoConfig": true,
  "workbench.sideBar.location": "right",
  "editor.formatOnType": true
}

4. 总结

其实，建议大家在配置 setting.json 的时候，配置自己需要的和知道的，要不然，配置很多，你也不知道怎么控制，出现什么问题，也是很郁闷的，就无从下手了。

本文标签： 空格函数Code名后有