webpack 取消eslint使用_webpack 取消eslint 校验 - CSDN
精华内容
参与话题
  • vue cli关闭eslint严格语法检查

    万次阅读 2018-06-30 22:56:26
     这篇文章总结了eslint的规则:Eslint规则说明1、关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的。但是有些像缩进、空格、空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了。所以...

    简介eslint

    eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格。 
    官方文档:https://eslint.org 

    这篇文章总结了eslint的规则:Eslint规则说明

    1、关闭eslint校验

    有了eslint的校验,可以来规范开发人员的代码,是挺好的。但是有些像缩进、空格、空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了。所以,我还是会选择关闭eslint校验。 
     
    下面就介绍一下vue项目中如何关闭这个校验。 
    首先我们在创建一个vue项目的时候,会有一个选择:Use ESLint to lint your code? (Y/n),在这一步,我们选择no就好了。 
    但是如果我们不小心选择了Y,在开发过程中一直报错,该怎么办呢?我们不需要删除项目重新创建,我们只要修改build\webpack.base.conf.js这个文件就好啦。 

    上图红框框部分,我项目中的文件内容是这样的,其他项目可能有别的一些内容,我们把框框中的内容注释掉或者去掉就可以了。 


    现在运行项目,就不会报错了。 

    2、最后

    关闭eslint校验就是这么简单,希望对你有帮助。 
    但是eslint可辅助规范代码风格,有效控制代码质量,并且在多人合作的情况下,也可以使代码看起来更加的整洁。所以在开发过程中,还是建议保留eslint的校验的,养成一个好的编码习惯。

    关闭eslint校验

    展开全文
  • 关闭Vue项目中ESlint 语法检测的方法

    千次阅读 2018-08-14 14:06:00
    上个月就被Eslint这个魔鬼般严格的语法检测插件给弄崩了几次,缩进和空格问题太严重了,严重影响了我小脑袋瓜的开发进度,今天终于忍不住要把它给取消掉啦~~ 其实方法很简单,进入你的vue项目中,找到build目录下...

    上个月就被Eslint这个魔鬼般严格的语法检测插件给弄崩了几次,缩进和空格问题太严重了,严重影响了我小脑袋瓜的开发进度,今天终于忍不住要把它给取消掉啦~~

    • 其实方法很简单,进入你的vue项目中,找到build目录下的webpack.base.conf.js 配置文件,如下图所示:
      这里写图片描述
    • 然后找到一段与eslint rules相关的代码,将它注释掉就行啦~我的配置文件中eslint规定的rule代码不在module下的rules里面,是单独声明在module外面的,具体参见下图:
      这里写图片描述
    • 有的朋友如果和我的不一样的话可以尝试去module下的rules里面找找看:
      这里写图片描述
    展开全文
  • vue 关闭vue项目中烦死人的ESlint

    万次阅读 多人点赞 2020-04-19 14:43:09
    【已解决】vue 关闭vue项目中烦死人的ESlint 很多时候,因为一些书写问题,ESlint会报错。

     

    ——问题——

    每次都红我缩进,

    每次都要改,太麻烦了

     

    ——解决——

    最好的办法就是创建项目的时候不要ESlint

     

     

    其他办法

    1.关闭软件webstorm 的ESlint

    file->settings->搜索ESlint->取消Enable的勾选

     

    2.注释掉项目内的ESlint

    项目目录下build.js->webpack.base.conf.js文件里面有段代码  注释掉!!!

     

     

    好了!特别清爽的感觉!

    温馨提示:ctrl+alt+L可以规范webstorm中的格式哦~让那个比教导主任还严的ESlint滚粗

    展开全文
  • vue-vueadmin记录

    千次阅读 2019-09-23 19:14:51
    title: vue-vueadmin记录 categories: Vue tags: [vue, vueadmin, js, 记录] date: 2019-09-06 17:37:10 comments: false vue-vueadmin记录 相关资料 官方资料 GitHub - ...

    title: vue-vueadmin记录
    categories: Vue
    tags: [vue, vueadmin, js, 记录]
    date: 2019-09-06 17:37:10
    comments: false


    vue-vueadmin记录


    相关资料

    • 官方资料
      • GitHub - https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md
      • 中文文档 - https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84
      • 示例 - https://panjiachen.gitee.io/vue-element-admin/#/dashboard
      • vue 文档 - https://cn.vuejs.org/v2/guide/
      • element 文档 - https://element.eleme.io/#/zh-CN/component/layout
      • vuex 文档 - https://vuex.vuejs.org/zh/guide/
    • 手摸手,带你用vue撸后台 系列 (不错) - https://juejin.im/post/59097cd7a22b9d0065fb61d2
    • vue-element-admin 技术栈 - https://learnku.com/articles/20050?order_by=vote_count&

    TODO

    • webpack 打包
    • 全局变量或函数
      • https://blog.csdn.net/qq_30669833/article/details/81706217

    vscode 插件

    • Vuetur
    • vue
    • ESLint

    chrome 插件

    • https://github.com/vuejs/vue-devtools

    安装完后插件栏有个 vue icon 出现, 按 f12 调出调试工具, 顶栏有个 vue 的选项.


    取消 eslint 校验

    官方文档 - https://eslint.org/docs/rules/

    去掉 缩进校验

    参考: https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

    .eslintrc.js 文件中的 'indent': [2, 2, { 修改为 'indent': [0, 0, {

    就可以 4 个空格为缩进

    去掉 单引号 双引号 校验

    参考: https://eslint.org/docs/rules/quotes

    .eslintrc.js 文件中的 'quotes': [2, 'single', 修改为 'quotes': [0, 'single',

    去掉 代码结尾 分号 校验

    参考:

    .eslintrc.js 文件中的 'semi': [2, 'never'], 修改为 'semi': [0, 'never'],

    去掉 no use 校验

    .eslintrc.js 文件中的文件中的 'no-unused-vars': [2, { 修改为 'no-unused-vars': [0, {

    去掉 空行 校验

    .eslintrc.js 文件中的文件中的 'no-multiple-empty-lines': [2, { 'max': 1 修改为 'no-multiple-empty-lines': [2, { 'max': 9999

    去掉 对象构建 最后一个 逗号 校验

    .eslintrc.js 文件中的文件中的 'comma-dangle': [2, 修改为 'comma-dangle': [0,


    生命周期

    • 详解 Vue 生命周期实现 - https://juejin.im/post/5c6d48e36fb9a049eb3c84ff

    查找调用栈

    在 chrome 中按 F12 键, 在 sourcesctrl + shift + F, 查找日志, 然后设置断点.


    环境变量配置

    参考: https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F

    • 配置文件为 .env.xxx

    • 环境变量必须以VUE_APP_为开头。如:VUE_APP_APIVUE_APP_TITLE

      console.log(process.env.VUE_APP_xxxx)
      
    • 修改配置文件后必须重新 npm run dev 才生效


    跨域配置

    • 使用vue-element-admin框架调用后端接口及跨域问题 - https://blog.csdn.net/ywdhzxf/article/details/90518807

    vue.config.js 文件中

        proxy: {
          // change xxx-api/login => mock/login
          // detail: https://cli.vuejs.org/config/#devserver-proxy
          // [process.env.VUE_APP_BASE_API]: {
          //   target: `http://127.0.0.1:${port}/mock`,
          //   changeOrigin: true,
          //   pathRewrite: {
          //     ['^' + process.env.VUE_APP_BASE_API]: ''
          //   }
          // },
          '/hello': {
            target: `http://127.0.0.1:8001`,
            changeOrigin: true
          }
        },
    

    import 别名设置

      configureWebpack: {
        name: name,
        resolve: {
          alias: {
            '@': resolve('src') // 这也是为什么 很多地方 import 有个 @
          }
        }
      },
    

    状态存储 Vuex

    参考: https://vuex.vuejs.org/zh/guide/state.html

    访问数据

    通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到


    Element UI

    • 官方资料
      • https://element.eleme.io/#/zh-CN/component/layout

    页面数据使用

    • vuex 中关于 mapGetters 的作用 - https://www.cnblogs.com/crazycode2/p/7636082.html

    ui 使用多语言

    参考: https://codeday.me/bug/20190430/1010561.html

    main.js 中引入多语言

    import locale from 'element-ui/lib/locale/lang/en'
    
    Vue.use(Element, {
      locale,
      size: Cookies.get('size') || 'medium' // set element-ui default size
    })
    

    自定义组件

    踩坑

    报错: The “MyComponent” component has been registered but not used

    没有使用组件命名不正确

    import MyComponent from './components/MyComponent'
    
    // 使用时的命名必须是 my-component, 不能用驼峰命名, 必须全小写, 用 - 分割. 绑定值也一样
    <my-component :arg1="123" :is-show="isShow" :arg3="'hello'" @on-my-notify="onMyNotify666" />
    
    报错: Syntax Error: SyntaxError: Assigning to rvalue

    参考: https://blog.csdn.net/u014182411/article/details/80071198

    html的模板中 引用的值 如: v-module 绑定的属性并没有在 data 属性中定义

    报错: Attribute ‘fileNameTitle’ must be hyphenated

    参考: https://blog.csdn.net/qq_35366269/article/details/90644180

    • 原因

      出现该错误的原因是组件的属性fileNameTitle使用了驼峰命名法,导致ESLint 检测出语法错误

    • 解决办法:

      将fileNameTitle改为file-name-title即可

      <my-component :arg1="123" :isShow="isShow" :arg3="'hello'" @onMyNotify="onMyNotify666" />
      <!-- 修改为: -->
      <my-component :arg1="123" :is-show="isShow" :arg3="'hello'" @on-my-notify="onMyNotify666" />
      

    组件

    命名方式

    传参 props
      props: {
        dialogStatus: { // 变量
          required: true,
          type: Boolean,
          default: false
        },
        dataArr: { // 数组
          required: true,
          type: Array,
          default: () => []
        },
        userData: { 对象
          required: true,
          type: Object,
          default: () => {}
        },
      },
    

    监听 watch
      watch: {
        dialogStatus(newVal, oldVal) {
          this.isDialogShow = newVal
        },
        userData: {
          immediate: true, // 解决第一次显示页面不生效问题
          handler(newVal, oldVal) {
            this.singleData = deepClone(newVal)
          }
        }
      },
    

    参考报错: [组件赋值 object 第一次不生效问题](#组件赋值 object 第一次不生效问题)


    静态加载

    动态加载
    • Vue动态组件和异步组件 - https://segmentfault.com/a/1190000018018502
    • 官网: 动态组件 & 异步组件 - https://cn.vuejs.org/v2/guide/components-dynamic-async.html

    异步加载
    • Vue中的异步组件 - https://juejin.im/post/5c3c7435e51d4551cd71cf5c
    • 官网: 动态组件 & 异步组件 - https://cn.vuejs.org/v2/guide/components-dynamic-async.html

    父组件控制子组件显示隐藏
    • https://segmentfault.com/q/1010000014179934

    不能同步一个值


    tree

    • https://element.eleme.io/#/zh-CN/component/tree
    自定义唯一 key

    node-key,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。

    半选状态

    this.checkStrictly = false 代码动态设置时, 选中子节点时, 父节点才有半选状态


    mock 服务器

    • https://www.jianshu.com/p/7cbf83eff644

    使用 json 当做临时数据库

    使用 const fs = require('fs') io 本地文件即可

    hot reload 忽略 部分文件监听

    1. 修改 mock-server.js 增加忽略文件

        // watch files, hot reload mock server
        chokidar.watch(mockDir, {
          ignored: /mock-server/,
          ignoreInitial: true
        }).on('all', (event, path) => {
            
        //修改为
        // watch files, hot reload mock server
        chokidar.watch(mockDir, {
          ignored: [/mock-server/, /fakedb/], // 这样 fakedb 目录下的文件就不会被监听
          ignoreInitial: true
        }).on('all', (event, path) => {
      
      • 忽略写法参考: https://github.com/micromatch/anymatch
    2. 重启 mock. done

    踩坑

    在 mock 目录下, 文件变化会导致 hotload 重启服务器

    通常在使用 [使用 json 当做临时数据库](#使用 json 当做临时数据库) 是 io 文件后, 回导致重启服务器, 导致服务器 token 被重置, 解决办法: hot reload 忽略 部分文件监听


    权限验证

    • 权限验证 (静态权限) - https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E9%80%BB%E8%BE%91%E4%BF%AE%E6%94%B9
    • 手摸手,带你用vue撸后台 系列二(登录权限篇) (动态权限) - https://juejin.im/post/591aa14f570c35006961acac

    动态路由

    • 将前端的 路由 丢个后端, 后端鉴权后获取该用户可访问的路由表通过 json 方式发给前段, 前端在转成路由, router.addRoutes(accessRoutes) 的方式动态添加进去.

    运行时 惰性加载 import 问题

    • webpack 打包不能再运行时 import 一个变量, 会报错找不到页面: __webpack_require__("xxx", 只能 import 一个常量值, 所以曲线救国的方式是用一个 map 去映射

      const routerMap = {
          'layout': () => import('@/layout'),
          '~/views/permission/page': () => import('~/views/permission/page'),
          '~/views/permission/directive': () => import('~/views/permission/directive')
      }
      
      item.component = routerMap[item.component] // 正确姿势
      // item.component = () => import(item.component) // 报错, 运行时变量
      
    • 参考

      • vue 异步组件采用参数路径报错 - https://segmentfault.com/q/1010000012485066

    增加页面

    因为 [运行时 惰性加载 import 问题](#运行时 惰性加载 import 问题) 的原因, 所以每次添加页面需要 服务端路由表增加一个 router, 在 客户端 map 映射表增加一个页面映射

    服务器下发路由表 component 值问题

    下发的路由中的 component 字段不要有 @ 字符, 比如 component: '@/views/excel/select-excel', 用 mock 下发时报错, 换别的语言的服务器应该不会有问题,

    vue.config.js 加个别名

    configureWebpack: {
        resolve: {
          alias: {
            '@': resolve('src'),
            '~': path.resolve(__dirname, 'src') // 加的别名
          }
        }
      },
    

    就可以这样下发 json : component: '~/views/excel/select-excel'

    踩坑

    从后台获取路由Map后,前台转route的时候报错

    参考: https://github.com/PanJiaChen/vue-element-admin/issues/2381

    报错: __webpack_require__("xxx"
    vue-router.esm.js:1897 Error: Cannot find module 'function () {
          return Promise.resolve().then(function () {
            return (0, _interopRequireWildcard2.default)(__webpack_require__("./src/router sync recursive ^.*$")
    

    webpack 打包不能再运行时 import 一个变量, 参考: [运行时 惰性加载 import 问题](#运行时 惰性加载 import 问题)

    报错: must be accessed with "$data."

    参考: 从后台获取路由Map后,前台转route的时候报错 - https://github.com/PanJiaChen/vue-element-admin/issues/2381

    将 服务器下发的路由 转换一下


    webpack 打包

    • 构建和发布 - https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html

    部署

    https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84

    # clone the project
    > git clone git@github.com:PanJiaChen/vue-element-admin.git
    
    # enter the project directory
    > cd vue-admin-template
    
    # install dependency
    > npm install
    
    # develop
    > npm run dev
    

    protobuf 接入

    • 如何在前端中使用protobuf(vue篇) - https://www.fengxianqi.com/index.php/archives/129/

    流程

    1. 安装 pb 相关库

      npm install --save protobufjs protobufjs/light
      
    2. 将 xxx.proto 生成为 js 文件

      npx pbjs -t json-module -w commonjs -o src/proto/proto.js  proto/*.proto
      
      • 将此命令加入 package.json, 方便以后生成

          "scripts": {
            "serve": "vue-cli-service serve",
           	...
            "proto": "npx pbjs -t json-module -w commonjs -o src/proto/proto.js  proto/*.proto"
          },
        
    3. a


    js 语法糖

    获取对象中的某个属性

    const response = {
        data: 111,
        name: 222,
    }
    
    const { data } = response // 获取 data 字段
    

    多个 then

    • es6中Promise多个then的使用方法 - https://blog.csdn.net/qq575792372/article/details/83901397

    踩坑

    方法调用参数要一直

    不一致会导致调用不到方法

    请求 400 错误

    可能是请求的参数封装成 json 不对

    request({
        url: ENetCmd.GetPermission,
        method: 'post',
        data: token
        
    // 修改为
    request({
        url: ENetCmd.GetPermission,
        method: 'post',
        data: { token: token, arg1: '666' }
    

    报错: TypeError: undefined is not iterable

    报错: Error in mounted hook: "TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

    一般是由于 路由 为 undefined, 导致 vue 读不到, 所以登出时重置路由不能设为 undefined, 设为一个空数组就ok

    const mutations = {
      CLEAN_ROUTES: () => { // 不能置为 undefined, 否则读不到路由会报错
        state.addRoutes = [] // addRoutes 这个是会被 router.addRoutes(accessRoutes) 进去的
        state.routes = []
      }
    }
    

    使用 el-image 报错: Require self-closing on Vue.js custom components (el-image)

    参考: https://github.com/PanJiaChen/vue-element-admin/issues/2400

    这个组件是 2.9.0 之后才有, vue-element-admin 使用的是 2.7.0, 升级依稀版本就ok

    直接修改 package.json 中的版本 "element-ui": "2.12.0", 在执行命令: npm i

    访问是报错: Invalid Host header

    参考: https://blog.csdn.net/guzhao593/article/details/85918869

    vue.config.js 文件加入 disableHostCheck: true,

    module.exports = {
        devServer: {
            disableHostCheck: true, // 加入这个字段
        }
    }
    

    组件赋值 object 第一次不生效问题

    参考: https://blog.csdn.net/qq_37800886/article/details/82220574

    解决办法: watch 监听写法

      watch: {
        userData(newVal, oldVal) {
          this.singleData = deepClone(newVal)
        }
      },
      
      // 修改为
      watch: {
        userData: {
          immediate: true, // 增加这个 immediate 这个属性可以解决 第一次赋值 object 不生效问题
          handler(newVal, oldVal) {
            this.singleData = deepClone(newVal)
          }
        }
      },
    

    http 请求头 header 上行后变为小写的问题

    参考: https://stackoverflow.com/questions/46200756/header-keys-become-lowercase-when-interacting-with-api-react-native

    根据 RFC 2616, 应该 大小写不敏感

    js map 的 Object.keys 遍历时, number 类型的 key 变为了 string 类型

    Number 转换成功 number 类型

    const permArr = []
    Object.keys(this.appPermMap).forEach(key => {
      permArr.push({
        appId: Number(key), // 这里有个坑, 
        permissionArr: this.appPermMap[key],
      })
    })
    
    展开全文
  • 有的时候在git上clone别人的项目,使用eslint检测,或者接收别人的项目 ,一保存各种eslint警告报错。个人更推荐使用eslint啦,让代码更规范,易维护。如果需要关闭请忽略以上的话,嘻嘻 单文件关闭eslint代码...
  • 如何禁用eslint

    万次阅读 2018-03-11 23:57:12
    小编我最近在学习vue,在搭建项目的过程中偶尔会遇到一下问题,下面我就eslint这个问题聊一下。 首先,我们会采用vue-cli脚手架工具来使用vue会我们提前设置好的模板。在项目初始化过程中会遇到一个问题如下图:它...
  • eslint验证,为我们提升我们的代码质量和良好的编码风格带来了非常大的帮助,但是由于其语法验证的严格,很多程序员在初期使用的时候很不适应,就想怎么能够去掉eslint验证。其实把eslint验证去除的方法并不复杂,...
  • 去除Eslint验证

    千次阅读 2017-11-12 14:37:30
    使用vue-cli脚手架构建了webpack项目时,在开发过程中,Eslint验证过于严谨,会导致运行时出现大量错误,可以使用下面方法去除: 1.打开你生成的项目目录中的bulid—>webpack.base.conf.js删除如下代码: `{test...
  • 如何关闭ESLint,一次成功

    千次阅读 2019-06-06 17:36:27
    ESLint可以用来识别 ECMAScript ,并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。 但是有时候新手会被ESLint的报错阻止程序的运行,这时候我们就想关闭这个ESLint了。 vue项目中...
  • VUE如何关闭Eslint 的方法

    万次阅读 2018-08-26 15:44:30
    最近在家里面创建vue项目的时候,手一抖把Use ESLint to lint your code?(Y/N) 选择了Y,然后到写代码的时候,虽然说是浏览器完全能运行结果,但是在cmd就是一直报错。强迫症没有办法。所以大家安装的时候最好选择N....
  • Vue取消eslint语法限制

    千次阅读 2019-05-09 11:18:37
    我的qq 2038373094 由于ESlint的语法要求太苛刻了,总是报一大堆错误;但是功能是没有影响的,所以最好关闭eslint...在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则 ...
  • 关闭eslint检测

    千次阅读 2018-04-25 16:27:32
    webpack.base.config.js 将createLintingRule方法 内容注释{ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: ...
  • vue项目中关闭eslint的方法

    万次阅读 多人点赞 2020-03-24 10:30:35
    还有说 在webpack.config.js等文件里操作的, 但vue-cli创建出来的项目中根本没有这些玩意。 方法 在项目根目录下增加vue.config.js文件。 内容如下: // vue.config.js module.exports = { lintOnSave: false } ...
  • webpack eslint关闭

    2020-04-27 17:24:00
    找到package.json文件,然后轻松一步搞定
  • 如何关闭eslint检测代码格式报错

    万次阅读 2018-05-16 16:53:37
    小编我最近在学习vue,在搭建项目的过程中偶尔会遇到一下问题,下面我就eslint这个问题聊一下。 首先,我们会采用vue-cli脚手架工具来使用vue会我们提前设置好的模板。在项目初始化过程中会遇到一个问题如下图:它...
  • 我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭。这里有两种方法。1.在搭建vue脚手架时提示是否启用eslint...
  • vue-cli3 取消关闭eslint 校验代码

    万次阅读 2019-04-29 09:51:16
    用了vue-cli3,这个eslint在疯狂的提示我,严重阻碍了我的日常工作(写bug) 选择生成的时候,有一个询问是否把插件配置文件写在package.json文件里,这里我手贱选择了是,现在开始排坑,vue-cli3没有build/webpack....
  • vue-cli是开发vue项目必不可少的脚手架工具,3.0版本之前的目录结构是由config目录的,关于webpack配置的文件都放在该目录里面,而3.0版本之后做了一个大更新,webpack相关的默认配置都帮你集成到webpack的npm 包...
  • cli2去掉eslint 检查器的报错 eslint在编写过程中及其严格,甚至单引号和双引号或者空格注释都会引起报错,导致项目无法正常运行 因此,只需要在build文件夹下,找到webpack.base.conf.js文件 将下面一行代码...
  • 在vue项目中关闭ESLint方法:找到build文件夹---&gt;webpack.base.conf.js----&gt;modulemodule: { rules: [// ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, loader: '...
1 2 3 4 5 ... 20
收藏数 1,078
精华内容 431
关键字:

webpack 取消eslint使用