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