脚本宝典收集整理的这篇文章主要介绍了

vuecli结合eslint静态检查

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

vuecli结合eslint静态检查

搭建vue项目开发可能选择vue-cli项目脚手架快速创建vue项目。(https://github.com/vuejs/vue-...

安装vue-cli

npm install -g vue-cli

这种方式安装比较慢,可以用国内淘宝镜像安装,cnpm,安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

继续安装

cnpm install -g vue-cli

vue-cli脚手架自带webpack打包工具,创建一个基于webpack模板的新项目

vue init webpack my-project

这里需要进行一些配置,默认回车即可


This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

## 配置esLint ##

eslint配置方式主要有两种:

  1. 注释配置:使用js注释来直接嵌入ESlint配置信息到一个文件里
  2. 配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息。这些配置可以写成一个文件名.eslintrc.*的文件或者package.json文件里的eslintConfig项里
    这两种方式ESlint都会自动寻找然后读取,也可以直接在命令行内指定一个配置文件。

一般需要我们去配置项包括:

  1. 环境:你的脚本会在哪种环境下运行。每个环境带来了一组特定的预定义的全局变量。
  2. 全局变量:脚本运行期间会访问额外的全局变量。
  3. 规则:使用那些规则,并且规则的等级是多少。

vue-cli脚手架安装完成后,主要有几个地方配置了eslint。

1,项目创建后项目中就会出现.eslintignore 和.eslintrc.js两个文件

.eslintignore类似Git的.gitignore用来配置不需要Eslint检查的文件
.eslintrc.js主要用来配置具体规则

.eslintignore文件

添加不启动静态检查的文件

build/*.js // 忽略build文件夹下所有的脚本文件
config/*.js

.eslintrc.js文件

// https://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parser: 'babel-eslint', // 解析器为babel-eslint,可在package.json文件中配置
  parserOptions: {
    sourceType: 'module'
  },
  env: { //环境配置为浏览器
    browser: true,
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: 'standard', //文件配置继承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-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

说明: 在rules中每个配置项后面的第一个值为eslint规则的错误等级

  • "off" 或 0 (关闭这条规则)
  • "warn" 或 1 (违反规则会警告,不影响项目运行)
  • "error" 或 2 (违反规则会报错,终止项目运行)

2 在package.json文件中配置文件


"script" : {
    "lint": "eslint --ext .js, .vue src"
}
"devDenpendencies" : {
    "babel-eslint": "^7.1.1",
    // 更多eslint文件
    ...
}

#### 3 在webpack配置文件中 ####

webpack.base.conf.js

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

有时候代码里有些特殊情况需要我们在某一行或者某几行关闭ESLint检测,可以使用注释:

1,注释关闭所有规则

/* eslint-disable */
alert('foo');
/* eslint-enable */

2,关闭某一行的所有规则

alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');

3,在某一行关闭指定的规则

alert('foo'); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
alert('foo');

常用规则:
规则的细节请到ESLint官方网站查看 http://eslint.org/docs/rules/

总结

以上是脚本宝典为你收集整理的

vuecli结合eslint静态检查

全部内容,希望文章能够帮你解决

vuecli结合eslint静态检查

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过