在這個章節裡，我將要分享，目前很多人使用的 Visual Studio Code 編輯器，使用的情境是，當我每次重新設定 Visual Studio Code 的套件時，我都去網路上，找尋各位大大分享的文章，可是往往都會找到去年或是更舊的資料，因此 ~ 我覺得固定更新及分享，自己所使用到的 Visual Studio Code 套件及設定，是件很重要的事。

Visual Studio Code 所使用套件

Auto Close Tag

• 官方網址介紹：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Rename Tag

• 官方網址介紹：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Bracket Pair Colorizer

• 官方網址介紹：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Spelling Checker for Visual Studio Code

• 官方網址介紹：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Color Highlight

• 官方網址介紹：https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

CSS Peek

• 官方網址介紹：https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

ES7 React/Redux/React-Native/JS snippets

• 官方網址介紹：https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

ESLint

• 官方網址介紹：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Git Blame

• 官方網址介紹：https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame

Guides

• 官方網址介紹：https://marketplace.visualstudio.com/items?itemName=spywhere.guides

Visual Studio Code 設定

這裡盡量加上註解，讓各位了解，各個設定是什麼意思。

{
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  // Prettier 套件格式啟動
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // Tab 間隔
  "editor.tabSize": 2,
  // Sass 套件 打開
  "sass.lint.enable": true,
  // 字體大小
  "editor.fontSize": 16,
  // Theme 設定
  "workbench.iconTheme": "material-icon-theme",
  // javascript 跟 erb 要自己加
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript",
    "erb"
  ],
  // 建議禁用內置的editor.matchBrackets設置
  "editor.matchBrackets": "never",
  // 增加值"backgroundColor : {color}"，以提高知名度
  "bracketPairColorizer.highlightActiveScope": true,
  // 在裝訂線中顯示活動範圍括號
  "bracketPairColorizer.showBracketsInGutter": true,
  // 字體間距
  "editor.letterSpacing": 1,
  // 行高
  "editor.lineHeight": 26,
  // 開啟 rubocop 設定
  "ruby.format": "rubocop",
  // 切換檔案時會自動儲存
  "files.autoSave": "onFocusChange",
  // 除存檔案時，自動插入新的一行
  "files.insertFinalNewline": true,
  // 除存檔案時，自動修正最後一行
  "files.trimFinalNewlines": true,
  // 除存檔案時，自動修正空格
  "files.trimTrailingWhitespace": true,
  // 設定一行程式碼長度限制
  "editor.rulers": [80,120],
  // 游標粗細
  "editor.cursorWidth": 2,
  // code snippet 提示拉到最上面
  "editor.snippetSuggestions": "top",
  // 為確保Emmet建議始終位於建議列表的頂部，請添加以下設置
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.includeLanguages": {
    "erb": "html",
    "javascript": "javascriptreact"
  },
  // 關掉驗證，因為有使用到 Facebook 的 Flow.js，Vscode 的老爸微軟不支援
  "javascript.validate.enable": false,
  "files.associations": {
    "*.js": "javascriptreact"
  },
  // 讓 Emmet 功能使用 Tab 鍵就可以觸發
  "emmet.triggerExpansionOnTab": true,
  // 樣板
  "workbench.colorTheme": "Default High Contrast",
  // TODO Highlight 這功能要開啟在哪些檔案裡
  "todohighlight.include": [
    "**/*.js",
    "**/*.jsx",
    "**/*.html",
    "**/*.css",
    "**/*.scss",
    "**/*.erb",
    "**/*.rb"
  ],
  // TODO Highlight Keyword
  "todohighlight.keywordsPattern": "\"TODO:|FIXME:|\\\\(([^)]+)\\\\)\"",
  // Spell 要含哪些程式語言
  "cSpell.enableFiletypes": [
    "asciidoc",
    "cpp",
    "csharp",
    "css",
    "git-commit",
    "handlebars",
    "haskell",
    "html",
    "jade",
    "javascript",
    "javascriptreact",
    "json",
    "jsonc",
    "latex",
    "less",
    "markdown",
    "plaintext",
    "python",
    "pug",
    "restructuredtext",
    "rust",
    "scala",
    "scss",
    "text",
    "typescript",
    "typescriptreact",
    "yaml",
    "yml",
    "ruby"
  ],
  // Ruby 套件很重要設定，開了才會有 Go to Definition 功能
  "ruby.intellisense": "rubyLocate",
  "ruby.codeCompletion": "rcodetools",
  "ruby.useLanguageServer": true,
  "todo-tree.tree.showScanModeButton": false,
  "editor.renderIndentGuides": false,
  "auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (Eex)"
  ],
  "auto-close-tag.excludedTags": [
    "area",
    "base",
    "br",
    "col",
    "command",
    "embed",
    "hr",
    "img",
    "input",
    "keygen",
    "link",
    "meta",
    "param",
    "source",
    "track",
    "wbr"
  ],
  // 檔案路徑用， ~ 是給 webpack 用
  "path-intellisense.mappings": {
    "~img": "${workspaceRoot}/src/img/"
  },
  // 讓 ESLint 幫忙檢查及排版
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "javascript.updateImportsOnFileMove.enabled": "never",
}