首页 > 其他分享> 文章详细

更新Vue-cli4与Eslint插件自动保存

2021-05-22 22:04:52 阅读：234 来源： 互联网

标签：npm 插件 vue cli cli4 Vue eslint 版本安装

Vue-cli更新

此更新为Vue-cli3更新为4，可使用node来查看本机的安装版本，vue -V,此版本（cli4）需要node v8.9 或更高版本 (推荐 v10 以上),查看node版本可使用node -v。

接下来进行更新，因为版本时不支持覆盖的，所以需要先卸载当前版本，使用npm命令npm uninstall vue-cli -g ，完成后进行安装pm 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"

在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.5.13创建项目方法发出去。

标签：npm,插件,vue,cli,cli4,Vue,eslint,版本,安装
来源： https://www.cnblogs.com/lilt123/p/qfxl_cliupd.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

更新Vue-cli4与Eslint插件自动保存