vscode我的配置

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-router二、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使用技巧