vue-cli项目中遇到的eslint的坑及解决

在Vue项目中使用ESLint可以规范代码风格，提高代码质量，但有时会遇到一些ESLint的坑。在vue-cli项目中遇到的ESLint的坑及解决方法如下：

1. VS Code使用ESLint插件无法生效

在VS Code中安装并启用了ESLint插件（如ESLint、Vetur），但并不能如预期般发现编写的代码不符合ESLint规范时提示错误信息或警告信息，这时需要配置VS Code的用户设置，具体步骤如下：

首先点击VS Code的“首选项-Prets-Settings”，在打开的json配置文件中添加以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.autoFixOnSave": true
}

这样每次保存文件时就会自动按照eslint的规则进行修复。

另外，在这一步之前需要先全局安装ESLint，具体命令如下：

npm install eslint -g

2. Eslint针对jsx语法的规则不生效

在.vue文件的script标签中，针对jsx语法的ESLint规则不生效，也就是说即使在代码中有违反ESLint规则的jsx语法也不会提示错误信息。这时需要在.eslintrc.js文件中配置parser，设置ESLint使用babel-eslint来解析代码。具体步骤如下：

module.exports = {
  // ...
  parser: 'babel-eslint',
  // ...
}

这样设置就能够使ESLint在校验.vue文件的script标签下的jsx语法时生效了。

示例一：

下面我们看一个示例，代码中有一个未使用的变量a，ESLint会提示错误信息。

const b = 1;

示例二：

下面我们再看一个示例，调用eslint要求使用模板字符串，ESLint会提示警告信息。

let name = 'yoyo';
console.log('My name is ' + name);

在代码中将'My name is ' + name 改成了 My name is ${name} 后，警告信息消失，符合ESLint的要求。

以上就是在vue-cli项目中遇到的ESLint的坑及解决方法的完整攻略。