linting react with eslint and atom - qianxueseng-com/guides GitHub Wiki

linting React with ESLint and Atom

备注

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

一段质量不高的代码

AppView = {

};

module.exports = AppView;

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

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

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_js_before

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

linting_js_after

以下部分仅为支持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插件

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是这样显示的:

linting_jsx_after

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

linting_jsx_after_react_support

配置好的Repo在这里:

参考文献:

⚠️ **GitHub.com Fallback** ⚠️