vscode识别angular template_关于 vscode 的使用，及个人的配置

代码片段

首先是代码片段，包括全局和局部:

局部

使用方法：

在.vue文件下，输入 vue 即可生成模版，当然这些模版片段，我们自己也可以设置,可以根据自己的需求写。

{
  "vue-template": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class="$1">n",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '$1',",
      "}",
      "</script>",
      "",
      "<style lang="stylus" scoped>n",
      "</style>"
    ]
  }
}

prefix项，对应指令， body就是模版样式;

全局

定义位置:

下面是我的定义好的全局指令：

{
  "Lamda 表达式": {
    "scope": "javascript,typescript",
    "prefix": "arrow",
    "body": ["($1) => {$2}"],
    "description": "箭头函数"
  },
  "注释模板": {
    "scope": "javascript,typescript,css,stylus",
    "prefix": "zhushi",
    "body": ["/**", "* @author: 倪凡", "* @description: $1", "*/"],
    "description": "注释"
  },
  "forin循环": {
    "scope": "javascript,typescript",
    "prefix": ["forin"],
    "body": ["for (let ${2:key} in ${1:json}) {", "t$0", "}"],
    "description": "forin循环"
  },
  "函数声明模板": {
    "scope": "javascript,typescript",
    "prefix": ["funct", "func", "function"],
    "body": ["function ${1:name} ($2) { ", "t$3", "}"],
    "description": "函数声明模板"
  },
  "函数表达式模板": {
    "scope": "javascript,typescript",
    "prefix": ["cfunct", "cfunc", "cfunction"],
    "body": ["let ${1:name} = function ($3) { ", "t$4", "}"],
    "description": "函数表达式模板"
  },
  "方法注释模板": {
    "scope": "javascript,typescript",
    "prefix": "fzhushi",
    "body": [
      "/**",
      "* @author: 倪凡",
      "* @description: $1",
      "* @param {$2} $3",
      "* @returns {$4} $5",
      "*/"
    ],
    "description": "注释方法"
  },
  "打印日志": {
    "scope": "javascript,typescript",
    "prefix": ["log"],
    "body": ["console.log($1)"],
    "description": "console.log打印日志"
  }
}

全局一次性可以定义多个,名字加配置项, scope是使用的范围，然后我们在对应范围内使用想要的指令即可:

使用插件

vscode重点就是数不尽的插件,下面介绍下自己安装的一些插件:

Chinese

中文，没什么说的，下载后第一个安装的

Vetur

使用 Vue，必定会安装Vetur,可以识别 vue 文件，带格式化功能(但最好不用这个格式化)

Auto Close Tag

帮你自动闭合标签，有时不是很准确，不过还是可以的。

Auto Rename Tag

帮你自动更新标签，在标签结尾使用没用，在开始标签使用。

Color Picker

颜色选择器，没什么用，可以出现颜色样板，滑动去色

Css Peek

点击 html 会自动跳转到对应的 css 位置

Dracula Official

最喜欢的一款皮肤，连顶部的 Tabs 栏都都标记颜色，真的很棒。

Manta's Stylus Suppremacy

stylus 的格式化工具，自定义强。

打开用户设置，点开右上角的文本配置，写下代码:

// 冒号,根据自己需求
    "stylusSupremacy.insertColons": false,
    // 分号，也是
    "stylusSupremacy.insertSemicolons": false,
    "stylusSupremacy.insertBraces": false,
    "stylusSupremacy.insertNewLineAroundImports": false,
    "stylusSupremacy.insertNewLineAroundBlocks": false,

Prettier-code formatter

格式化软件，支持语言超级多，而且自定义强，定制自己的代码风格， Vuter 加它，完美解决各种不喜欢，个人不喜欢冒号和引号，所以这个插件完美解决我的需求。

Markdown Preview

markdown 编写插件，可以让你的 vscode 瞬间变成记笔记写博客的软件， 无需别的编辑器。

最后附上个人的 vscode 配置

{
  "git.enabled": true,
  "git.path": null,
  "workbench.colorCustomizations": {
    "editor.selectionBackground": "#656B89",
    "editorCursor.foreground": "#ffff00",
  },
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "material-icon-theme",
  "editor.foldingStrategy": "indentation",
  "editor.fontSize": 14,
  "editor.wordWrap": "on",
  "terminal.integrated.shell.osx": "/bin/zsh",
  "vsicons.dontShowNewVersionMessage": true,
  "explorer.confirmDelete": false,
  "editor.fontFamily": "Monaco, 'Courier New', monospace",
  "window.zoomLevel": 1,
  "editor.renderLineHighlight": "gutter",
  "editor.tabCompletion": "on",
  "explorer.confirmDragAndDrop": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "git.enableSmartCommit": true,
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "workbench.colorTheme": "Dracula",
  "material-icon-theme.activeIconPack": "none",
  "extensions.autoUpdate": false,
  "update.showReleaseNotes": false,
  "extensions.autoCheckUpdates": false,
  "editor.tabSize": 2,
  "workbench.statusBar.visible": true,
  "breadcrumbs.enabled": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "vim.vimrc.enable": true,
  "vim.vimrc.path": "/Users/nifan/.vimrc",
  "vim.foldfix": true,
  "vim.autoSwitchInputMethod.enable": true,
  "vim.autoSwitchInputMethod.defaultIM": "com.apple.keylayout.ABC",
  "vim.autoSwitchInputMethod.obtainIMCmd": "/usr/local/bin/im-select",
  "vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}",
  "vim.easymotion": true,
  "vim.leader": ",",
  "vim.searchHighlightColor": "#007933",
  "vim.cursorStylePerMode.insert": "line",
  "vim.cursorStylePerMode.normal": "block",
  "diffEditor.renderSideBySide": true,
  "markdown.preview.fontSize": 12,
  "editor.rename.enablePreview": false,
  "workbench.editor.enablePreview": false,
  "workbench.editor.enablePreviewFromQuickOpen": false,
  "editor.fontWeight": "400",
  "terminal.external.osxExec": "Iterm.app",
  "sync.forceDownload": false,
  "sync.forceUpload": true,
  "sync.gist": "fc2fd8b2848fb7255034f69d68ff5115",
  "sync.removeExtensions": false,
  "sync.quietSync": false,
  "editor.quickSuggestions": {
    "strings": true
  },
  "cSpell.enableFiletypes": [
    "vue"
  ],
  "eslint.enable": true,
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "editor.detectIndentation": false,
  "files.saveConflictResolution": "overwriteFileOnDisk",
  "eslint.format.enable": true,
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "eslintIntegration": true
    }
  },
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "prettier.eslintIntegration": true,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.autoSave": "afterDelay",
  "editor.formatOnPaste": true,
  "vim.highlightedyank.color": "",
  "workbench.enableExperiments": false,
  "update.mode": "none",
  "telemetry.enableTelemetry": false,
  "telemetry.enableCrashReporter": false,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

可以直接粘贴到自己的vscode中，如果不用vim则可以不安装vim或者屏蔽即可，其他暗色的插件都可以安装，再根据自己的需求来调整。