React項目筆記之create-react-app自定義ESLint配置文件

原博客地址：https://yezihaohao.github.io

前言

瞭解eslint基礎用法，若想更進一步瞭解其，請查閱官網以及相關資料(中文網)

如有問題請指出或加羣264591039與我討論。

初始化項目

使用create-react-app 建立項目（此過程不作詳解），而後運行npm run eject使其暴露webpack等配置文件

自定義eslint

上述步驟並無暴露react腳手架封裝的eslint操做，爲了使得項目統一規範化，添加jsx-eslint操做
是很是不錯的選擇（關於js其餘的eslint操做，請參見官網，本文主要針對jsx限制規範配置）。

• 在項目根目錄下添加.eslintrc文件

• 在根目錄找到config文件夾，並找到文件夾下的webpack.config.dev.js文件

• webpack.config.dev.js文件添加以下代碼：

enforce: 'pre',
use: [{
  // @remove-on-eject-begin
  // Point ESLint to our predefined config.
  options: {
    //configFile: path.join(__dirname, '../.eslintrc'),
    useEslintrc: true
  },
  // @remove-on-eject-end
  loader: 'eslint-loader'
}],

• 運行npm start,此時，你編寫的jsx文件都是通過.eslintrc的配置限制

.eslintrc文件基本規範配置

ps: 配置的value對應的值： 0 : off 1 : warning 2 : error
不知足如下的規範設置的，編譯代碼時將有黃色提示
具體配置規則可參見Github

{
  "extends": "react-app",
  "rules": {
    "no-multi-spaces": 1,
    "react/jsx-space-before-closing": 1,        // 老是在自動關閉的標籤前加一個空格，正常狀況下也不須要換行
    "jsx-quotes": 1,
    "react/jsx-closing-bracket-location": 1,    // 遵循JSX語法縮進/格式
    "react/jsx-boolean-value": 1,               // 若是屬性值爲 true, 能夠直接省略
    "react/no-string-refs": 1,      // 老是在Refs裏使用回調函數
    "react/self-closing-comp": 1,    // 對於沒有子元素的標籤來講老是本身關閉標籤
    "react/jsx-no-bind": 1,          // 當在 render() 裏使用事件處理方法時，提早在構造函數裏把 this 綁定上去
    "react/sort-comp": 1,            // 按照具體規範的React.createClass 的生命週期函數書寫代碼
    "react/jsx-pascal-case": 1        // React模塊名使用帕斯卡命名，實例使用駱駝式命名
  }
}