vscode编辑器eslint及插件安装

chrome浏览器

如何安装扩展

1. 拖动安装 推荐

绝大部分插件都可以使用本方法安装

如图所示以下载安装 Vue Devtools 为例

1. 进入 极简插件 首页
2. 点击 搜索,输入Vue Devtools
3. 点击 推荐下载
4. 等待下载完成，找到压缩包 nhdogjmejiglipccpnnnanhbledajbpd.zip
5. 右击 - 解压缩到文件夹
6. 进入文件夹，有2个文件，名字最长的那个就是安装包 nhdogjmejiglipccpnnnanhbledajbpd_5.3.4_chrome.zzzmh.cn.crx
7. 回到 chrome浏览器 - 点击右上角 3个点
8. 选择 更多工具 - 选择 扩展程序
9. 先检查右上角 开发者模式 是否已打开，没打开的 点击打开
10. 回到上文中的安装包文件 xxx_5.3.4_xxx.crx 按住这个安装包文件不放 拖动到浏览器中
11. 如下图，弹出一个确认安装的提示框，说明安装成功，点击 添加扩展程序 即可
    

如果你也希望插件图标直接显示在浏览器右上角

1. 可以点击右上角的 拼图 图标
2. 找到你希望置顶的插件，点击 图钉 图标

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 lang=\"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",
    "~@": "${workspace}/src"
}

自动导入方法

**前提:**文件jsconfig.json已存在

使用plop创建文件

参考vue-element-admin项目

步骤1.复制vue-element-admin项目,根路径的plopfile.js文件,和plop-templates文件夹,到自己项目中

步骤2.按依赖plop,npm i plop@2.3.0

步骤3.在package.json的script中添加

"new": "plop"

步骤4.通过npm run new执行命令

其他

同步vscode的设置

便捷启动程序

• 步骤1.在项目文件夹创建启动vue-ui.bat
• 步骤2.书写内容

node app

• 步骤3.发送到桌面,双击运行