react-starter-kit 學習之eslint 規則

react-start-kit 是一個全棧的開發模板。前端配置了webpack + react 後端配置 express + sqlite + graphql 等，看到react-starter-kit過程當中有不少坑。須要一個一個的走過。記錄本身學習的歷程，在開發過程當中仍是須要eslint，這是自我對代碼風格的一種規範。

react-starter-kit 的目錄結構

如上圖，配置了不少開發過程當中須要的配置文件。

學習.eslintrc.js

以下圖查看源碼:

/**
 * React Starter Kit (https://www.reactstarterkit.com/)
 *
 * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

// ESLint configuration
// http://eslint.org/docs/user-guide/configuring
module.exports = {
  parser: 'babel-eslint', // 解析引擎使用babel-eslint

  extends: [
    'airbnb',
    'plugin:flowtype/recommended',
    'plugin:css-modules/recommended',
    'prettier',
    'prettier/flowtype',
    'prettier/react'
  ],  // 這裏配置繼承規則

  plugins: ['flowtype', 'css-modules', 'prettier'], // 這裏配置了eslint 插件，在package.json 中能夠查看到eslint-plugin-xxx 等等插件

  globals: {
    __DEV__: true
  }, // __DEV__ 全局變量開啓

  env: {
    browser: true
  }, // 配置當前規則環境爲瀏覽器環境

  rules: {
    // Forbid the use of extraneous packages
    // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md
    'import/no-extraneous-dependencies': ['error', {packageDir: '.'}], // 本條規則爲了防止使用import xxx from 'xxx' 然而並無使用會報錯

    // Recommend not to leave any console.log in your code
    // Use console.error, console.warn and console.info instead
    // https://eslint.org/docs/rules/no-console
    'no-console': [
      'error',
      {
        allow: ['warn', 'error', 'info']
      }
    ], // 禁止使用console.log，不然報錯，可是能夠使用console.info console.warn console.error

    // Prefer destructuring from arrays and objects
    // http://eslint.org/docs/rules/prefer-destructuring
    'prefer-destructuring': [
      'error',
      {
        VariableDeclarator: {  // 開啓了變量解構賦值
          array: true,
          object: true
        },
        AssignmentExpression: { // 開啓了參數的結構賦值
          array: true,
          object: true
        }
      },
      {
        enforceForRenamedProperties: false // 能夠賦值更改變量 e.g: const {bar: foo} = { bar: 1, food: 3} 將變量的值修改變量名爲foo
      }
    ], // 這條規則我修改過，主要是es6的解構賦值

    // Ensure <a> tags are valid
    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
    'jsx-a11y/anchor-is-valid': [
      'error',
      {
        components: ['Link'],
        specialLink: ['to'],
        aspects: ['noHref', 'invalidHref', 'preferButton']
      }
    ], // 這條規則主要是讓錨點有效, 組件爲Link 

    // Allow .js files to use JSX syntax
    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md
    'react/jsx-filename-extension': ['error', {extensions: ['.js', '.jsx']}], // 能夠使用js/jsx 寫react的jsx語法

    // Functional and class components are equivalent from React’s point of view
    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md
    'react/prefer-stateless-function': 'off', // 能夠使用 class xxx extend React.Component{} 或者 function xxx => <div></div> 這種方式

    // ESLint plugin for prettier formatting
    // https://github.com/prettier/eslint-plugin-prettier
    'prettier/prettier': [
      'error',
      {
        // https://github.com/prettier/prettier#options
        singleQuote: true,
        trailingComma: 'all'
      }
    ] // 定義使用單引號,而且保留,
  },

  settings: {
    // Allow absolute paths in imports, e.g. import Button from 'components/Button'
    // https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers
    'import/resolver': {
      node: {
        moduleDirectory: ['node_modules', 'src']
      }
    } // 容許絕對路徑導入
  }
}