Visual Studio Code + Emmet Web开发

官网 Visual Studio Code

建议选择安装版，方便升级。

其它： Dreamweaver CC 2017，或者 Adobe Brackets，或者需要自己装配的 Sublime Text 3。

---

Emmet

务必熟悉 Emmet

---

Markdown

写笔记务必用 Markdown 语法

快速入门，CSDN博客的Markdown语法帮助

---

快捷键

先看软件本身的快捷键，然后再自定义快捷键。

打开多窗口，一边对着 键盘快捷方式 敲一遍。

不建议五花八门的弄。

// 将键绑定放入此文件中以覆盖默认值
[{ // 选择全部匹配项=
    "key": "ctrl+shift+l",
    "command": "editor.action.selectHighlights",
    "when": "editorFocus"
  },
  { // 包裹符前后跳转
    "key": "alt+\\",
    "command": "editor.action.jumpToBracket",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+b",
    "command": "workbench.action.tasks.build"
  },
  {
    "key": "ctrl+shift+f9",
    "command": "workbench.debug.viewlet.action.removeAllBreakpoints"
  },
  { // 删除末尾空白字符
    "key": "shift+backspace",
    "command": "editor.action.trimTrailingWhitespace",
    "when": "editorTextFocus && !editorReadonly"
  },
  { // 显示空白字符
    "key": "alt+backspace",
    "command": "editor.action.toggleRenderWhitespace"
  },
  { // 删除右边字符
    "key": "ctrl+delete",
    "command": "deleteWordEndRight"
  },
  { // 删除左边字符
    "key": "ctrl+backspace",
    "command": "deleteWordStartLeft"
  },
  { // 输出
    "key": "ctrl+alt+o",
    "command": "workbench.action.output.toggleOutput"
  },
  { // 打开文件位置
    "key": "alt+x",
    "command": "workbench.action.files.revealActiveFileInWindows"
  },
  { // 在新窗口打开当前文件
    "key": "ctrl+k ctrl+o",
    "command": "workbench.action.files.showOpenedFileInNewWindow"
  },
  { // 保存所有
    "key": "ctrl+k ctrl+s",
    "command": "workbench.action.files.saveAll"
  },
  { // 插入代码段
    "key": "ctrl+k ctrl+x",
    "command": "insertSnippet"
  },
  { // 文本转大写
    "key": "ctrl+k ctrl+u",
    "command": "editor.action.transformToUppercase",
    "when": "editorTextFocus"
  },
  { // 文本转小写
    "key": "ctrl+k ctrl+l",
    "command": "editor.action.transformToLowercase",
    "when": "editorTextFocus"
  },
  { // markdown 预览
    "key": "ctrl+k ctrl+v",
    "command": "markdown.showPreviewToSide",
    "when": "editorFocus"
  },
  { // 剪切行到粘贴版
    "key": "ctrl+l",
    "command": "editor.action.clipboardCutAction",
    "when": "editorTextFocus && !editorReadonly && editorHasSelection"
  },
  { // 块级注释
    "key": "ctrl+shift+/",
    "command": "editor.action.blockComment",
    "when": "editorTextFocus && !editorReadonly"
  },
  { // 智能提示
    "key": "ctrl+alt+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  { // 选中文本,行排序：升
    "key": "f9",
    "command": "editor.action.sortLinesAscending",
    "when": "editorTextFocus"
  },
  { // 选中文本,行排序：渐
    "key": "ctrl+f9",
    "command": "editor.action.sortLinesDescending",
    "when": "editorTextFocus"
  },
  { // 合并为一行
    "key": "ctrl+j",
    "command": "editor.action.joinLines",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+j",
    "command": "workbench.action.togglePanel"
  },
  { // ZenMode
    "key": "ctrl+k ctrl+z",
    "command": "workbench.action.toggleZenMode"
  },
  // ## plugin
  // emmet
  { // 更新标签对
    "key": "ctrl+shift+;",
    "command": "editor.emmet.action.updateTag",
    "when": "editorTextFocus"
  },
  { // 移除标签对
    "key": "ctrl+shift+'",
    "command": "editor.emmet.action.removeTag",
    "when": "editorTextFocus"
  },
  { // HTML添加外围包裹标签
    "key": "ctrl+shift+g",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorTextFocus"
  },
  { // HTML、CSS中由内向外逐层级选择
    "key": "alt+shift+,",
    "command": "editor.emmet.action.balanceOutward",
    "when": "editorTextFocus"
  },
  { // HTML、CSS中由外向内逐层级选择
    "key": "alt+shift+.",
    "command": "editor.emmet.action.balanceInward",
    "when": "editorTextFocus"
  },
  { // HTML、CSS中以“标签|选择器、属性、值”步进选择(向上)
    "key": "alt+,",
    "command": "editor.emmet.action.selectPreviousItem",
    "when": "editorTextFocus"
  },
  { // HTML、CSS中以“标签|选择器、属性、值”步进选择(向下)
    "key": "alt+.",
    "command": "editor.emmet.action.selectNextItem",
    "when": "editorTextFocus"
  },
  { // HTML中上一编辑点
    "key": "ctrl+alt+,",
    "command": "editor.emmet.action.previousEditPoint",
    "when": "editorTextFocus"
  },
  { // HTML中下一编辑点
    "key": "ctrl+alt+.",
    "command": "editor.emmet.action.nextEditPoint",
    "when": "editorTextFocus"
  },
  { // HTML中对标签始尾跳转
    "key": "ctrl+alt+\\",
    "command": "editor.emmet.action.matchingPair",
    "when": "editorTextFocus"
  },
  { // 类计算器功能
    "key": "ctrl+alt+shift+c",
    "command": "editor.emmet.action.evaluateMath",
    "when": "editorTextFocus"
  },
  { // 更新或添加图片尺寸
    "key": "ctrl+i ctrl+u",
    "command": "editor.emmet.action.updateImageSize",
    "when": "editorTextFocus"
  },
  // bookmarks
  {// 添加/取消书签
    "key": "ctrl+k ctrl+k",
    "command": "bookmarks.toggle",
    "when": "editorTextFocus"
  },
  {// 下一书签
    "key": "ctrl+k ctrl+n",
    "command": "bookmarks.jumpToNext",
    "when": "editorTextFocus"
  },
  {// 上一书签
    "key": "ctrl+k ctrl+p",
    "command": "bookmarks.jumpToPrevious",
    "when": "editorTextFocus"
  },
  {// 清除当前文档所有书签
    "key": "ctrl+k ctrl+c",
    "command": "bookmarks.clear",
    "when": "editorTextFocus"
  },
  {// 当前文档所有书签列表
    "key": "ctrl+k ctrl+l",
    "command": "bookmarks.list",
    "when": "editorTextFocus"
  },
  // beautify
  { // 格式化文档
    "key": "alt+d",
    "command": "HookyQR.beautify",
    "when": "editorFocus"
  }
]

---

设置

// 将设置放入此文件中以覆盖默认设置
{
    "editor.fontSize": 16,
    "editor.tabSize": 4,
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/.DS_Store": true,
        "**/node_modules": true
    },
    "editor.dragAndDrop": true,
    "editor.minimap.enabled": true,
    "editor.renderWhitespace": "all",
    "editor.selectionHighlight": false,
    "editor.wordWrap": "on",
    "files.trimTrailingWhitespace": true,
    "sync.anonymousGist": false,
    "sync.autoDownload": false,
    "sync.autoUpload": false,
    "sync.forceDownload": false,    
    "sync.showSummary": true,
    "sync.version": 262,
    "window.zoomLevel": 0,
    "workbench.activityBar.visible": false,
    "explorer.autoReveal": false,
    "sync.host": "",
    "sync.pathPrefix": "",
    "workbench.iconTheme": "material-icon-theme"
}

插件

• Beautify
• Bookmarks
• CSScomb
• Document this
• Emoji
• IntelliSense for CSS class names
• jQuery Code Snippets
• Material Icon Theme
• Settings Sync
• XML tools

---

欢迎补充

---

Emmet API

鼠标右键查看大图

Emmet-API-HTML

Emmet-API-CSS

Emmet-API-Syntax

Emmet-API-XSL