首页 Vue正文

Vue项目使用eslint

景先 Vue 2019-09-12 292 0

vue项目使用eslint

基于vue-cli3新生成的项目已集成。

工作流程

每次进行git commit的时候会进行npm run lint {提交的文件} --fix,如果lint没通过,则无法进行提交。

规则使用airbnb

配置

仅对于以前vue-cli3生成的项目。

eslint autofix

开发当中如果编写的代码不符合eslint规则,在保存时会自动修复为符合规则的代码,效果如下:

以前生成的项目,因为官方依赖@vue/cli-plugin-eslint的问题,导致autofix无效(新生成的项目自动为最新版本的官方依赖,已解决此问题)。此处进行更新即可。

npm i -D @vue/cli-plugin-eslint

配置eslint

安装eslint-config-airbnb,并移除eslint-config-prettier

npm i -D @vue/eslint-config-airbnb && npm uninstall @vue/eslint-config-prettier

并将如下配置覆盖package.json中的eslintConfig配置:

"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "@vue/airbnb"
  ],
  "rules": {
    "no-console": "off",
    "import/extensions": "off",
    "import/no-dynamic-require": "off",
    "import/no-unresolved": "off",
    "import/no-cycle": "off",
    "global-require": "off",
    "no-alert": "off",
    "max-len": "off",
    "no-restricted-globals": "off",
    "no-unused-vars": "warn",
    "consistent-return": "off",
    "prefer-promise-reject-errors": "off",
    "no-param-reassign": "off",
    "no-shadow": "off",
    "no-lonely-if": "off"
  },
  "parserOptions": {
    "parser": "babel-eslint"
  }
},

配置stylelint

安装stylelint和配置stylelint-config-standard

安装webpack插件stylelint-webpack-plugin

npm i -D stylelint stylelint-config-standard stylelint-webpack-plugin

修改vue.config.js,增加配置:

module.exports = {
  ...
  configureWebpack: {
    plugins: [
      new TimeFixPlugin(),// eslint-disable-line
      new require('stylelint-webpack-plugin')({// eslint-disable-line
        files: ['src/**/*.{vue,css,less,scss,sass}'],
        fix: true,
      }),
    ]
  },
  ...
}

// 防止stylelint触发webpack编译二次
/* eslint-disable */
function TimeFixPlugin() {
  this.apply = function (compiler) {
    const timefix = 11000;
    const watching = {};
    const onWatchRun = function (c, callback) {
      watching.startTime += timefix;
      callback && callback();
    };
    const onDone = function (stats, callback) {
      stats.startTime += timefix;
      callback && callback();
    };

    compiler.hooks.watchRun.tapAsync('TimeFixPlugin', onWatchRun);
    compiler.hooks.done.tapAsync('TimeFixPlugin', onDone);
  }
}

package.json中增加配置:

"stylelint": {
  "extends": [
    "stylelint-config-standard"
  ],
  "rules": {
    "no-duplicate-selectors": null,
    "max-empty-lines": null,
    "font-family-no-missing-generic-family-keyword": null,
    "no-descending-specificity": null,
    "at-rule-no-unknown": [true, {
      "ignoreAtRules": [
        "mixin", "extend", "content", "if", "else", "include"
      ]
    }]
  }
},

配置hooks

安装huskylint-staged

npm i -D husky lint-staged

package.json中添加如下配置即可。

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,vue}": ["npm run lint", "git add"]
},

配置成功后,每次进行commit操作都会先lint提交的文件,如果有error,则提交失败,效果如下:

其它

eslint rules

eslint rules中文版

Airbnb JavaScript Style Guide

Airbnb JavaScript Style Guide中文版

eslint-plugin-import

stylelint rules

stylelint rules中文版

stylelint-config-standard

忽略单行检查

const a = 1;
const b = {}; // eslint-disable-line
const c = true;

忽略某条规则

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
});

忽略多行检查

/* eslint-disable *//* eslint-enable */ 组合使用。

/* eslint-disable */
const myCar = new Object();
myCar.make = 'Ford';
myCar.model = 'Mustang';
myCar.year = 1969;
/* eslint-enable */

忽略整个文件

/* eslint-disable */
import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});

以下代码全部忽略

import Vue from 'vue';
import App from './App';
import router from './router';
/* eslint-disable */
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论