Henry Henry
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)

Henry

小学生中的前端大佬
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)
  • 技术文档

  • GitHub

  • Nodejs

  • Chrome

  • VSCode

    • VSCode 完整版配置
    • VSCode 简明版配置
      • 代码片段
        • HTML5 代码片段
        • vue 代码片段
      • 插件
        • 风格检查
        • 代码片段
        • 自动补全
        • 功能增强
        • 外观增强
        • 编码效率
      • 系统设置
    • VSCode 插件
    • VSCode 快捷键
    • VSCode 在 Windows 上添加右键打开菜单的显示
    • 在 Finder 中使用 VSCode 打开文件或文件夹
    • 在 Terminal 中使用 VSCode 打开文件或文件夹
    • 在代码片段中使用快速建议
    • 工作中总结的代码片段
    • VSCode 重构
    • VSCode 重构之 Abracadabra 插件
    • VSCode 重构之 JavaScript Booster 插件
    • VSCode 重构之 Hocus Pocus 插件
    • VSCode 开发插件之初识
    • VSCode 开发插件之相对路径转别名路径
    • VSCode 开发插件之发布
    • VSCode 重构之 Code Spell Checker 插件
  • VSCode 更新文档

  • Other

  • 技术
  • VSCode
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)

# 插件

# 风格检查

  • ESLint (opens new window)

    • 语法检查工具
    • Install
  • Prettier - Code formatter (opens new window)

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

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

# 代码片段

  • JavaScript (ES6) code snippets (opens new window)

    • ES6 代码片段。常用的类声明、ES 模块声明、CMD 模块导入等,支持的缩写不下 20 种
    • Install
  • VueHelper (opens new window)

    • Doc (opens new window)
    • vue, vue-router 和 vuex 的代码提示
    • Install
  • Vue VSCode Snippets (opens new window)

    • vue 代码片段
    • Install
  • vscode-element-helper (opens new window)

    • Doc (opens new window)
    • 一款 ElementUi 的 VS Code 插件
    • Install

# 自动补全

  • TabNine (opens new window)

    • 代码补全。不少使用过的网友说:TabNine 是他们用过的最好的代码补全工具,这是属于程序员的杀手级应用
    • Install
  • Path Intellisense (opens new window)

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

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

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

# 功能增强

  • GitLens — Git supercharged (opens new window)

    • Git 可视化工具,自带 diff 功能,能让我们在不离开编辑器,不执行任何命令的情况下知晓光标所在位置代码的修改时间、作者信息等
    • Install
  • Git File History (opens new window)

    • 快速浏览 git 仓库的文件历史
    • Install

# 外观增强

  • Bracket Pair Colorizer 2 (opens new window)

    • 与 v1 区别:v2 使用与 VSCode 相同的括号解析引擎,大大提高了速度和准确性。
    • Install
  • Chinese (Simplified) Language Pack for Visual Studio Code (opens new window)

    • 适用于 VS Code 1.23 以后的中文 (简体) 语言包
    • Install

# 编码效率

  • Turbo Console Log (opens new window)

    • 在当前选中的变量下面利用 console 输出该变量
    • Install
  • Code Spell Checker (opens new window)

    • 这款插件能实时的识别单词拼写是否有误,并给出提示
    • Install
  • change-case (opens new window)

    • 快速更改当前选择或当前单词的大小写 (camelCase, CONSTANT_CASE, snake_case 等)
    • Install

# 系统设置

{
  // ------------------------ 格式化代码 ------------------------
  // 一个制表符等于的空格数
  "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
上次更新: 5/27/2023, 1:02:05 PM
VSCode 完整版配置
VSCode 插件

← VSCode 完整版配置 VSCode 插件→

最近更新
01
version 1.15
07-01
02
version 1.14
06-27
03
version 1.13
06-27
更多文章>
Theme by Vdoing | Copyright © 2017-2023 HenryTSZ | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式