Henry
Henry
2018-09-04
目录

VSCode 简明版配置

VS Code 简明版配置

在官网 Visual Studio Code (opens new window) 可以查看介绍和下载

也可以看看这篇文章：Visual Studio Code 入门 (译) - 简书 (opens new window)

# 代码片段

此代码片段默认缩进是 2 个空格，如需要修改为 4 个空格，直接添加空格即可。

注：不支持 tab 缩进，使用 tab 缩进会报错

# HTML5 代码片段

"html5": {
	"prefix": "html5",
	"body": [
		"<!DOCTYPE html>",
		"<html lang=\"en\">",
		"  <head>",
		"    <meta charset=\"UTF-8\">",
		"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
		"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
		"    <title>${1:Document}</title>",
		"    <style type=\"text/css\">",
		"      ",
		"    </style>",
		"  </head>",
		"  <body>",
		"    $2",
		"  </body>",
		"</html>"
	],
	"description": "HTML5"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# vue 代码片段

"init Vue": {
  "prefix": "ivue",
  "body": [
    "<template>",
    "  <div class=\"$1\">$2</div>",
    "</template>",
    "",
    "<script>",
    "export default {",
    "  name: '$TM_FILENAME_BASE',",
    "  components: {},",
    "  props: {},",
    "  data() {",
    "    return {}",
    "  },",
    "  computed: {},",
    "  watch: {},",
    "  methods: {",
    "    init() {}",
    "  },",
    "  created() {",
    "    this.init()",
    "  },",
    "  mounted() {}",
    "}",
    "</script>",
    "",
    "<style lang=\"less\">",
    ".$1 {",
    "}",
    "</style>",
    ""
  ],
  "description": "init Vue"
}
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

可以在这个网址生成代码片段：snippet generator (opens new window)

# 插件

# 风格检查

# 代码片段

# 自动补全

# 功能增强

# 外观增强

# 编码效率

# 系统设置

{
  // ------------------------ 格式化代码 ------------------------
  // 一个制表符等于的空格数
  "editor.tabSize": 2,
  // 启用后，保存文件时在文件末尾插入一个最终新行。
  "files.insertFinalNewline": true,
  // 启用后，保存文件时将删除在最终新行后的所有新行。
  "files.trimFinalNewlines": true,
  // 启用后，将在保存文件时剪裁尾随空格。
  "files.trimTrailingWhitespace": true,
  // eslint 保存自动格式化 插件名：ESLint
  // enables auto fix on save. Please note auto fix on save is only available if VS Code's
  // files.autoSave is either off, onFocusChange or onWindowChange. It will not work with afterDelay.
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 是否在每行末尾加一个分号
  "prettier.semi": false,
  // 使用单引号
  "prettier.singleQuote": true,
  // 换行字符串阈值
  "prettier.printWidth": 100,
  // JSX 有多个属性时，将 `>` 放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）
  "prettier.jsxBracketSameLine": true,
  // 格式化 vue 插件名：Vetur
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "eslintIntegration": true,
      "semi": false,
      "singleQuote": true,
      "printWidth": 100,
      "jsxBracketSameLine": true
    }
  },
  // ------------------------ 编辑器相关 ------------------------
  // 执行文字相关的导航或操作时将用作文字分隔符的字符 (比如双击选中文字，只会选中下面分隔符中的文字)
  "editor.wordSeparators": "`~!！@#$￥%^……&*(（)）=+[【{]】}\\、|;；:：'‘\"”,，.。<《>》/、?？",
  // 在 "打开的编辑器" 窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
  "explorer.openEditors.visible": 0,
  // 自动保存 (失焦保存)
  "files.autoSave": "onFocusChange",
  // 控制是否绘制已修改 (存在更新) 的编辑器选项卡的顶部边框。
  "workbench.editor.highlightModifiedTabs": true,
  // 控制键入时是否应自动显示建议
  "editor.quickSuggestions": {
    "other": true,
    "comments": true, // 注释
    "strings": true // 字符串
  },
  // 面包屑导航
  // https://code.visualstudio.com/updates/v1_26#_breadcrumbs
  "breadcrumbs.enabled": true,
  // 在导航路径视图中仅显示当前符号
  "breadcrumbs.symbolPath": "last",
  // 控制资源管理器是否在把文件删除到废纸篓时进行确认。
  "explorer.confirmDelete": false,
  // 小地图最大宽度
  "editor.minimap.maxColumn": 80,
  // 控制是否显示工作台底部状态栏中的 Twitter 反馈 (笑脸图标).
  "workbench.statusBar.feedback.visible": false,
  // 若窗口在处于全屏模式时退出，控制其在恢复时是否还原到全屏模式。
  "window.restoreFullscreen": true,

  // ------------------------ 插件相关 ------------------------
  // element-helper 版本 插件名：vscode-element-helper
  "element-helper.version": "2.5",

  // 在默认不支持 Emmet 的语言中启用 Emmet 缩写功能。在此添加该语言与受支持的语言间的映射。
  "emmet.includeLanguages": {
    "vue-html": "html"
  },

  // 在当前选中的变量下面利用 console 输出该变量 插件名：Turbo Console Log
  // 使用单引号
  "turboConsoleLog.quote": "'"
}
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
编辑 (opens new window)
#Guidelines#VSCode
上次更新: 11/9/2022, 12:48:51 PM
VSCode 完整版配置
VSCode 插件

← VSCode 插件→

最近更新
01
搭配 Jenkins 实现自动化打包微前端多个项目
09-15
02
自动化打包微前端多个项目
09-15
03
el-upload 直传阿里 oss 并且显示自带进度条和视频回显封面图
06-05
更多文章>
Theme by Vdoing | Copyright © 2017-2024 HenryTSZ | MIT License