概述

使用Create-React-App腳手架感覺它的eslint配置有點好用，於是考慮不用Create-React-App腳手架該怎麽使用這些配置。

我於是eject了Create-React-App腳手架，查看它的詳細配置和官方文檔，總結了使用它的eslint配置的方法，記錄如下，供以後開發時參考，相信對其它人也有用。

配置

(1)首先安裝依賴：

npm install eslint --save-dev
npm install babel-eslint --save-dev
npm install eslint-plugin-flowtype --save-dev
npm install eslint-plugin-jsx-a11y --save-dev
 

(2)然後配置package.json文件。(不需要配置.eslintrc.js文件，詳見Eslint Configuring文檔)

"eslintConfig": {
  "parser": "babel-eslint",
  "extends": [
    "plugin:flowtype/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": [
    "flowtype",
    "jsx-a11y"
  ]
}
 

(3)在主目錄下面輸入eslint + 文件名即可。比如eslint test.js。

測試是否生效

測試內容如下，如果有5個報錯，那麽證明是生效的。

type X = bool
// Message: Use "boolean", not "bool"

// Options: ["boolean"]
type X = bool
// Message: Use "boolean", not "bool"

// Options: ["bool"]
type X = boolean
// Message: Use "bool", not "boolean"
 

感想

以前用eslint的時候感覺每次要配置.eslintrc.js文件超級麻煩，現在才發現可以直接在package.json配置，真的很方便。

Create-React-App項目外使用它的eslint配置