茉莉兰亭


偏安一隅

VSCode格式化及setting.json配置

  • ~4.54K 字
  • 次阅读

习惯了在公司用webstorm编写后，在家用vc各种难受，但又懒得在自家电脑上再装个webstorm。终于忍无可忍好好研究了一下vs的配置文件和格式化配置。

Prettier

ctrl+shift+x跳转插件搜索，安装Prettier，就这玩意

Prettier

prettier是一个流行的代码格式化工具，允许我们自定义格式化规则。通过根目录下新建.prettierrc文件或在setting.json中进行规则配置。

Prettier配置方式

这里仅做示例

.prettierrc文件

1
2
3
4
5
6
7
8
{
  // 取消非必要分号
  "semi": false,
  // 用单引号表示字符串
  "singleQuote": true,
  // 自动换行的最大长度
  "printWidth": 400
}

setting.json文件

1
2
3
4
5
6
7
8
{
  // 取消非必要分号
  "prettier.semi": false,
  // 用单引号表示字符串
  "prettier.singleQuote": true,
  // 自动换行的最大长度
  "prettier.printWidth": 400
}

给vetur配置pretter规则

setting.json文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  // vetur 使用 prettier格式化代码
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // 取消非必要分号
      "semi": false,
      // 用单引号表示字符串
      "singleQuote": true,
      // 自动换行的最大长度
      "printWidth": 400
    }
  }
}

prettier将会优先查找项目根目录下有没有存在.prettierrc文件，当找不到该文件时后才会去setting.json中查找配置。这也就代表着，如果存在.prettierrc文件的话，setting.json中的prettier设置将会被无视，哪怕setting.json中存在.prettierrc里未设置的规则。

setting.json

setting.json为vscode的配置文件，位置位于：首选项-设置-字体-在 setting.json 中编辑

附上我的vscode配置，已经注释好了，就不多扯了（其实vscode自己也有中文描述的）

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
{
  // tab 大小为2个空格
  "editor.tabSize": 2,
  // 控制换行方式为到达一定列数换行
  "editor.wordWrap": "wordWrapColumn",
  // 400 列后换行
  "editor.wordWrapColumn": 400,
  // 保存时格式化
  "editor.formatOnSave": true,
  // 显示控制字符
  "editor.renderControlCharacters": true,
  // 切换窗口自动保存
  "files.autoSave": "onWindowChange",
  // "files.autoSaveDelay": 10000,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // 取消非必要分号
  "prettier.semi": false,
  // 用单引号表示字符串
  "prettier.singleQuote": true,
  // 自动换行的最大长度
  "prettier.printWidth": 400,
  // 是否要换行
  "prettier.proseWrap": "preserve",
  // (x) => {} 是否要有小括号
  "prettier.arrowParens": "avoid",
  // 禁止随时添加逗号
  "prettier.trailingComma": "none",
  // vetur 使用 prettier格式化代码
  "vetur.format.defaultFormatter.js": "prettier",
  // 选择 vue 文件中 template 的格式化工具，分别为prettyhtml或js-beautify-html
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple",
      "wrap_line_length": 400,
      "end_with_newline": false
    },
    "prettyhtml": {
      "printWidth": 400,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "printWidth": 400,
      "proseWrap": "preserve",
      "arrowParens": "avoid",
      "trailingComma": "none"
    }
  },
  "minapp-vscode.disableAutoConfig": true,
  // 配置语言的文件关联
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  // 针对语言配置编辑器设置
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

配置后没有效果？

检查一下根目录有没有以下文件：.editorconfig和.prettierrc文件，会覆盖掉setting.json全局设置
并新建jsconfig.json文件，内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules"
  ]
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可