一切福田，不離方寸，從心而覓，感無不通。

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

1. 简介

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

2. setting.json配置代码

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

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

 

3. setting.json 全部的配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
{
  // 基础配置
  "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",
  "vetur.completion.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 的时候，配置自己需要的和知道的，要不然，配置很多，你也不知道怎么控制，出现什么问题，也是很郁闷的，就无从下手了。

 

from:https://blog.csdn.net/weixin_46213083/article/details/125957271

Copyright © 2024 Longsheng All rights reserved