好用插件
1. Auto Close Tag
html自動閉合標籤插件,具體不再詳述,看插件介紹
2. Auto Rename Tag
html 自動重命名標籤插件,誰用誰知道
3. Beautify
格式化插件
4. Chinese (Simplified) vscode 漢化插件
5. Code Runner
在編輯器裏運行js代碼,同時可在terminal裏顯示打印結果的工具,方便調試代碼,支持多種語言比如 C++, Python, Java等等
6. ES7 React/Redux/React-Native/JS snippets
通過指定的前綴,快速生成react代碼工具,寫一個例子,詳看插件介紹
imrcp + tab →
import React, { Component } from 'react'
import PropTypes from 'prop-types'
7. ESLint
代碼檢查工具,不再詳述,使用技巧裏會分享,eslint 保存格式化
8. Git History
git 工具,鼠標定位到代碼行上,可以在代碼後邊顯示代碼最近修改時間及修改人等信息
9. Git Project Manager
git 項目管理工具
10. GitLens — Git supercharged
git 工具,作用和 Git History 類似
11. HTML Snippets
快速生成html代碼工具
12. JS JSX Snippets
同上6,通過快捷鍵,快速生成react代碼工具
13. LeetCode
力扣刷題神器,沒有梯子的注意把賬號體系切換到國內賬號就可以登錄,默認是連的國外賬號
14. Live Server
快速啓動一個本地服務,方便html文件預覽調試等
15. npm
npm 依賴安裝提示,未安裝的依賴會在依賴下顯示波浪線提示
16. npm Intellisense
快速引入依賴插件,詳見插件介紹
17. Path Autocomplete
路徑提示插件
18. Path Intellisense
同上,路徑補全插件
19. Prettier - Code formatter
代碼格式化插件
20. Vetur
vue 代碼高亮插件,寫vue必裝神器
21. Visual Studio IntelliCode
代碼智能補全插件,這個不錯,大力推薦,用了就知道
22. Vue Theme
vue 代碼主題插件
23. Vue VSCode Snippets
快速生成vue代碼插件,在下邊的使用技巧裏會分享高級使用技巧
24. 微信小程序擴展
用vscode 開發小程序插件,代碼補全格式化等等
25. vscode wxml
提供 wxml 語法支持及代碼片段,和上一個類似
總結,以上插件是筆者用過的,基本都是評價4.5和5星的插件,在使用時,有的插件功能重複,建議大家一個功能選一個自己喜歡的,安裝太多的插件影響啓動速度,同時增加內存佔用,可能影響開發效率,最終適得其反。
使用方法
使用技巧裏暫先分享三個小技巧,筆者也是黔驢技窮,各位高手有好的工具方法,歡迎交流分享。
1. eslint 保存自動格式化
打開 文件 -> 首選項 -> 設置 -> 點擊任意一個 ‘在setting.json中編輯’, 打開配置文件,添加一下代碼就OK!
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
},
"typescript",
"typescriptreact"
]
2. 代碼片段的使用
通過代碼片段,可以用預定義快捷鍵,快速生成自定的代碼片段,對於開發效率的提高很有裨益。打開 文件 -> 首選項 -> 用戶代碼片段 彈出菜單有 ‘新建全局代碼片段文件’和 ‘新建項目代碼片段’,根據自己需要靈活選擇 如下是筆者的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是自定義的內容,將會插到文件中, $1 $2 等是光標的位置;description 是代碼片段的描述。
3. 最後是關於引入文件路徑提示的
在開發時,我們可能會通過webpack定義一些路徑別名,但是路徑補全插件不認識這些路徑別名,所以在別名引入時就不能用了,彆着急,我們可以通過配置插件的路徑別名來達到目的。如下是我的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"
},
需要注意的是這裏配置的別名路徑要和項目裏配置的一一對應,可以把配置文件修改放在項目配置裏而不是全局配置。