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. P1067 [NOIP2009 普及组] 多项式输出 题解

    目录 题目 要注意的地方 code 题目 P1067 [NOIP2009 普及组] 多项式输出 要注意的地方 是不是常数项 是不是1 或 -1 输入的是不是第一个 ^1 负数 code #includ ...

  2. MySQL 常用命令(3)------表基本操作

    五.表的基本操作 1.创建表 语法:create table <表名> ( <字段名1> <类型1> [,..<字段名n> <类型n>]); ...

  3. IE 浏览器element-ui table: show-overflow-tooltip 临界值时失效

    问题: 在使用el-table表格时,有时会用到show-overflow-tooltip属性,即当单元格内容不能完全显示时显示tooltip文字提示,并且单元格里的内容显示省略号. 但是在ie浏览器 ...

  4. Vue路由跳转时定位到页面顶部

    代码如下: router.afterEach((to, from, next) => { document.body.scrollTop = 0; document.documentElemen ...

  5. 解决leetcode登录报错

    1.安装leetcode 2.安装成功后会在拓展下面增在如下图标 点开界面如下 [] 3.点击小地球弹出如下弹窗,选择 启用中国版,可以多点击几次,防止没有选中 4.点击圈出的图标 选择第一个 5.输 ...

  6. python调用lua脚本

    目录 lua代码 python代码 lua代码 入口函数是必须要填的 function test1(params) return 'test1:'..params end function test2 ...

  7. 040_Field Set

    Field Set是一组字段.例如,您可以有一个Field Set,其中包含描述用户的名字,中间名,姓氏和业务标题的字段.将Field Set添加到Visualforce页面时,开发人员可以遍历字段并 ...

  8. 「SOL」Hamiltonian Cycle (AtCoder)

    原来一般的四度图也没法快速构造哈密顿回路 QwQ # 题面 给定质数 \(P\) 和正整数 \(a,b\),构造一个长为 \(P\) 的数列 \(G=(g_1,g_2,\dots,g_P)\),满足: ...

  9. 【BOOK】正则表达式

    正则表达式 1. 开源中国-正则表达式测试工具:https://tool.oschina.net/regex/ 2. 匹配规则 3. match() 从字符串起始位置匹配正则表达式 若从起始位置匹配不 ...

  10. python编程中的if __name__ == 'main': 的作用

    python的文件有两种使用的方法,第一是直接作为脚本执行,第二是import到其他的python脚本中被调用(模块重用)执行. 因此if __name__ == 'main': 的作用就是控制这两种 ...