VSCode 的个人配置

从事前端开发的这段期间,主要用过webstorm、sublime、vscode。对这三个编辑器不能说很熟悉，但也深有体会。有很多论坛或者群里的小伙伴经常讨论他们哪个更好，我觉得，各有各的好处，自己喜欢就好。webstorm集成了很多插件，功能很丰富，但是运行环境要求高，机子不好很容易卡。sublime很轻，感觉有点像nodepad++轻巧，打开文件很快，自从使用vscode后，我就把它当作单文件编辑器使用。个人感觉vscode用起来确实很方便，自带git，也比较轻巧，集合了webstorm和sublime的优点。下面是我对vscode的个人配置，以此记录，方便以后换环境后重新配置。针对vue开发，很多部分部分不完善，仅供参考（持续更新…）

Vue相关插件:

• Vetur

  • 语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript
  • 语法高亮，包括 html/jade/pug css/sass/scss/less/stylus js/ts
  • emmet 支持
  • 代码自动补全（目前还是初级阶段），包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript

• VueHelper

  • Vue2代码段（包括Vue2 api、vue-router2、vuex2）

• wpy-beautify

  • Vue代码格式化插件，非常好用

• fileHeader

  • 在文件中插入作者、时间等信息

• ESLint

  • 配合vue-cli中的eslint,检查代码

其他插件:

• Code Runner

  • VsCode安装包默认内置的node debug插件需要配置工程调试运行文件才能正常运行，对于想要运行一个简单的js文件或者就是一段js代码时比较麻烦，为此可以安装Code Runner插件

• Auto Close Tag

  • 不知道最近更新后的版本中有没有自带闭合标签的功能,如果没有,装一个auto close tag是个不错的选择

• Auto Rename Tag

  • 修改标签时,闭合标签自动修改

• Path Autocomplete

  • 路径自动补全插件

• Betutify

• colorize

• Git History

vscode设置中的个人配置

{
  // 选择使用的集成终端,根据个人喜好
  "terminal.integrated.shell.windows": "D:\\Git\\git-cmd.exe",

  // 一个制表符等于的空格数
  "editor.tabSize": 2,
  // 呈现空白字符的方式
  "editor.renderWhitespace": "boundary",
  // 自带的字体挺好的,不过个人更喜欢Monaco字体
  "editor.fontFamily": "Monaco",
  "editor.fontSize": 13,

  // 启用后，保存文件时在文件末尾插入一个最终新行。
  "files.insertFinalNewline": true,
  // 启用后，将在保存文件时剪裁尾随空格。
  "files.trimTrailingWhitespace": true,
  // 加载和侧边栏显示时,忽略的文件/文件夹
  "files.exclude": {
    "**/.svn": true,
    "**/.hg": true,
    "**/.DS_Store": true,
    // "**/_posts":true,
    "**/.sass-cache": true,
    "**/.vscode": true,
    "**/node_modules": true,
    "**/.idea": true
  },

  // vue相关的设置
  "files.associations": {
    "*.vue": "vue"
  },
  "emmet.showAbbreviationSuggestions": true,
  "emmet.showExpandedAbbreviation": "always",
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  },
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },

  // 安装vetur之后会自带format，自动保存时会讲单引号变成双引号，如果有自己的ESlint配置，最好将其关闭。
  "vetur.format.defaultFormatter.js": "none",
  // ESLint插件的配置
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "plugins": ["html"]
  },

  // fileHeader插件的配置
  "fileheader.Author": "fmain",
  "fileheader.LastModifiedBy": "fmain",
  "fileheader.tpl": "<-- Created on {createTime} By {author} -->\n",
  "fileHeaderComment.parameter": {
    "*": {
      "author": "fmain",
      "company": "CAICT"
    }
  },
  "fileHeaderComment.template": {
    "*": [
      "/*",
      "* @Author: ${author}",
      "* Created on ${datetime24h}",
      "* Copyright (c) ${year} ${company}",
      "*/"
    ],
    "-": [
      "<-- Created by ${author} on ${date} -->"
    ]
  }
}

传送门: VSCode使用技巧