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插件自动保存的更多相关文章

  1. vscode 中 vue项目使用eslint插件 检查代码

    前言 本文章项目由vue-cli3创建 vscode版本1.36.1 eslint1.9.0 在网上找了一大堆文章,不知是什么原因,没有一篇可以直接使用的 折腾了许久,直接按eslint插件的说明,竟 ...

  2. vue eslint 代码自动格式化

    vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格,一不小心就无法运行,使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 V ...

  3. wordpress自动保存远程图片插件 DX-auto-save-images

    wordpress自动保存远程图片插件DX-auto-save-images 解决了保存文章就可以自动将远程图片保存到你的服务器上了. 具体操作步骤如下: 1.安装启用wordpress自动保存远程图 ...

  4. 关于vscode自动跳转回车的解决方法(关闭vscode自动保存功能;可能和其他插件有冲突)

    关于vscode自动跳转回车的解决方法(关闭vscode自动保存功能:可能和其他插件有冲突)

  5. vue 常用插件,保存

    UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...

  6. 【转载】Unity插件研究院之自动保存场景

    原文: http://wiki.unity3d.com/index.php?title=AutoSave  最近发现Unity老有自动崩溃的BUG. 每次崩溃的时候由于项目没有保存所以Hierarch ...

  7. vscode安装eslint插件,代码统一自动修复

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package. ...

  8. vscode中eslint插件的配置-prettier

    用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个esli ...

  9. Vue CLI4.0版本正式发布了!一起来看看有哪些新的变化吧

    Vue CLI4.0版本正式发布 这个主要的版本更新主要关注底层工具的必要版本更新.更好的默认设置和其他长期维护所需的微调. 我们希望为大多数用户提供平稳的迁移体验. Vue CLI v4提供了对Ni ...

  10. vscode如何安装eslint插件 代码自动修复

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package. ...

随机推荐

  1. 【ZYNQ学习】如何使用ZYNQ

    本篇博客建立一套ZYNQ系统开发的一般方法和流程,并对ZYNQ的硬件和软件的设计流程进行概述 设计工具: vivado IDE:创建SoC设计中的硬件系统部分,同时和设计套件中的其他工具有交互,包含集 ...

  2. 微信小程序 底部导航和广告轮播图3D实现

    底部导航   在app.json中 "tabBar": { "list": [ { "pagePath": "pages/inde ...

  3. 管理名称空间资源(Kubernetes)

    管理名称空间资源 名称空间(Namespace)是Kubernetes集群级别的资源,用于将集群分隔为多个隔离的逻辑分区以配置给不同的用户.租户.环境或项目使用.例如,可以为development.q ...

  4. Study python_01

    Python历史事件 1989 年 --- 荷兰人吉多·范罗苏姆决心开发一个新的脚本解释程序: 1991 年 --- 第一个用C语言实现的Python编译器诞生,Python 的代码对外公布,版本为 ...

  5. 用Python中的hashlib实现md5和sha加密

    文章目录 一.用 pandas 读取 Excel 数据 二.加密库 hashlib 三. pandas中的 map() 方法 四.数据加密工具 本文分享知识: pandas读取Excel数据 read ...

  6. 简体Windows系统登录玩新枫之谷方法

    2022-2-23  游戏更新后Locale.Emulato失效,64位游戏使用新的工具Locale_Remulator,请自行到GitHub上搜索下载,使用方法与Locale.Emulato类似. ...

  7. vscode python可以运行,无法debug

    参考:https://blog.csdn.net/weixin_44646187/article/details/125810974 提示'cmd' 不是内部或外部命令,也不是可运行的程序 或批处理文 ...

  8. 20220305认证第1题 leetcode 1385. 两个数组间的距离值

    给你两个整数数组 arr1 , arr2 和一个整数 d ,请你返回两个数组之间的 距离值 . 「距离值」 定义为符合此距离要求的元素数目:对于元素 arr1[i] ,不存在任何元素 arr2[j]  ...

  9. windows elasticsearch 7.9.3安装

    1.JDK,我用的是OPEN JDK https://jdk.java.net/    通过CMD设定java环境变量设置    set java_home=C:\Program Files\java ...

  10. redis字段使用说明

    Set(集合)增删改查: #删除当前选择数据库中的所有key127.0.0.1:6379> flushdbOK#生成set集合,添加4个数据127.0.0.1:6379> sadd set ...