VSCode 插件

通用

編輯器相關(guān)

• Chinese (Simplified) Language Pack for Visual Studio Code: 官方中文包
• Settings Sync: 使用 GitHub 保存 VSCode 的設(shè)置，設(shè)置可跨設(shè)備
• filesize: 在底部狀態(tài)欄顯示當(dāng)前文件大小，點(diǎn)擊后還可以看到詳細(xì)創(chuàng)建、修改時間
• Path Intellisense: 路徑自動補(bǔ)全
• TODO Highlight: 默認(rèn)對 TODO: 進(jìn)行特殊著色，可自定義配置的文字片段做特殊著色
• Comment Translate: 一個可以翻譯注釋的插件
• GitLens — Git supercharged: git 增強(qiáng)
• EditorConfig for VS Code: 根據(jù) .editorConfig 文件統(tǒng)一編輯器的格式
• Live Server: 靜態(tài)服務(wù)器
  
  20180806142450.png

20180806142553.png

• Excel Viewer: 查看 Excel

項(xiàng)目管理

• project Manager: 多項(xiàng)目管理
• Bookmarks: 對文件的行做標(biāo)簽（查看業(yè)務(wù)源碼特別好用）

代碼相關(guān)

• Code Runner: 運(yùn)行代碼，可運(yùn)行 JS, C, C++, Java, PHP 等
• Code Spell Checker: 對camelCase代碼進(jìn)行拼寫檢查
• change-case: 對變量的編寫方式做調(diào)整（camel、constant、dot等）
• REST Client: REST客戶端允許直接發(fā)送http請求并在 VSCode 中查看響應(yīng)
• Color Info: 查看顏色的（HEX、 RGB、HSL 和 CMYK）相關(guān)信息

圖片

• Image preview: 本地圖片預(yù)覽，在引入圖片的行的左側(cè)會出現(xiàn)圖片的縮略圖，鼠標(biāo)懸停在圖片的鏈接上會有圖片預(yù)覽
• SVG Viewer: 查看SVG

目錄樹圖標(biāo)

• vscode-icons
• Material Icon Theme

格式化

• Beautify: 格式化 javascript, JSON, CSS, Sass, HTML
• Prettier - Code formatter: 可以和 ESLint , .editorConfig 一起用的格式化插件，對 .vue 特別好用

HTML

• Auto Rename Tag: 自動重命名配對的 HTML / XML 標(biāo)簽
• HTML CSS Support: 在 html 標(biāo)簽上寫 class 智能提示當(dāng)前項(xiàng)目所支持的樣式
• HTML Snippets: html 代碼片段
• htmltagwrap: 可以在選中HTML標(biāo)簽中外面套一層標(biāo)簽，選擇一大段代碼，然后按 Alt + W

CSS

• stylelint: CSS/SCSS/Less 的代碼規(guī)范性檢查

• Live Sass Compiler:實(shí)時編譯 sass

  // VScode 配置文件中配置
  "liveSassCompile.settings.formats":[
    {
      "format": "compressed",// 壓縮格式
      "extensionName": ".min.css",// 編譯后綴名
      "savePath": "./css"http:// 編譯保存的路徑
    }
  ],
  "liveSassCompile.settings.autoprefix": [
    // 自動加前綴的目標(biāo)瀏覽器
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  

15093281194279.jpg

• Sass:對 .sass 文件著色的插件
• language-stylus: stylus 預(yù)編譯器的代碼著色插件
• Manta's Stylus Supremacy: stylus 預(yù)編譯器的代碼格式插件

JS

• ESLint: js 的代碼規(guī)范性檢查，可設(shè)置自動格式化

  // VScode 配置文件中配置
  "eslint.autoFixOnSave": true, // 自動格式化
  "eslint.validate": [
    { "language": "javascript", "autoFix": true },
    { "language": "vue", "autoFix": true }
  ],
  

• Visual Studio IntelliCode - Preview: 微軟官方出品的 AI 智能提示插件

• JavaScript Snippet Pack: js代碼片段

• JavaScript (ES6) code snippets: es6代碼片段

• npm相關(guān):

  • Import Cost: 計(jì)算引入包大小
  • npm Intellisense: 在導(dǎo)入語句中自動填充npm模塊

• DotENV: .env 配置文件的著色插件

我的 VSCode 設(shè)置

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.statusBar.feedback.visible": false,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "emmet.triggerExpansionOnTab": true,
  "emmet.showSuggestionsAsSnippets": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.renderWhitespace": "all",
  "editor.smoothScrolling": true,
  "editor.suggestSelection": "first",
  "files.eol": "\n",
  "files.autoSave": "onFocusChange",
  "files.defaultLanguage": "javascript",
  "files.associations": {
    "*.env.*": "dotenv"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",

  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    { "language": "javascript", "autoFix": true },
    { "language": "vue", "autoFix": true }
  ],

  "languageStylus.useSeparator": false,
  "stylusSupremacy.insertColons": false,
  "stylusSupremacy.insertSemicolons": false,
  "stylusSupremacy.insertBraces": false,
  "stylusSupremacy.insertNewLineAroundBlocks": false,

  "prettier.eslintIntegration": true,
  "prettier.htmlWhitespaceSensitivity": "ignore",

  "vetur.validation.template": false,

  "todohighlight.include": [
    "**/*.js",
    "**/*.jsx",
    "**/*.ts",
    "**/*.tsx",
    "**/*.html",
    "**/*.css",
    "**/*.scss",
    "**/*.styl",
    "**/*.vue"
  ],
  "todohighlight.keywords": [
    {
      "text": "@todo",
      "color": "#ffffff",
      "backgroundColor": "#FFBD2A"
    },
    {
      "text": "tips:",
      "color": "#130000",
      "backgroundColor": "#0DBC79"
    },
    {
      "text": "WRAN:",
      "color": "#964700",
      "backgroundColor": "#E5E510"
    },
    {
      "text": "DANGER:",
      "color": "#FF0000",
      "backgroundColor": "#FFB5B5"
    },
    {
      "text": "===start===",
      "color": "#130000",
      "backgroundColor": "#2472C8"
    },
    {
      "text": "===end===",
      "color": "#130000",
      "backgroundColor": "#2472C8"
    }
  ],

  "gitlens.views.lineHistory.enabled": false,
  "gitlens.views.search.enabled": false,

  "path-intellisense.extensionOnImport": true,
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },

  "sync.gist": "**********************************",

  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

  "liveServer.settings.donotShowInfoMsg": true,
  "liveSassCompile.settings.formats":[
    {
      "format": "compressed",
      "extensionName": ".min.css",
    }
  ],
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],

  "material-icon-theme.folders.associations": {
    "styl": "stylus",
    "iconfont": "font",
    "store": "dataBase",
    ".env.*": "dotenv"
  }
}