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