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.发送到桌面,双击运行