vue-cli的eslint相关用法

ESLint简介

关于ESLint的介绍网上很多，这里就简单说些有用的。

ESLint的作用是检查代码错误和统一代码风格的。由于每个人写代码的习惯都会有所不同，所以统一代码风格在团队协作中尤为重要。

vue-cli的eslint相关

vue-cli在init初始化时会询问是否需要添加ESLint，确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。

.eslintrc.js

// http://eslint.org/docs/user-guide/configuringmodule.exports = { root: true, parser: 'babel-eslint', parserOptions: {  sourceType: 'module' }, env: {  browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 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-star-spacing': 0,  // allow debugger during development  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 }}

解析器(parser)：使用了babel-eslint，这个可以在package.json中找到，说明我们已经安装过该解析器了。

环境配置(env)：在浏览器中使用eslint。

继承(extends)：该配置文件继承了standard规则，具体规则自己看文档，看不懂有中文版的。

规则(rules)：对于三个自定义规则，我特地查了官方文档。

注意：在rules中每个配置项后面第一个值是eslint规则的错误等级。

* “off” 或 0 - 关闭这条规则
* “warn” 或 1 - 违反规则会警告（不会影响项目运行）
* “error” 或 2 - 违反规则会报错（屏幕上一堆错误代码~）

遇到过的问题

由于一开始我不了解ESLint就写项目，不知道要看Standard的文档，所以遇到了很多ESLint的错误和警告，分享下希望能对朋友们有帮助。

1. Do not use ‘new' for side effects

该错误是由于我删除了/* eslint-disable no-new*/这段注释引发的，/* eslint-disable */这段注释的作用就是不让eslint检查注释下面的代码。

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

错误原因：不可以直接new一个新对象，需要将新对象赋值给一个变量。