更新Vue-cli4与Eslint插件自动保存
Vue-cli更新
此更新为Vue-cli3更新为4,可使用node来查看本机的安装版本,vue -V,此版本(cli4)需要node v8.9 或更高版本 (推荐 v10 以上),查看node版本可使用node -v。
接下来进行更新,因为版本是不支持覆盖的,所以需要先卸载当前版本,使用npm命令npm uninstall vue-cli -g ,完成后进行安装npm install -g @vue/cli 。
当我卸载完安装新版本时,一直提示报错,网上搜索了一下说是安装的
时候网络不是很好,安装一半,因为版本时不支持覆盖的,致使再次安装的时候一直报错,根据网上的方法清除npm
缓存进行再次安装的时候还是报错,又找到另一种方法使用淘宝镜像命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
之后执行安装方法:cnpm install -g @vue/cli
居然安装成功了,在此之前也是试过镜像安装的(cnpm),也是报错。
总之是安装完成了。
Eslint插件自动修复代码:
由于vue/cli3中的方式被4淘汰了,需要重新设置一下:
1.在扩展安装eslint插件;项目安装eslint,在终端使用npm命令:npm install eslint

2.在vscode中使用ctrl+shift+p快捷键,输入:首选项:打开设置(json),

3.将以下代码依照顺序进行写入:
"editor.tabSize": 2,
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"eslint.packageManager": "yarn",
"eslint.validate": [
"javascript", // 用eslint的规则检测js文件
{
"language": "js",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
],
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.run": "onSave",
"files.autoSaveDelay": 3000,
"eslint.codeAction.disableRuleComment": { },
"files.autoSave": "off"
4.
在package.josn里面增加,注意版本号,可能在文件中已存在某个节点,版本号更改即可。
"@vue/cli-plugin-eslint": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^7.0.0",
保存,重启vscode,即可。
实现保存自动修复以上方法,后经试验4步骤版本号不同也可以,可能是和项目创建的方式有关联(猜测),如果
按照方法走完还是不行,欢迎在评论区下方留言,作者看到回复。
更新Vue-cli4与Eslint插件自动保存的更多相关文章
- vscode 中 vue项目使用eslint插件 检查代码
前言 本文章项目由vue-cli3创建 vscode版本1.36.1 eslint1.9.0 在网上找了一大堆文章,不知是什么原因,没有一篇可以直接使用的 折腾了许久,直接按eslint插件的说明,竟 ...
- vue eslint 代码自动格式化
vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格,一不小心就无法运行,使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 V ...
- wordpress自动保存远程图片插件 DX-auto-save-images
wordpress自动保存远程图片插件DX-auto-save-images 解决了保存文章就可以自动将远程图片保存到你的服务器上了. 具体操作步骤如下: 1.安装启用wordpress自动保存远程图 ...
- 关于vscode自动跳转回车的解决方法(关闭vscode自动保存功能;可能和其他插件有冲突)
关于vscode自动跳转回车的解决方法(关闭vscode自动保存功能:可能和其他插件有冲突)
- vue 常用插件,保存
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...
- 【转载】Unity插件研究院之自动保存场景
原文: http://wiki.unity3d.com/index.php?title=AutoSave 最近发现Unity老有自动崩溃的BUG. 每次崩溃的时候由于项目没有保存所以Hierarch ...
- vscode安装eslint插件,代码统一自动修复
ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package. ...
- vscode中eslint插件的配置-prettier
用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个esli ...
- Vue CLI4.0版本正式发布了!一起来看看有哪些新的变化吧
Vue CLI4.0版本正式发布 这个主要的版本更新主要关注底层工具的必要版本更新.更好的默认设置和其他长期维护所需的微调. 我们希望为大多数用户提供平稳的迁移体验. Vue CLI v4提供了对Ni ...
- vscode如何安装eslint插件 代码自动修复
ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package. ...
随机推荐
- 关闭 Microsoft Compatibility Telemetry
Microsoft Compatibility Telemetry可能会导致操作系统(Win10)启动后一直读盘,打开任务管理器可能会看到 Microsoft Compatibility Teleme ...
- DEV GridControl 主从表 (层次表)
DataTable dtData= DbHelperOra.Query(strSql2.ToString()).Tables[0]; //主表 dtusers.TableName = "病人 ...
- 手写JS深拷贝
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 威纶通作为modbusTcp主站应用
1.在威纶通中添加modbus Tcp,作为主机,在Tcp服务器客户端模型中作为客户端: 2.威纶通地址与modbus标准功能码的对应关系: 地址1x_single_Bit,对应02功能码(读输入线圈 ...
- Edge浏览器相关
Ctrl+T 新建页面 Ctrl+W 关闭页面 不可复制的页面,前加read: 若是不可访问 变read://http:// 阅读可翻译,也可有图片字典 还可用插件: 截图软件:Snipaste 微 ...
- 快学起来!python入门自学必看
记得刚开始学python的时候,各种买书各种找资料,最后发现资料找了一大堆,但都是东一块西一块,内容不全且不系统,无意间发现这个宝藏网站,真的是太全了,当作工具书,时不时的翻翻,总会发现一些惊喜.0基 ...
- 全局监控Promise错误
一.问题引入 Promise 在前端中的使用已经非常普遍了,但是许多开发者或许习惯了链式调用却忘了捕获 Promise 的错误了. 例如: function forgetCatchError () { ...
- 类内函数的override问题-方法
Question: have a base class with a virtual function: class Base { public: virtual void Function(); } ...
- 如何运用Vue自定义组件以及组件的传值
Vue自定义组件 引入组件 首先在项目内的components新建.vue文件. 创建完成之后搭建完整的框架.其实就是新建组件,在此之前,需要在VScode中引入一个插件(vue 2 snippets ...
- Git简介及使用
1.Git简介 GIT= 版本控制 + 备份服务器 我们称用来存放上传档案的地方就做Repository.用中文来说,有点像是档案仓库的意思. 不过,通常我们还是使用Repository这个名词.当有 ...