vscode 常用擴(kuò)展插件(工具篇)

常用插件

1. Auto Close Tag
html自動閉合標(biāo)簽插件,具體不再詳述，看插件介紹

2. Auto Rename Tag
html 自動重命名標(biāo)簽插件，誰用誰知道

3. Beautify
格式化插件

4. Chinese (Simplified) vscode 漢化插件

5. Code Runner
在編輯器里運(yùn)行js代碼，同時(shí)可在terminal里顯示打印結(jié)果的工具，方便調(diào)試代碼,支持多種語言比如 C++, Python, Java等等

6. ES7 React/Redux/React-Native/JS snippets
通過指定的前綴，快速生成react代碼工具，寫一個(gè)例子，詳看插件介紹

imrcp + tab → 

import React, { Component } from 'react' 

import PropTypes from 'prop-types'

7. ESLint
代碼檢查工具,不再詳述，使用技巧里會分享，eslint 保存格式化

8. Git History
git 工具，鼠標(biāo)定位到代碼行上，可以在代碼后邊顯示代碼最近修改時(shí)間及修改人等信息

9. Git Project Manager
git 項(xiàng)目管理工具

10. GitLens — Git supercharged
git 工具，作用和 Git History 類似

11. HTML Snippets
快速生成html代碼工具

12. JS JSX Snippets
同上6，通過快捷鍵，快速生成react代碼工具

13. LeetCode
力扣刷題神器，沒有梯子的注意把賬號體系切換到國內(nèi)賬號就可以登錄，默認(rèn)是連的國外賬號

14. Live Server
快速啟動一個(gè)本地服務(wù)，方便html文件預(yù)覽調(diào)試等

15. npm
npm 依賴安裝提示，未安裝的依賴會在依賴下顯示波浪線提示

16. npm Intellisense
快速引入依賴插件，詳見插件介紹

17. Path Autocomplete
路徑提示插件

18. Path Intellisense
同上，路徑補(bǔ)全插件

19. Prettier - Code formatter
代碼格式化插件

20. Vetur
vue 代碼高亮插件,寫vue必裝神器

21. Visual Studio IntelliCode
代碼智能補(bǔ)全插件，這個(gè)不錯(cuò)，大力推薦，用了就知道

22. Vue Theme
vue 代碼主題插件

23. Vue VSCode Snippets
快速生成vue代碼插件，在下邊的使用技巧里會分享高級使用技巧

24. 微信小程序擴(kuò)展
用vscode 開發(fā)小程序插件，代碼補(bǔ)全格式化等等

25. vscode wxml
提供 wxml 語法支持及代碼片段，和上一個(gè)類似

總結(jié)，以上插件是筆者用過的，基本都是評價(jià)4.5和5星的插件，在使用時(shí)，有的插件功能重復(fù)，建議大家一個(gè)功能選一個(gè)自己喜歡的，安裝太多的插件影響啟動速度，同時(shí)增加內(nèi)存占用，可能影響開發(fā)效率，最終適得其反。

使用技巧

使用技巧里暫先分享三個(gè)小技巧，筆者也是黔驢技窮，各位高手有好的工具方法，歡迎交流分享。

1. eslint 保存自動格式化
打開 文件 -> 首選項(xiàng) -> 設(shè)置 -> 點(diǎn)擊任意一個(gè) ‘在setting.json中編輯’, 打開配置文件，添加一下代碼就OK!

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

2. 代碼片段的使用

通過代碼片段，可以用預(yù)定義快捷鍵，快速生成自定的代碼片段，對于開發(fā)效率的提高很有裨益。打開 文件 -> 首選項(xiàng) -> 用戶代碼片段 彈出菜單有 ‘新建全局代碼片段文件’和 ‘新建項(xiàng)目代碼片段’，根據(jù)自己需要靈活選擇 如下是筆者的react代碼片段，供參考：

{
  "React template": {
  "scope": "javascript,jsx",
  "prefix": "irea",
  "body": [
    "import React, {Component} from 'react'",
    "",
    "class $1 extends Component{",
    "  render () {",
    "    return (",
    "      <>",
    "         $2",
    "      </>",
    "   )",
    "  }",
    "}",
    "",
    "export default $1"
  ],
  "description": "react template"
  }
}

其中的scope 是代碼片段用于那些文件，本例的用于js和jsx 文件；prefix 是自定義的快捷鍵；body是自定義的內(nèi)容，將會插到文件中， $1 $2 等是光標(biāo)的位置；description 是代碼片段的描述。

3. 最后是關(guān)于引入文件路徑提示的
在開發(fā)時(shí)，我們可能會通過webpack定義一些路徑別名，但是路徑補(bǔ)全插件不認(rèn)識這些路徑別名，所以在別名引入時(shí)就不能用了，別著急，我們可以通過配置插件的路徑別名來達(dá)到目的。如下是我的Path Intellisense 插件配置供參考，還是打開vscode配置 "setting.json" 文件,添加如下配置：

  "path-intellisense.mappings": {
      "@": "${workspaceRoot}/src",
      "components": "${workspaceRoot}/src/components",
      "assets": "${workspaceRoot}/src/assets",
      "util": "${workspaceRoot}/src/util",
      "plugin": "${workspaceRoot}/src/plugin"
  },

需要注意的是這里配置的別名路徑要和項(xiàng)目里配置的一一對應(yīng)，可以把配置文件修改放在項(xiàng)目配置里而不是全局配置。以上，有誤或者不妥的地方，歡迎留言指出，謝謝！