chrome浏覽器
如何安裝擴充
1. 拖動安裝 推薦
絕大部分插件都可以使用本方法安裝
如圖所示以下載下傳安裝 Vue Devtools 為例
- 進入 極簡插件 首頁
- 點選
搜尋
Vue Devtools
- 點選
推薦下載下傳
- 等待下載下傳完成，找到壓縮包
nhdogjmejiglipccpnnnanhbledajbpd.zip
-
右擊
解壓縮到檔案夾
- 進入檔案夾，有2個檔案，名字最長的那個就是安裝包
nhdogjmejiglipccpnnnanhbledajbpd_5.3.4_chrome.zzzmh.cn.crx
- 回到
chrome浏覽器
3個點
- 選擇
更多工具
擴充程式
- 先檢查右上角
開發者模式
點選打開
- 回到上文中的安裝封包件
xxx_5.3.4_xxx.crx
- 如下圖，彈出一個确認安裝的提示框，說明安裝成功，點選
添加擴充程式
vscode編輯器eslint及插件安裝chrome浏覽器vscode編輯器便捷啟動程式
如果你也希望插件圖示直接顯示在浏覽器右上角
- 可以點選右上角的
拼圖
- 找到你希望置頂的插件，點選
圖釘
2. 暴力安裝 不推薦
如果你在安裝過程中出現下圖中的錯誤
程式包無效 CRX_HEADER_INVALID
說明你想要安裝的插件超過2年以上沒更新了，很可能已經被谷歌下架了。
推薦是直接放棄這個插件，換一個功能類似的試試。
如果你一定要安裝上去看看裡面什麼樣的話
把剛才下載下傳的
谷歌通路助手_2.3.0_chrome.zzzmh.cn.crx
的擴充名
.crx
改成
.zip
改完以後是
谷歌通路助手_2.3.0_chrome.zzzmh.cn.zip
zip包拖動到chrome擴充程式頁面安裝即可，需要手動打開插件開關
這裡需要提醒有些使用者的windows系統會自動隐藏擴充名，你看到的是
谷歌通路助手_2.3.0_chrome.zzzmh.cn
結尾沒有
.crx
那說明你需要先百度 windows如何顯示檔案擴充名
安裝擴充
- Vue Devtools
- 劃詞翻譯
vscode編輯器
安裝擴充
基礎
-
Auto Rename Tag
标簽自動改名
-
Auto Close Tag
标簽自閉合
-
snippet-creator
代碼片段快速建立
-
Change String Case
修改字元串為
駝峰
橫杠
-
Bracket Pair Colorizer 2
花括号的顔色提示
-
Path Autocomplete
路徑的提示
-
JavaScript standardjs styled snippets
javascript的代碼片段
-
open in browser
通過浏覽器打開html檔案
格式化代碼
-
Prettier - Code formatter
各種格式代碼格式化
-
ESLint
eslint的文法提示和自動修複
-
ESLint Chinese Rules
eslint報錯中文翻譯
vue基礎
-
Vetur
官方推薦擴充,實作文法提示,和文法高亮
-
Vue 3 Snippets
vue2和vue3的代碼片段
-
VueThis$Store
vuex的提示
-
Axios Snippets
axios的代碼片段
ui庫
-
vscode-element-helper
element-ui的文法提示
-
Element UI Snippets
element-ui的代碼片段
- Form Generator Plugin
element-ui的表單設計器
-
Vant Snippets
vant的代碼片段
-
vant-helper
vant的文法提示
編輯器操作
快捷操作
如何打開編輯器的設定檔案
-
方式1.通過菜單
點選左下角
齒輪圖示
設定
檔案圖示
-
方式2.通過快捷鍵
按下
ctrl
shift
p
setting.json
首選項打開設定
如何快速定位到檔案
按下
ctrl
+
p
輸入
檔案名稱
建立代碼片段
- 步驟1.選中代碼
- 步驟2.按下
ctrl
shift
p
create snippet
vue
例如:
{
"emptyVue": {
"prefix": "emptyVue",
"body": [
"<template>\r",
" <div>\r",
"\r",
" </div>\r",
"</template>\r",
"\r",
"<script>\r",
"export default {\r",
" data () {\r",
" return {\r",
"\r",
" }\r",
" },\r",
" created () {\r",
"\r",
" },\r",
" methods: {\r",
"\r",
" }\r",
"}\r",
"</script>\r",
"\r",
"<style less\" scoped>\r",
"\r",
"</style>\r",
""
],
"description": "空白的vue檔案"
}
}
git送出代碼
-
檢視分支
看
左下角
-
添加到暫存區
點選
左側欄
源代碼管理
更改
+
-
送出代碼到本地倉庫
點選
源碼管理
勾勾
回車
-
推送代碼到遠端
點選
源碼管理
...
推送
-
合并分支,切換master
點選左下角分支名稱,切換到
master
源碼管理
...
分支/合并分支
-
推送代碼到遠端
點選
源碼管理
...
推送
-
建立新分支
點選左下角分支名稱,點選
正在建立新分支
Vue項目
vue模闆中自動提示方法和變量
在編輯器的配置檔案
setting.json
添加
"vetur.experimental.templateInterpolationService": true, //vue,模闆補全
"vetur.validation.interpolation": false, //vue模闆診斷
vue檔案格式化配置
"[vue]": { //vue檔案格式化方式
"editor.defaultFormatter": "octref.vetur"
},
"vetur.format.defaultFormatter.js": "none", //vue中js的格式化不交給vetur,而交給eslint
eslint自動修複
在編輯器的配置檔案
setting.json
添加
"editor.formatOnSave": false,//關閉編輯器的自動報錯格式化,避免跟eslint擴充沖突
"editor.codeActionsOnSave": {//儲存檔案,然後自動修複eslint報錯
"source.fixAll.eslint": true
},
注意:
(1)
eslint
要允許檢查代碼(編輯器右下角
eslint
,要打鈎)
(2) 添加項目要添加到根路徑(點選檔案,選擇将檔案夾添加到工作區
,進入項目
裡面,點選添加)
解決路徑别名
(1)在項目根路徑建立
jsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
(2).安裝擴充
Path Autocomplete
添加配置
"path-autocomplete.pathMappings": {
"@": "${workspace}/src",
"[email protected]": "${workspace}/src"
}
自動導入方法
**前提:**檔案
jsconfig.json
已存在
使用plop建立檔案
參考vue-element-admin項目
步驟1.複制vue-element-admin項目,根路徑的
plopfile.js
檔案,和
plop-templates
檔案夾,到自己項目中
步驟2.按依賴plop,
npm i [email protected]
步驟3.在
package.json
的
script
中添加
步驟4.通過
npm run new
執行指令
其他
同步vscode的設定
便捷啟動程式
- 步驟1.在項目檔案夾建立
啟動vue-ui.bat
- 步驟2.書寫内容
node app
- 步驟3.發送到桌面,輕按兩下運作