关于Vue-cli3烦人的eslint问题

目录
  • Vue-cli3烦人的eslint
    • - 如果选择了是
    • - 如果选择了否
  • Vue-cli3的eslint报错
    • 解决方法

Vue-cli3烦人的eslint

在vue-cli选择生成的时候，有一个询问是否把插件配置文件写在package.json文件里

- 如果选择了是

打开package.json 就会有以下一段代码

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"  // 删掉这行
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

- 如果选择了否

此时根目录下会生成 .eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential","@vue/prettier"], // 删掉 "@vue/prettier"
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint",
  }
};

之后重启就可以了 npm run serve

Vue-cli3的eslint报错

今天用vue-cli3搭建项目，写了几个页面，去编译的时候eslint都会抛出错误

原因就是在项目搭建的时候选择的是standard（正常模式）所以每次启动项目的之后都会对代码进行检查，是否符合Eslint规范。

解决方法

想要关闭Eslint语法检查只要在.eslintrc.js文件中找到’@vue/standard’配置将其注释或者删除即可。

总结：ESLint 是一个语法规则和代码风格的检查工具，用来保证写出语法正确、风格统一的代码，这个比较适合团队开发和对代码已经轻车熟路的大神使用，我现在还不行。最后我认为大家还有我都会成为一个不惧怕Eslint的大神的

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli3启动服务如何自动打开浏览器配置

    vue-cli3启动服务如何自动打开浏览器配置

    目录 vue-cli3启动服务自动打开浏览器配置 vue-cli自动打开默认浏览器0.0.0:8080 vue-cli3启动服务自动打开浏览器配置 1.首先创建一个vue-cli3项目. 2.找到package.json文件 3.找到配置项‘scripts’ 4.找到配置项‘serve’ 5.修改下,加个字段 “serve”: “vue-cli-service serve --open” 如果不想每次默认打开浏览器还可以将上图中的 --open,替换成 --copy (将本地 URL 复制到剪切

  • vue-cli3 取消eslint校验代码的解决办法

    在网上找了各种办法都没解决,看了下文档就解决了关闭vue-cli3.0 报错:eslint-disable-next-line to ignore the next line. 注意我这里是VUE3.0 解决方法: 找到文件vue.config.js (备注我这里是vue-cli3.0)打开文件 修改lintOnSave 为false,如果没有就添加lintOnSave 为false 下图: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • vue-cli3项目在IE浏览器打开兼容问题及解决

    目录 vue-cli3在IE浏览器打开兼容问题 问题描述 方案 vue-cli 在IE下兼容设置 解决办法如下 vue-cli3在IE浏览器打开兼容问题 问题描述 vue打包的项目在ie浏览器上,不能打开.找了一天的解决方案,解决一个又报一个兼容错误,一步一坑一步一填,终于解决了问题

  • vue-cli3项目配置eslint代码规范的完整步骤

    前言 最近接手了一个项目,由于之前为了快速开发,没有做代码检查.为了使得代码更加规范以及更易读,所以就要eslint上场了. 安装依赖 安装依赖有两种方法: 在cmd中打上把相应的依赖加到devDependencies下,再npm install对应依赖. 在package.json文件加上相应依赖: "eslint-plugin-html": "^6.0.3", "@vue/cli-plugin-eslint": "^3.3.0&qu

  • 关于Vue-cli3烦人的eslint问题

    目录 Vue-cli3烦人的eslint - 如果选择了是 - 如果选择了否 Vue-cli3的eslint报错 解决方法 Vue-cli3烦人的eslint 在vue-cli选择生成的时候,有一个询问是否把插件配置文件写在package.json文件里 - 如果选择了是 打开package.json 就会有以下一段代码 "eslintConfig": { "root": true, "env": { "node": true

  • Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

    1.准备工作. 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本,我测试用的是macOS,所以下载了第二个压缩包 ​ 下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称. /Users/{电脑名称}/Library ,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下

  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈 如何通过新版脚手架创建项目,这里就不提了

  • Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

  • Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

    今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render: h =>

  • 浅析vue cli3 封装Svgicon组件正确姿势(推荐)

    vue cli3 手把手教学封装Svgicon组件 第一步:在src文件下新建一个放置svg文件的文件夹 第二步:在components文件下新建一个Svg组件 这是一个 文件夹 专门用来存放项目里面需要使用的svg文件,比如 a.svg b.svg - svg组件源码 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconNam

  • 解决vue cli3使用axios跨域问题

    解决vue cli3使用axios跨域问题

    目录 一.什么是跨域 1.跨域 2.同源策略 3.跨域问题怎么出现的 二.使用 axios 演示并解决跨域问题(vue-cli3.0) 1.项目创建.与 axios 的使用 2.跨域问题重现 3.解决跨域问题 一.什么是跨域 1.跨域 指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 2.同源策略 是指协议,域名,端口都要相同,其中有一个不同都会产生跨域,在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 3.跨域问题怎么出

  • vue cli3 配置 stylus全局变量的使用方式

    目录 vue cli3配置stylus全局变量 vue cli3使用stylus全局变量 vue cli3配置stylus全局变量 首先在common.styl文件中写一些常用的css变量,方便全局使用,避免重复代码. 预想的是在main.js中引入common.styl文件,然后所有的.vue文件就都可以使用了.但是事与愿违,根本不起作用. 网络上有很多教程,但是都不起作用(找答案是个痛苦且漫长的过程),下面是总结的代码,基本开箱即用,希望能帮助到需要帮助的人. // vue.config.j

  • Vue CLI3 如何支持less的方法示例

    本文介绍了Vue CLI3 如何支持less的方法示例,分享给大家,具体如下: 安装方式: npm install less less-loader --save 或者 cnpm install less less-loader --save 大家在编写 .vue 文件的 style 的时候多会选择采用预编译样式来加速开发效率 <style lang="less"> #app { font-family: 'Avenir', Helvetica, Arial, sans-s

  • Vue CLI3 开启gzip压缩文件的方式

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz

随机推荐