更新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. ...
随机推荐
- python flatten()函数的作用和用法
flatten()函数可以执行展平操作,返回一个一维数组. 函数的作用对象是数组array.矩阵mat,不能直接用于列表list. x.flatten()是把numpy对象x降低到一维,默认是按照 行 ...
- ListView,ScrollView,RecyclerView上下滑动监听
在项目中有这样需求要对ListView或ScrollView或RecyclerView滚动进行监听,来做一些处理,下面来看对应实现 一:Listview上下滑动监听 通过实现AbsListView.O ...
- Android 内存优化浅析
一:内存占用几大要点 1,Object Cache:Image cache,single instance obj(重量级别,例如数据库连接obj,bitmap ref),Thread过多, 2,Vi ...
- Chrome(谷歌浏览器)安装Vue插件vue-devtools
安装步骤如下:1.首先给大家提供一个git地址,虽然官网也有地址(https://github.com/vuejs/vue-devtools.git),我认为不太好用给大家提供另一个git地址: ht ...
- 洛谷P4342 [IOI1998]Polygon
题目 https://www.luogu.com.cn/problem/P4342 我会做IOI题辣 思路 算法设计与分析的课堂例题. 首先这是一个环状DP,那么根据老套路,破环成链.发现要求的东西也 ...
- 在centons7系统部署一套单master的k8s集群
架构图: 操作系统:CentOS Linux release 7.7.1908 (Core) docker:docker-ce-20.10.14-3.el7.x86_64 kubernetes: 1. ...
- php 虚拟化 linux 入侵检测交作业 不要太nice
#inclide<iostream> using namespace std; int main() { cout<<"暂时自闭一会er"; }
- Asp.Net Core中使用日志组件log4net
我们在开发任何项目过程中,记录各种日志是太正常不过的事情.没有日志记录的项目,也不可能放心进入生产环境运行.因此日志的记录,是必须要做的. 在.NET开发中,log4net是个常用的日志组件.本文简单 ...
- kubernetes 部署 flannel 网络插件
flannel 的yaml文件 官方网址: https://kubernetes.io/docs/concepts/cluster-administration/addons/ 第一种下载方式:yam ...
- SSH的密钥登录配置
1.ssh的登录方法. 两种方法: (1)linux系统connect to linux ssh -l root 192.168.2.191 #直接登录. 语法:$ssh -p 22 user@hos ...