怎样在vue项目下添加ESLint的方法

 更新时间:2019年05月16日 09:19:18   作者:雯子  
这篇文章主要介绍了怎样在vue项目下添加ESLint的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

简易搭建

ESLint官网网址

ESLint中文官网

如果你是想在自己的项目里搭建ESLint,就可以按照官网的指示,

以全局安装举例,

npm install -g eslint

然后初始化

eslint --init

它会问你一些问题,你可以按照你的喜好进行配置,我选的是popular下面的standard,生成的文件是js格式,那么就会创建出eslintrc.js文件:

module.exports = {
"extends": "standard"
};

然后就可以简单的lint某个文件了:

$ eslint yourfile.js

在vue的项目里新添加ESLint

有的时候,早期的时候,我们建立vue项目的时候,可能图简便,并没有初始化ESLint、单元测试等等模块,那么就需要后添加进去。

如果是现在新建一个项目,通过vue-cli的问答就可以轻松初始化ESLint的配置。

这里说一下怎样在老项目里新添加ESLint。

首先,我先用vue-cli创建了一个新项目,在初始化的时候,选择安装eslint,

选择standard规则,然后就生成了eslintrc.js,把生成的这个文件拷贝到要加ESlint的老项目里。

// https://eslint.org/docs/user-guide/configuring
module.exports = {
 //默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。如果你想要你所有项目都遵循一个特定的约定时,这将会很有用,但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目,在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
  sourceType: 'module'
 },
 env: {
  browser: true,
 },
 // https://github.com/standard/standard/blob/master/docs/RULES-en.md
 extends: 'standard',
 // required to lint *.vue files
 plugins: [
  'html'
 ],
 // add your custom rules here
 'rules': {
  // allow paren-less arrow functions 要求箭头函数的参数使用圆括号
  'arrow-parens': 0,
  // allow async-await 强制 generator 函数中 * 号周围使用一致的空格
  'generator-star-spacing': 0,
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 }
}

然后找到package.json,把ESLint相关的依赖加进去(也可以一个一个进行安装,或者有更好的办法。。)

 "babel-eslint": "^7.1.1",  "eslint": "^3.19.0",

  "eslint-friendly-formatter": "^3.0.0",
  "eslint-loader": "^1.7.1",
  "eslint-plugin-html": "^3.0.0",
  "eslint-config-standard": "^10.2.1",
  "eslint-plugin-promise": "^3.4.0",
  "eslint-plugin-standard": "^3.0.1",
  "eslint-plugin-import": "^2.7.0",
  "eslint-plugin-node": "^5.2.0", 

然后在webpack.base.conf.js的rules里添加

 {
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
     formatter: require('eslint-friendly-formatter')
    }
   },

npm install一下,应该就可以了。

这里的编辑器推荐用vscode,可以非常智能的显示出哪里出错,方便修改。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 使用vuex的state状态对象的5种方式

    使用vuex的state状态对象的5种方式

    本文给大家介绍了使用vuex的state状态对象的5种方式,给大家贴出了我的vuex的结构,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-04-04
  • 通过Element ui往页面上加一个分页导航条的方法

    通过Element ui往页面上加一个分页导航条的方法

    这篇文章主要介绍了通过Element ui往页面上加一个分页导航条的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Vue源码makeMap函数深入分析

    Vue源码makeMap函数深入分析

    vue源码中的makeMap用在很多地方,主要是判断标签是原生标签还是用户自定义的组件,但是标签很多,如果每判断一次都执行一次循环,累计下来,性能损耗还是很大的,makeMap就是解决这个问题出现的
    2022-08-08
  • Ant Design Vue 添加区分中英文的长度校验功能

    Ant Design Vue 添加区分中英文的长度校验功能

    这篇文章主要介绍了Ant Design Vue 添加区分中英文的长度校验功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下功能,
    2020-01-01
  • vue-cli与webpack处理静态资源的方法及webpack打包的坑

    vue-cli与webpack处理静态资源的方法及webpack打包的坑

    这篇文章主要介绍了vue-cli与webpack处理静态资源的方法,需要的朋友可以参考下
    2018-05-05
  • Vue CLI 3.x 自动部署项目至服务器的方法

    Vue CLI 3.x 自动部署项目至服务器的方法

    本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx。非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-04-04
  • swiper/vue 获取 swiper实例方法详解

    swiper/vue 获取 swiper实例方法详解

    在网上搜了一下如何调用swiper实例,大部分都是通过 swiperRef = new Swiper(‘.swiper’, options) 这种方法初始化swiper,然后直接能用 swiperRef 实例,这篇文章主要介绍了swiper/vue 获取 swiper实例方法详解,需要的朋友可以参考下
    2023-12-12
  • Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

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

    这篇文章主要介绍了Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue项目中使用qrcodesjs2生成二维码简单示例

    vue项目中使用qrcodesjs2生成二维码简单示例

    最近项目中需生成二维码,发现了很好用的插件qrcodesjs2,所以下面这篇文章主要给大家介绍了关于vue项目中使用qrcodesjs2生成二维码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vuex中this.$store.commit()和this.$store.dispatch()区别说明

    Vuex中this.$store.commit()和this.$store.dispatch()区别说明

    这篇文章主要介绍了Vuex中this.$store.commit()和this.$store.dispatch()区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论