# Extension xịn xò cho VSCode

# Giới thiệu sơ sơ

Auto Import (steoates)
Auto Rename Tag (Jun Han)
Beautify (HoockyQR)
giúp bạnđịnh dạng lại cách hiển thị code một cách đẹp mắt hơn. Nó hỗ trợ cho các ngôn ngữ phổ biến hiện nay như là Javascript, JSON, CSS, Sass và HTML.
Bracket Pair Colorizer (CoenraadS)
tô màu rõ ràng cho từng khối code giúp bạn dễ nhìn hơn
Code Navigation (vikas)
lưu lại lịch sử những lần trỏ chuột, một phần nào đó giúp bạn thao tác nhanh hơn, hoặc back lại đoạn code vừa đọc.
Code Spell Checker (Street Side Software)
giúp bạn kiểm tra lỗi chính tả của đoạn mã trong chương trình. Tuy nhiên nó chỉ hỗ trợ 1 số ngôn ngữ như nước ngoài phổ biến chưa có tiếng Viết Nam nha.
DotENV (mikestead)
Draw.io Integration (Henning Dieterichs)
ESLint (Dirk Baeumer)
GitLens (Eric Amodio)
là tiện ích cung cấp nhiều tính năng hữu ích giúp bạn làm việc với Git một cách tốt hơn như là hiển thị chú thích cho từng dòng code về lập trình viên commit, hiển thị thông tin chi tiết các lần sửa đổi đoạn mã trong File...
Import Cost (Wix)
giúp bạn có thể kiểm tra kích thước của các file import một cách dễ dàng thông qua thông tin được hiển thị trực tiếp bên đoạn mã khi ta thực hiện import.
Material Icon Theme
là một tiện ích thiết lập icon Material Design cho Visual Studio Code.
Node.js Modules Intellisense (Zongmin Lei)
Prettier (Prettier)
Path Intellisense (Christian Kohler)
Settings Sync (Shan Khan) (opens new window)
lười mới xài nhiều tool mà mỗi lần chuyển máy phải cài lại còn lười hơn. nó sẻ giúp bạn có thể lưu lại các thiết lập cho Visual Studio Code trên máy tính của mình lên trên Github và sử dụng cho các máy khác một cách dễ dàng với các thông tin về extension, hay các cài đặt mà mình đã thiết lập.
Turbo Console Log (ChankrounAnas)
tạo 1 dòng log debug chưa bao giờ dể dàng đến thế cho kẻ lười biếng
Visual Studio IntelliCode (Microsoft)
vscode-isons (VSCode Icons Team)
là tiện ích chúng ta có thể thiết lập nhiều icon đẹp mắt cho Visual Studio Code.
Tabnine Autocomplete AI (TabNine)
cái này làm nặng VSCode lắm á nhe
GraphQL for VSCode (Kumar harsh)
Vetur (Pine Wu)

# Cài đặt hàng loạt

curl -o- https://raw.githubusercontent.com/phuongnd1312/devops/master/vscode-extension.sh | bash

# Set VSCode User Setting

{
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "git.path": "/usr/bin/git",
  "workbench.iconTheme": "eq-material-theme-icons-ocean",
  "editor.renderWhitespace": "all",
  "files.eol": "\n",
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "gitlens.historyExplorer.enabled": true,
  "team.showWelcomeMessage": false,
  "eslint.trace.server": "verbose",
  "emmet.includeLanguages": {
    "javascript": "html",
    "vue": "html",
    "vue-html": "html",
    "javascriptreact": "html",
    "typescript": "html"
  },
  "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "vue": "prettier"
  },
  "editor.multiCursorModifier": "ctrlCmd",
  "window.zoomLevel": 0,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "terminal.integrated.rendererType": "dom",
  "git.ignoreMissingGitWarning": true,
  "jsDocCompletion.enabled": true,
  "javascript.referencesCodeLens.enabled": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "gitlens.views.fileHistory.enabled": true,
  "gitlens.views.lineHistory.enabled": true,
  "workbench.colorCustomizations": {
    "activityBarBadge.background": "#2979FF",
    "list.activeSelectionForeground": "#2979FF",
    "list.inactiveSelectionForeground": "#2979FF",
    "list.highlightForeground": "#2979FF",
    "scrollbarSlider.activeBackground": "#2979FF50",
    "editorSuggestWidget.highlightForeground": "#2979FF",
    "textLink.foreground": "#2979FF",
    "progressBar.background": "#2979FF",
    "pickerGroup.foreground": "#2979FF",
    "tab.activeBorder": "#2979FF",
    "notificationLink.foreground": "#2979FF",
    "editorWidget.resizeBorder": "#2979FF",
    "editorWidget.border": "#2979FF",
    "settings.modifiedItemIndicator": "#2979FF",
    "settings.headerForeground": "#2979FF",
    "panelTitle.activeBorder": "#2979FF",
    "breadcrumb.activeSelectionForeground": "#2979FF",
    "menu.selectionForeground": "#2979FF",
    "menubar.selectionForeground": "#2979FF"
  },
  "workbench.colorTheme": "Sublime Material Theme - Dark",
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true
    }
  },
  "vue-i18n-ally.displayLanguage": "en-US",
  "extensions.ignoreRecommendations": false,
  "workbench.sideBar.location": "left",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.migration.2_x": "off",
  "terminal.integrated.shell.linux": "/usr/bin/zsh",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.acceptSuggestionOnEnter": "off",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "tabnine.experimentalAutoImports": true,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "editor.minimap.enabled": true,
  "editor.renderControlCharacters": false,
  "workbench.activityBar.visible": true,
  "editor.fontFamily": "'Fira Code Retina', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontWeight": "normal",
  "editor.fontSize": 13,
  "sync.gist": "9accb97dfa086afc560aae212c4b9db5",
  "sync.autoDownload": true,
  "sync.autoUpload": true,
  "sync.forceDownload": true,
  "sync.forceUpload": true,
  "sync.quietSync": true,
  "settingsSync.ignoredExtensions": [
    "dbaeumer.jshint"
  ]
}

# Set VSCode Workspace Setting

{
  "editor.renderWhitespace": "all",
  "files.eol": "\n",
  "prettier.trailingComma": "none",
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "gitlens.historyExplorer.enabled": true,
  "eslint.autoFixOnSave": true,
  "eslint.trace.server": "verbose",
  "emmet.includeLanguages": {
    "javascript": "html",
    "vue": "html",
    "vue-html": "html",
    "javascriptreact": "html",
    "typescript": "html"
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "editor.multiCursorModifier": "ctrlCmd",
  "materialTheme.fixIconsRunning": false,
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "editor.tabSize": 2,
  "files.associations": {
    "*.js": "javascript"
  }
}

# Set VSCode Keyboard Setting

 {
    "key": "ctrl+shift+u",
    "command": "editor.action.transformToUppercase",
    "when": "editorTextFocus"
 },
 {
    "key": "ctrl+shift+l",
    "command": "editor.action.transformToLowercase",
    "when": "editorTextFocus"
 }

← Style Guide Setup Windows Subsystem for Linux →