vs code 自食用記錄

仍是以爲webstorm強大，公司電腦又不用心疼內存，確定是個人首選，奈何最新版破解方法都已失效，必然要擁抱vs code了。

個人插件列表

• auto Rename Tag 用於修改html標籤，修改開始標籤，會自動匹配修改結束標籤
• Bracket Pair Colorizer 用於對匹配的括號作顏色區分，使咱們能更快的找到代碼塊對應的位置
• ESLint 代碼檢查
• GitLens 用於git代碼管理
• Material Icon Theme 圖標修改成material風格
• Path Intellisense 導入包的時候，能夠自動提示包裏所包含的模塊，便於選擇
• Prettier 代碼格式化插件
• Vetur 支持單文件
• Vue Theme 一款我我的以爲比較舒服的主題

實用快捷鍵

"command" + "p" 快速搜索指定文件 "control" + "tab" 在已打開的文件之間切換 "control" + "-" (減號)/ "control" + "shift" + "-" 跳回之間光標的位置/從新回到當前位置 "command" + "shift" + "" 自動跳轉到對應的結束括號

附所有快捷鍵：

workspace 設置

.vscode 文件夾下的setting.json 保存了工做區設置 個人設置文件以下：

{
    "eslint.packageManager": "yarn",
    "eslint.run": "onSave",
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "html",
        "autoFix": true
      },
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    "vetur.format.options.tabSize": 2,
    "vetur.format.options.useTabs": true,
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.scriptInitialIndent": true,
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned",
        "end_with_newline": true
      },
      "prettier": {
        "useTabs": false,
        "tabSize": 2,
        "semi": false,
        "singleQuote": true,
        "eslintIntegration": true,
        "trailingComma": "none",
        "bracketSpacing": true,
        "proseWrap": "preserve"
      },
      "prettyhtml": {
        "tabWidth": 2,
        "useTabs": true,
        "printWidth": 100,
        "singleQuote": false
      }
    },
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "emmet.showAbbreviationSuggestions": true,
    "emmet.showExpandedAbbreviation": "always",
    "emmet.includeLanguages": {
      "vue-html": "html",
      "vue": "html",
      "*.tpl": "html"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
    },
    "files.associations": {
      "*.tpl": "html",
      "*.vue": "vue"
    },
    "files.insertFinalNewline": true,
    "[javascript]": {
      "editor.formatOnSave": true
    },
    "html.format.indentInnerHtml": true,
    "prettier.arrowParens": "always",
    "prettier.eslintIntegration": true,
    "prettier.jsxSingleQuote": true,
    "prettier.jsxBracketSameLine": true,
    "prettier.useTabs": true,
    "prettier.tabWidth": 2,
    "prettier.bracketSpacing": true,
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "prettier.trailingComma": "none",
    "files.watcherExclude": {
      "**/.git/objects/**": true,
      "**/.git/subtree-cache/**": true,
      "**/node_modules/**": true,
      "**/tmp/**": true,
      "**/bower_components/**": true
    },
    "files.exclude": {
      "**/.git": true,
      "**/.svn": true,
      "**/.hg": true,
      "**/CVS": true,
      "**/.DS_Store": true,
      "**/tmp": true,
      "**/node_modules": true,
      "**/bower_components": true
    },
    "workbench.enableExperiments": false,
    "workbench.settings.enableNaturalLanguageSearch": false,
    "better-comments.highlightPlainText": true,
    "editor.detectIndentation": false,
    "editor.tabSize": 2
  }
複製代碼