成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Dogee / 3013人閱讀

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

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

前言 
了解eslint基礎(chǔ)用法，若想更進一步了解其，請查閱官網(wǎng)以及相關(guān)資料(中文網(wǎng))


若有問題請指出或加群264591039與我討論。
初始化項目

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

自定義eslint

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

在項目根目錄下添加.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文件都是經(jīng)過.eslintrc的配置限制

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82227.html

相關(guān)文章

  • 在 React-CRA 應(yīng)用中配合 VSCode 使用 ESLint 實踐前端代碼規(guī)范

    摘要：編碼規(guī)范是獨角獸公司內(nèi)部的編碼規(guī)范，該項目是上很受歡迎的一個開源項目，在前端開發(fā)中使用廣泛，本文的配置規(guī)則就是以編碼規(guī)范和編碼規(guī)范作為基礎(chǔ)的。 更新時間：2019-01-22React.js create-react-app 項目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規(guī)范 前言 為什么要使用 ESLint 在項目開發(fā)過程中，編寫符合團隊編碼規(guī)...

    Hujiawei 評論0 收藏0

  • create-react-app 2.1.8版本自定義配置

    摘要：在用新建項目后，運行命令，可看到各項配置。按需引入組件文件的配置項中，添加增加裝飾器配置文件的配置項中，添加設(shè)為，表示使用階段裝飾器語法和行為。原因在中有提到是因為目前只有支持，而目前為止，還只是一個版本。參考自追溯的實現(xiàn) 在用create-react-app新建項目后，運行eject命令，可看到各項配置。 按需引入ant design組件 1.yarn add babel-plugi...

    劉玉平 評論0 收藏0

  • create-react-app 2.1.8版本自定義配置

    摘要：在用新建項目后，運行命令，可看到各項配置。按需引入組件文件的配置項中，添加增加裝飾器配置文件的配置項中，添加設(shè)為，表示使用階段裝飾器語法和行為。原因在中有提到是因為目前只有支持，而目前為止，還只是一個版本。參考自追溯的實現(xiàn) 在用create-react-app新建項目后，運行eject命令，可看到各項配置。 按需引入ant design組件 1.yarn add babel-plugi...

    SexySix 評論0 收藏0

  • create-react-app 2.1.8版本自定義配置

    摘要：在用新建項目后，運行命令，可看到各項配置。按需引入組件文件的配置項中，添加增加裝飾器配置文件的配置項中，添加設(shè)為，表示使用階段裝飾器語法和行為。原因在中有提到是因為目前只有支持，而目前為止，還只是一個版本。參考自追溯的實現(xiàn) 在用create-react-app新建項目后，運行eject命令，可看到各項配置。 按需引入ant design組件 1.yarn add babel-plugi...

    leone 評論0 收藏0

發(fā)表評論

0條評論

Dogee

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<