React項(xiàng)目筆記之create-react-app自定義ESLint配置文件

Dogee 發(fā)布于2019-08-20 15:25 / 3004人閱讀

摘要：初始化項(xiàng)目使用創(chuàng)建項(xiàng)目此過程不做詳解，然后運(yùn)行使其暴露等配置文件自定義上述步驟并沒有暴露腳手架封裝的操作，為了使得項(xiàng)目統(tǒng)一規(guī)范化，添加操作是非常不錯(cuò)的選擇關(guān)于其他的操作，請(qǐng)參見官網(wǎng)，本文主要針對(duì)限制規(guī)范配置。

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

前言

了解eslint基礎(chǔ)用法，若想更進(jìn)一步了解其，請(qǐng)查閱官網(wǎng)以及相關(guān)資料(中文網(wǎng))
若有問題請(qǐng)指出或加群264591039與我討論。

初始化項(xiàng)目

使用create-react-app 創(chuàng)建項(xiàng)目（此過程不做詳解），然后運(yùn)行npm run eject使其暴露webpack等配置文件

自定義eslint

上述步驟并沒有暴露react腳手架封裝的eslint操作，為了使得項(xiàng)目統(tǒng)一規(guī)范化，添加jsx-eslint操作
是非常不錯(cuò)的選擇（關(guān)于js其他的eslint操作，請(qǐng)參見官網(wǎng)，本文主要針對(duì)jsx限制規(guī)范配置）。

在項(xiàng)目根目錄下添加.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"
}],

運(yùn)行npm start,此時(shí)，你編寫的jsx文件都是經(jīng)過.eslintrc的配置限制

.eslintrc文件基本規(guī)范配置

ps: 配置的value對(duì)應(yīng)的值： 0 : off 1 : warning 2 : error
不滿足以下的規(guī)范設(shè)置的，編譯代碼時(shí)將有黃色提示
具體配置規(guī)則可參見Github

{
  "extends": "react-app",
  "rules": {
    "no-multi-spaces": 1,
    "react/jsx-space-before-closing": 1,        // 總是在自動(dòng)關(guān)閉的標(biāo)簽前加一個(gè)空格，正常情況下也不需要換行
    "jsx-quotes": 1,
    "react/jsx-closing-bracket-location": 1,    // 遵循JSX語法縮進(jìn)/格式
    "react/jsx-boolean-value": 1,               // 如果屬性值為 true, 可以直接省略
    "react/no-string-refs": 1,      // 總是在Refs里使用回調(diào)函數(shù)
    "react/self-closing-comp": 1,    // 對(duì)于沒有子元素的標(biāo)簽來說總是自己關(guān)閉標(biāo)簽
    "react/jsx-no-bind": 1,          // 當(dāng)在 render() 里使用事件處理方法時(shí)，提前在構(gòu)造函數(shù)里把 this 綁定上去
    "react/sort-comp": 1,            // 按照具體規(guī)范的React.createClass 的生命周期函數(shù)書寫代碼
    "react/jsx-pascal-case": 1        // React模塊名使用帕斯卡命名，實(shí)例使用駱駝式命名
  }
}