linting react with eslint and atom

linting React with ESLint and Atom

备注

• 视频临时在Vimeo上，正在搬去腾讯云的路上
• 为什么要linting?因为可以减少错误。

一段质量不高的代码

AppView = {

};

module.exports = AppView;

如何一步一步的在Atom上配置好ESLint

1. 在Atom编辑器里面，先装两个基本的Atom插件:

• https://atom.io/packages/linter
• https://github.com/AtomLinter/linter-eslint

2.用npm来安装eslint

npm install eslint --save-dev

3.在根目录下创建eslint的配置文件

./node_modules/.bin/eslint --init
# 选择Use a popular style guide
# 再选择Google
# 再选择JavaScript
# 现在有一个新的文件.eslintrc.js已经创建完毕了

没用linting之前Atom是这样显示的：

用了linting之后Atom是这样显示的：

以下部分仅为支持React/JSX

一段质量不高的React代码

var React = require('react');

var AppView = React.createClass({
  render: function() {
    return (<div>test div</div>)
  },
  getInitialState: function() {
    return {};
  }
});

module.exports = AppView;

4. 为了支持React/JSX，首先需要一个Atom的React插件

• https://atom.io/packages/react

5. 为了支持React/JSX，其次还需要一个ESLint的React插件:

npm install eslint-plugin-react --save-dev

6. 配置ESLint的React插件，.eslintrc.js的全文如下：

module.exports = {
  extends: 'google',
  plugins: [
    'react'
  ],
  ecmaFeatures: {
    jsx: true
  },
  rules: {
    'react/display-name': 1,
    'react/sort-comp': 1
  }
};

不支持React/JSX的时候，Atom是这样显示的：

支持React/JSX的时候之后Atom是这样显示的：

配置好的Repo在这里：

• https://github.com/qianxueseng-com/linting-with-eslint-and-atom

参考文献：

• http://devnull.guru/get-started-with-eslint/
• http://blog.blairvanderhoof.com/post/115912485490/linting-support-for-react-in-atom
• http://pem-musing.blogspot.com/2015/09/configure-eslint-globally-for-meteor-12.html
• http://timhordern.com/react-linting-with-eslint-jest-and-grunt/