eslint - 问题汇总

[official_dulin]

eslint规则检查js语法出现的问题，对提升代码质量，具有重要参考意义。

一、react使用SFC时，eslint报[eslint] Component definition is missing display name (react/display-name)

匿名函数的SFC，eslint会报错

解决：改写为有名函数

二、使用es6类属性时，eslint报Parsing error: Unexpected token =

解决：安装babel-eslint，设置eslint的parser为babel-eslint.

https://github.com/babel/babel-eslint

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "experimentalObjectRestSpread": true
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended"
  ],
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  }
}

参考链接：
babel/babel-eslint#312
https://github.com/babel/babel-eslint#why-use-babel-eslint

三、[eslint] Expected parentheses around arrow function argument having a body with curly braces. (arrow-parens)

es6箭头函数参数期望有小括号()包围。

fs.rename(oldPath, newPath, err => {
  console.log(err);
});

修改为：

fs.rename(oldPath, newPath, (err) => {
  console.log(err);
});

四、[eslint] Split 'var' declarations into multiple statements. (one-var)

期望一行一个var来声明一个变量，而不是用一个var来声明多个变量。

var oldPathSync = path.normalize('./fs.renametest'),
  newPathSync = path.normalize('./renameTest.txt');

修改为：

var oldPathSync = path.normalize('./fs.renametest');
var newPathSync = path.normalize('./renameTest.txt');

五、[eslint] Expected exception block, space or tab after '//' in comment. (spaced-comment)

期望在注释符//后面有一个空格(space)或制表符(tab).

//同步

修改为：

// 同步

六、[eslint] Missing trailing comma. (comma-dangle)

期望对象键值对和数组最后一个元素后带逗号。
https://eslint.org/docs/rules/comma-dangle

七、[eslint] Unary operator '++' used. (no-plusplus)

建议不使用一元运算符，如'++', '--'
https://eslint.org/docs/rules/no-plusplus

八、[eslint] Unexpected string concatenation. (prefer-template)

建议使用es6的模版字符串语法，而不是字符串拼接.
https://eslint.org/docs/rules/prefer-template

console.log('Create worker. pid: ' + worker.process.pid);

修改为：

console.log(`Create worker. pid: ${worker.process.pid}`);

九、 [eslint] Unexpected require(). (global-require)

期望require的调用在模块作用域的顶层。
https://eslint.org/docs/rules/global-require

if (cluster.isMaster) {
  require('os')
    .cpus()
    .forEach(() => {
      startWorker();
    });
} else {
  require('./server')();
}

修改为：

const os = require('os');
const startServer = require('./server');

if (cluster.isMaster) {
  os.cpus().forEach(() => {
    startWorker();
  });
} else {
  startServer();
}

十、[eslint] Unexpected lexical declaration in case block. (no-case-declarations)

不允许在switch...case...的case语句块中进行词法声明（使用let, const, function和class）
https://eslint.org/docs/rules/no-case-declarations

switch (app.get('env')) {
  case 'development':
    app.use(morgan('dev'));
    break;
  case 'production':
    const logDirectory = path.join(__dirname, 'log');
    const accessLogStream = rfs('access.log', {
      interval: '1d', // rotate daily
      path: logDirectory
    });
    if (!fs.existsSync(logDirectory)) {
      fs.mkdirSync(logDirectory);
    }
    app.use(morgan('combined', { stream: accessLogStream }));
    break;
  default:
    break;
}

修改为：

const logDirectory = path.join(__dirname, 'log');
const accessLogStream = rfs('access.log', {
  interval: '1d', // rotate daily
  path: logDirectory
});

switch (app.get('env')) {
  case 'development':
    app.use(morgan('dev'));
    break;
  case 'production':
    if (!fs.existsSync(logDirectory)) {
      fs.mkdirSync(logDirectory);
    }
    app.use(morgan('combined', { stream: accessLogStream }));
    break;
  default:
    break;
}

十一、[eslint] Expected literal to be on the right side of ===. (yoda)

尤达条件如此命名，因为条件的字面值首先出现
https://eslint.org/docs/2.0.0/rules/yoda

if ('/' === req.url) {
   //...
}

修改为

if (req.url === '/') {
   //...
}