react項目配置Eslint

来源:https://www.cnblogs.com/UnfetteredMan/archive/2022/09/30/16745415.html
-Advertisement-
Play Games

React Or Taro 項目配置Eslint校驗 一、下載Eslint相關deps依賴項; npm install --save-dev eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-config-airbnb 註意:由於eslint- ...


React Or Taro 項目配置Eslint校驗

一、下載Eslint相關deps依賴項;

npm install --save-dev  eslint-plugin-prettier  eslint-plugin-jsx-a11y eslint-config-airbnb
註意由於eslint-config-airbnb目前版本已經超過19,會出現一個小問題,箭頭函數和命名函數會被Eslint 提示衝突,這是由於19版本的升級導致的解決方案目前有兩個

1,在.eslintrc.js 文件中添加了以下規則

    'react/function-component-definition': [2, { namedComponents: 'arrow-function', unnamedComponents: 'arrow-function' }],

    這樣,eslint 將只接受組件的箭頭函數,而不是函數表達式(預設情況下);

2,可以改變函數寫法來解決衝突,這樣是最簡單的

    箭頭函數:const Demo = () : ReactNode => <div>demo</div>;

    function Demo () {
        return <div>demo</div>
    }
3,通過改變版本去解決衝突,

    直接下載指定的版本的包就可以解決,現在自測18.1.0可以滿足當下需求;

二、配置.eslintrc.js文件(將預設的 .eslintrc 文件改完預設導出 .eslintrc.js)

// .eslintrc.js 如果編輯器module.exports報錯,可嘗試重啟編輯器

module.exports = { root: true, extends: ['taro/react', 'airbnb', 'airbnb/hooks'], parser: '@typescript-eslint/parser', // ESLint 預設使用 esprima 作為其解析器,也可以在配置文件中指定一個不同的解析器(它必須是一個 Node 模塊,且它必須符合 parser interface) plugins: [ 'react', 'react-hooks', 'import', 'jsx-a11y' ], rules: { 'react/function-component-definition': [2, { namedComponents: 'arrow-function', unnamedComponents: 'arrow-function' }], 'react/jsx-uses-react': 'off', 'react/react-in-jsx-scope': 'off', 'no-undef': 'off', 'import/no-extraneous-dependencies': 'off', 'import/prefer-default-export': 'off', 'import/no-unresolved': 'off', 'no-unused-vars': 'off', 'import/extensions': 'off', 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }], indent: ['error', 2, { SwitchCase: 1 }], 'linebreak-style': 'off', quotes: ['error', 'single'], semi: ['error', 'always'], 'dot-notation': 'off', 'spaced-comment': 'off', 'comma-dangle': 'off', 'space-before-function-paren': ['error', 'never'], 'one-var': 'off', 'one-var-declaration-per-line': 'off', 'no-use-before-define': 'off', 'no-restricted-globals': ['error', 'history'], 'class-methods-use-this': 'off', radix: 'off', 'global-require': 'error', 'default-case': 'off', 'no-param-reassign': 'error', 'consistent-return': 'off', 'no-script-url': 'error', 'no-else-return': 'error', 'no-restricted-syntax': 'error', 'no-extend-native': 'error', 'no-return-assign': 'off', 'no-underscore-dangle': 'off', 'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true, allowTaggedTemplates: true }], 'max-len': ['error', { code: 200, ignoreComments: true, ignoreUrls: true, ignoreTemplateLiterals: true }], 'jsx-quotes': ['error', 'prefer-single'], 'jsx-a11y/alt-text': 'off', 'jsx-a11y/no-autofocus': 'off', 'jsx-a11y/label-has-for': 'off', 'jsx-a11y/label-has-associated-control': 'off', 'jsx-a11y/media-has-caption': 'off', 'jsx-a11y/click-events-have-key-events': 'off', 'jsx-a11y/no-noninteractive-element-interactions': 'off', 'jsx-a11y/no-static-element-interactions': 'off', 'jsx-a11y/anchor-is-valid': 'off', 'prefer-destructuring': 'off', 'no-plusplus': 'off', 'no-trailing-spaces': 'off', 'react/prop-types': 'off', 'react/jsx-tag-spacing': 'off', 'import/no-duplicates': 'off', 'import/order': 'off', 'import/no-dynamic-require': 'off', 'react/no-did-update-set-state': 'error', 'react/no-unused-state': 'error', 'react/no-find-dom-node': 'error', 'react/forbid-prop-types': 'off', 'react/jsx-indent-props': 'off', 'react/no-array-index-key': 'off', 'react/require-default-props': 'off', 'react/sort-comp': 'off', 'react/jsx-wrap-multilines': 'off', 'react/destructuring-assignment': 'off', 'react/jsx-closing-bracket-location': 'off', 'react/jsx-first-prop-new-line': 'off', 'react/no-multi-comp': 'off', 'react/jsx-one-expression-per-line': 'off', 'react/no-access-state-in-setstate': 'off', 'react/jsx-no-bind': 'off', 'react/jsx-indent': [2, 2], 'react/no-unescaped-entities': 'off', 'no-prototype-builtins': 'error', 'no-nested-ternary': 'error', 'react-hooks/exhaustive-deps': 'off', 'react/jsx-no-target-blank': 'error', 'no-console': ['off'], 'react/jsx-props-no-spreading': 'off', 'react-hooks/rules-of-hooks': 'error', 'no-useless-constructor': 'off', 'no-empty-function': 'off', 'object-curly-newline': 'off', 'react/no-danger': 'off', 'react/button-has-type': 'off', 'no-multiple-empty-lines': 'off', 'no-useless-escape': 'off', 'react/no-unused-prop-types': 'off', 'react/default-props-match-prop-types': 'off', camelcase: 'off', }, };

 

三、新建 .eslintignore 文件,配置eslint不檢測的文件

// 沒啥好講的,直接將不需要檢測的路徑或文件丟在這裡就ok
/.git/
/.Vscode/
node_modules//
dist/

4.新建.prettierrc.js文件

module.exports = {
    tabWidth: 4,
    singleQuote: true,
    jsxSingleQuote: true,
    printWidth: 140,
    endOfLine: 'auto',
};

 5.修改編輯器的配置文件.editorconfig

.editorconfig 文件用於 統一不同編輯器的代碼風格的配置。比如我們要控制一個多人維護的項目縮進統一用4個空格:indent_size = 4

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = crlf

[*.md]
trim_trailing_whitespace = false

6.修改vscode編輯器的setting.json文件

// jsx自動修複
    "editor.formatOnSave": true,
    // 保存自動修複
    "eslint.autoFixOnSave": true,
    "eslint.run": "onSave",
    "javascript.format.enable": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnPaste": false,
    "editor.formatOnType": true,
    "files.autoSave": "onFocusChange",
    "eslint.nodePath": "",
    "files.trimTrailingWhitespace": true,

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
        "language": "html",
        "autoFix": true
        },
        {
        "language": "react",
        "autoFix": true
        }
    ]

 

時間如白駒過隙,忽然而已,且行且珍惜......
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Java資料庫的安裝和使用 1.資料庫的作用 一個問題:淘寶網、京東、微信抖音,都有各自的功能,那麼我們退出系統的時候,為什麼信息還在? 解決之道-文件,資料庫 為瞭解決上訴問題,使用更加利於管理數據東西-資料庫,他能更加有效地管理數據。 舉一個生活化的案例說明:如果說圖書館是保存書籍的,那麼資料庫 ...
  • LIKE操作符:通配符搜索只能用於文本欄位(字元串) 1、%通配符 1 select 2 col_name 3 from 4 table_name 5 where 6 col_name 7 like "%str" 2、_通配符 1 select 2 col_name 3 from 4 table_n ...
  • 一直使用Postgresql資料庫,有一張表是這樣的: DROP TABLE IF EXISTS "public"."devicedata"; CREATE TABLE "public"."devicedata" ( "Id" varchar(200) COLLATE "pg_catalog"."d ...
  • 據中國信通院發佈,2012年到2021年10年間,我國數字經濟規模由12萬億元增長到45.5萬億元,在整個GDP中的比重由21.6%提升至39.8%。順應時代發展新趨勢,“數據”成為新的生產要素已是毋庸置疑的共識。 如果說數據中台的崛起代表著企業數字化轉型從流程驅動走向數據驅動,從數字化走向智能化。 ...
  • 首發微信公眾號:SQL資料庫運維 原文鏈接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1&sn=450e9e94fa709b5eeff0de371c62072b&chksm=ea37536cdd40da7 ...
  • 現如今,手機錄屏是必不可少的能力之一。對於游戲領域作者來說,在平時直播玩游戲、製作攻略、操作集錦時,不方便切屏,這時在游戲內如果有一個錄製按鈕就可以隨時開啟,記錄下每個精彩瞬間,減少後期剪輯工作量;在直播App中開啟一鍵錄屏,不光方便主播後續的賬號運營與復盤,用戶也能隨時截取有意思的片段傳播在社交媒 ...
  • #背景 webpack構建過程中的hooks都有什麼呢?除了在網上看一些文章,還可以通過更直接的辦法,結合官方文檔快速讓你進入webpack的hook世界 寫一個入口文件 //index.js const webpack = require("webpack"); const path = requ ...
  • 語言基礎-變數 前言 從本篇博客開始 博主個人認為重要的知識點都會在在行前添加 ⭐ 來進行標識 變數 ECMASCRIPT變數是鬆散類型,意思是變數可以用於保存任何類型的數據。ECMASCRIPT中有三個關鍵字可以來聲明變數:var、let和const。 值得註意的是let和const只能在ES6以 ...
一周排行
    -Advertisement-
    Play Games
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • 用acme.sh自動部署功能變數名稱證書 安裝ACME 目前使用量最大的免費SSL證書就是Let’s Encrypt,自2018-03開始,Let’s Encrypt官方發佈上線了免費的SSL泛功能變數名稱證書,目前通過DNS方式獲取比較快,國內可以通過鵝雲的DNSPod功能變數名稱API或者貓雲功能變數名稱API自動簽發Let’ ...
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 1、環境搭建 1.1 依賴 <!-- nacos註冊中心 註解 @EnableDiscoveryClient --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba- ...
  • ULID:Universally Unique Lexicographically Sortable Identifier(通用唯一詞典分類標識符) UUID:Universally Unique Identifier(通用唯一標識符) 為什麼不選擇UUID UUID 目前有 5 個版本: 版本1: ...
  • 虛基類/抽象類 抽象類:有純虛函數的類 虛繼承 通過修飾繼承方式, 如代碼2是虛繼承,被虛繼承的類稱為虛基類 虛繼承派生類的記憶體佈局方式 先是vbptr => 派生類的數據 =>基類的數據 , 對比代碼1和代碼2,發現原本基類數據在前面,派生類數據在後面,但是在虛繼承的時候 基類數據方式放到了後面, ...
  • 下麵給出 Kafka 一些重要概念,讓大家對 Kafka 有個整體的認識和感知,後面還會詳細的解析每一個概念的作用以及更深入的原理 • Producer:消息生產者,向 Kafka Broker 發消息的客戶端。 • Consumer:消息消費者,從 Kafka Broker 取消息的客戶端。 • ...
  • 前面介紹了對稱加密演算法,本文將介紹密碼學中另一類重要應用:消息摘要(Digest),什麼是消息摘要?簡單的定義是:對一份數據,進行一個單向的Hash函數,生成一個固定長度的Hash值,這個值就是這份數據的摘要,也稱為指紋。 ...
  • 弟弟最近要考試,臨時抱佛腳在網上找了一堆學習資料複習,這不剛就來找我了,說PDF上有水印,影響閱讀效果,到時候考不好就怪資料不行,氣的我差點當場想把他揍一頓! 算了,弟弟長大了,看在打不過他的份上,就不打他了~ 稍加思索,我想起了Python不是可以去水印?說搞就搞! 去除水印原理 去除方法: 用 ...
  • 作者:陳昌浩 1 導讀 if…else…在代碼中經常使用,聽說可以通過Java 8的Function介面來消滅if…else…!Function介面是什麼?如果通過Function介面介面消滅if…else…呢?讓我們一起來探索一下吧。 2 Function介面 Function介面就是一個有且僅有 ...