我们在键盘上留下的余温, 也将随时代传递到更远的将来


:D 获取中...

VS Code 简明版配置

在官网 Visual Studio Code 可以查看介绍和下载

也可以看看这篇文章: Visual Studio Code 入门(译) - 简书

代码片段

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

注: 不支持 tab 缩进, 使用 tab 缩进会报错

HTML5 代码片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"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"
}

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
"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"
}

可以在这个网址生成代码片段: snippet generator

插件

风格检查

  • ESLint

  • Prettier - Code formatter

    • 实际上已经是代码格式化的工具标准, 支持格式化几乎所有的前端代码
    • Install

  • Vetur

    • Vue 代码片段, 语法高亮, 格式化 .vue 文件, 包括里面的 CSS、 JS, 至于模板即 HTML 部分, 官方维护者说没有比较好的工具支持, 默认是不格式化的
    • Doc
    • Install

代码片段

自动补全

  • TabNine

    • 代码补全. 不少使用过的网友说: TabNine 是他们用过的最好的代码补全工具, 这是属于程序员的杀手级应用
    • Install

  • Path Intellisense

    • 文件路径补全, 在你用任何方式引入文件系统中的路径时提供智能提示和自动完成
    • Install

  • Auto Close Tag

    • 适用于 JSX、 Vue、 HTML, 在打开标签并且键入 </ 的时候, 能自动补全要闭合的标签
    • Install

  • Auto Rename Tag

    • 适用于 JSX、 Vue、 HTML, 在修改标签名时, 能在你修改开始(结束)标签的时候修改对应的结束(开始)标签, 帮你减少 50% 的击键
    • Install

功能增强

外观增强

编码效率

系统设置

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
{
  // ------------------------ 格式化代码 ------------------------
  // 一个制表符等于的空格数
  "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": "'"
}

 上一页

Guidelines Vscode

 评论

 无法加载Disqus评论系统，请确保您的网络能够正常访问。