vscode 前端實用插件和配置

插件

  any-rule v0.1.0
  auto-close-tag v0.5.6
  auto-rename-tag v0.1.1
  bracket-pair-colorizer v1.0.61
  code-runner v0.9.15
  code-settings-sync v3.4.3
  EditorConfig v0.14.4
  githistory v0.4.13
  gitlens v10.2.0
  html-css-class-completion v1.19.0
  html-snippets v0.2.1
  indenticator v0.6.0
  JavaScriptSnippets v1.7.2
  korofileheader v4.5.2
  latex-workshop v8.5.0
  markdown-all-in-one v2.6.1
  npm-intellisense v1.3.0
  open-in-browser v2.0.0
  output-colorizer v0.1.2
  path-autocomplete v1.13.3
  path-intellisense v1.4.2
  prettier-vscode v3.18.0
  shell-format v7.0.0
  sublime-keybindings v4.0.6
  svg v1.0.6
  team v1.161.0
  tpl v1.0.1
  tslint v1.0.44
  vetur v0.22.6
  vscode-docker v0.9.0
  vscode-eslint v2.0.13
  vscode-html-css v0.2.3
  vscode-language-pack-zh-hans v1.41.2
  vscode-nginx v0.7.2
  vscode-npm-script v0.3.10
  vscode-yaml v0.6.1

配置

{
  "prettier.semi":false,
  "prettier.singleQuote":true,
  "prettier.trailingComma":"es5",
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true, //使用帶引號替代雙引號
      "eslintIntegration": true,// 點擊保存時，根據 eslint 規則自定修復，同時集成 prettier 到 eslint 中
      "semi": false,//去掉代碼結尾的分號
      "trailingComma": "es5"
    }
  },
  // 為了避免和 eslint 沖突，講編輯器默認的代碼檢查規則關閉（如果開啟了）
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
      "source.fixAll.tslint": true,
      "source.fixAll.eslint": true,
      "source.fixAll.markdownlint": true
  },
  // 是否開啟eslint檢測
  "eslint.enable": true,
  "tslint.enable": true,
  "tslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  // "eslint.validate": [
  //     {
  //       "language": "vue",
  //       "autoFix": true
  //     },
  //     {
  //       "language": "javascript",
  //       "autoFix": true
  //     },
  //     {
  //       "language": "typescript",
  //       "autoFix": true
  //     },
  //     {
  //       "language": "javascriptreact",
  //       "autoFix": true
  //     }
  //   ],
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src",
    "src": "${folder}/src",
    "utils": "${folder}/src/utils",
    "services": "${folder}/src/services",
    "vuexPath": "${folder}/src/vuex",
    "components": "${folder}/src/components",
    "com": "${folder}/src/components",
  },
  "search.followSymlinks": false,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/.cache": true,
    "**/.cache-loader": true,
    "build/": true,
    "temp/": true,
    "library/": true,
    "**/*.anim": true
  },
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/*.meta": true,
    "library/": true,
    "local/": true,
    "temp/": true
  },
  "powermode.enabled": true,
  "powermode.presets": "flames",
  "editor.tabSize": 2,
  "editor.lineHeight": 24,
  "editor.renderLineHighlight": "none",
  "editor.renderWhitespace": "none",
  "editor.fontSize": 14,
  "editor.cursorBlinking": "smooth",
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.formatOnPaste": false,
  "editor.snippetSuggestions": "top",
  "workbench.colorTheme": "Monokai",
  "breadcrumbs.enabled": true,
  "workbench.startupEditor": "newUntitledFile",
  "files.trimTrailingWhitespace": true,
  "files.associations": {
    "*.vue": "vue",
    "*.html": "html",
    "*.wxss": "css",
    "*.wxml": "html",
    "*.js": "javascript"
  },
  // 配置emmet是否啟用tab展開縮寫
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
 },
 //顯式彈出語法展開提示
//  "emmet.showSuggestionsAsSnippets": true,
//  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
//  "editor.quickSuggestions": false,
//  "editor.wordBasedSuggestions": false,
//  "editor.acceptSuggestionOnCommitCharacter": false,
  // 配置emmet對文件類型的支持，比如vue后綴文件按照html文件來進行emmet擴寫
  // "emmet.syntaxProfiles": {
  //   "vue-html": "html",
  //   "vue": "html",
  //   "javascript": "javascript",
  //   // "javascript": "javascriptreact",
  //   // xml類型文件默認都是單引號，開啟對非單引號的emmet識別
  //   "xml": {
  //     "attr_quotes": "single"
  //   }
  // },
  // 在react的jsx中添加對emmet的支持
  // "emmet.includeLanguages": {
  //   "jsx-sublime-babel-tags": "javascriptreact",
  //   "javascript”": "javascript",
  //   "wxml": "html"
  // },
  "team.showWelcomeMessage": false,
  //  go
  "go.goroot": "/usr/local/go", //默認/usr/local/go
  "go.gopath": "/Users/liulu/Documents/work/go_project",
  "sync.gist": "262619791ad5e6b8e40f44b193444b5all",
  "explorer.confirmDragAndDrop": false,
  "javascript.updateImportsOnFileMove.enabled": "never",
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "python.pythonPath": "/usr/local/bin/python3.7",
  "fileheader.configObj": {
    "autoAdd": false, // 默認開啟
  },
  "fileheader.customMade": {
    "Description": "",
    "author": "<https://github.com/algesthesiahunter>",
  }, // 頭部注釋
  "fileheader.cursorMode": {
    "description": "",
    "param": "",
    "return": ""
  },

  // 文件頭部注釋 快捷鍵：window：ctrl+alt+i,mac：ctrl+cmd+i
  // 函數注釋 快捷鍵：window：ctrl+alt+t,mac：ctrl+cmd+t
  "window.zoomLevel": 0,
  "editor.minimap.enabled": true,
  "files.eol": "\n",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.title": "${activeEditorLong}${separator}${rootName}",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": null,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[shell]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[nginx]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[dockerfile]": {
    "editor.defaultFormatter": "ms-azuretools.vscode-docker"
  },
  "[yaml]": {
    "editor.defaultFormatter": "redhat.vscode-yaml"
  },
  "terminal.integrated.rendererType": "dom",
  "diffEditor.ignoreTrimWhitespace": false
}