項目常用eslint配置（Vue/React/TypeScript）

来源:https://www.cnblogs.com/yayoi/archive/2020/03/16/12448429.html
-Advertisement-
Play Games

項目常用eslint配置（Vue/React/TypeScript） 記錄一下常用的eslint配置。 Vue項目常用eslint配置 需要安裝依賴（Vue這裡使用standard擴展和vue插件，所以需要安裝) .eslintrc.js文件配置 javascript // https://esli ...


項目常用eslint配置（Vue/React/TypeScript）

記錄一下常用的eslint配置。

Vue項目常用eslint配置

需要安裝依賴（Vue這裡使用standard擴展和vue插件，所以需要安裝)

{  
    "devDependencies": {
        "babel-eslint": "^10.0.2",
        "eslint": "^6.1.0",
        "eslint-config-imperative-es6": "^2.1.0",
        "eslint-config-standard": "^10.2.1",
        "eslint-plugin-import": "^2.17.2",
        "eslint-plugin-node": "^5.2.0",
        "eslint-plugin-promise": "^3.4.0",
        "eslint-plugin-standard": "^3.0.1",
        "eslint-plugin-vue": "^4.7.1" // vue插件
    }
}

.eslintrc.js文件配置

// https://eslint.org/docs/user-guide/configuring

module.exports = {
    // 預設情況下，ESLint 會在所有父級目錄里尋找配置文件，一直到根目錄。ESLint 一旦發現配置文件中有 "root": true，它就會停止在父級目錄中尋找。
    root: true, 
    parserOptions: { // 解析器選項
        parser: 'babel-eslint' // 一個對Babel解析器的包裝，使其能夠與 ESLint 相容
    },
    // 環境的全局變數
    env: {  
        browser: true,
        node: true,
        jquery: true
    },
    // 配置文件可以被基礎配置中的已啟用的規則繼承。
    extends: [
        // https://github.com/guidesmiths/eslint-config-imperative-es6
        'imperative-es6',
        // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
        // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
        'plugin:vue/essential',
        // https://github.com/standard/standard/blob/master/docs/RULES-en.md
        'standard'  // 使用eslint-plugin-standard擴展（挺好用的
    ],
    // 配置插件名字，可以省略'eslint-plugin-'首碼。使用前要用npm安裝。
    plugins: [
        'vue'
    ],
    // 添加規則。配置定義在插件中的一個規則的時候，你必須使用 插件名/規則ID 的形式。
    // 常用規則官網：http://eslint.cn/docs/rules/
    rules: {
        'indent': ['error', 4],
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'linebreak-style': 'off', // 強制使用一致的換行分隔 LF or CRLF
        'array-callback-return': 'off'
    }
    // 若要禁用一組文件的配置文件中的規則，請使用 overrides 和 files。例如:
    // overrides: 
    // [{
    //     "files": ["*-test.js","*.spec.js"],
    //     "rules": {
    //         "no-unused-expressions": "off"
    //     }
    // }]
}

React項目常用eslint配置

同樣安裝依賴，React這裡使用的airbnb擴展。安裝eslint-import-resolver-webpack用來解決webpack中設置的別名eslint無法識別報錯的問題。

{  
    "devDependencies": {
        "babel-eslint": "^10.0.2",
        "eslint": "^6.1.0",
        "eslint-config-airbnb": "^18.0.1",
        "eslint-import-resolver-webpack": "^0.12.1",
        "eslint-plugin-import": "^2.20.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-node": "^11.0.0",
        "eslint-plugin-promise": "^4.2.1",
        "eslint-plugin-react": "^7.14.3"
    }
}

.eslintrc.js文件配置

module.exports={
    env: {
        browser: true,
        commonjs: true,
        node: true,
        es6: true
    },
    extends: [
        'airbnb' // airbnb擴展
    ],
    globals: {
        $: true,
        process: true,
        __dirname: true
    },
    parser: 'babel-eslint',
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        },
        sourceType: 'module'
    },
    plugins: [
        'react' // react插件
    ],
    // 用來處理webpack中指定別名但eslint未能識別報的錯
    settings: {
        "import/resolver": {
            webpack: {
                config: './build/webpack.base.conf.js'  // 指定webpack配置文件路徑
            }
        }
    },
    // https://github.com/yannickcr/eslint-plugin-react
    rules: {
        "no-console": 0, //不禁用console
        "no-irregular-whitespace": 0, //不規則的空白不允許
        "react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}],//文件是.js還是.jsx
        "no-underscore-dangle": 0,
        "array-bracket-spacing": [2, 'never'], // 指定數組的元素之間要以空格隔開(,後面)
        "comma-dangle": 2, // 數組和對象鍵值對最後一個逗號， never參數：不能帶末尾的逗號, always參數：必須帶末尾的逗號
    }
}

附上rules其他rules規則：

{
    "rules": {
        // off=0, warn=1, error=2, 如果是數組, 第二項表示參數option
        "indent": [2, 2], // 控制縮進為2
        "eqeqeq": 1,// 警告使用全等
        "quotes": [2, "single"], //單引號
        "no-console": 0, //不禁用console
        "no-debugger": 1, //警告debugger
        "no-var": 2, //對var禁止
        "semi": 2, //強制使用分號
        "semi-spacing": [2, {"before": false, "after": true}], // 強制分號前後不允許空格
        "no-irregular-whitespace": 0, //不規則的空白不允許
        "no-trailing-spaces": 'error', //一行結束後面有空格就發出警告
        "eol-last": 0, //文件以單一的換行符結束
        "no-unused-vars": [2, {"vars": "all", "args": "after-used"}], //不能有聲明後未被使用的變數或參數
        "no-underscore-dangle": 0, //標識符不能以_開頭或結尾
        "no-alert": 2, //禁止使用alert confirm prompt
        "no-lone-blocks": 0, //禁止不必要的嵌套塊
        "no-class-assign": 2, //禁止給類賦值
        "no-cond-assign": 2, //禁止在條件表達式中使用賦值語句
        "no-const-assign": 2, //禁止修改const聲明的變數
        "no-delete-var": 2, //不能對var聲明的變數使用delete操作符
        "no-dupe-keys": 2, //在創建對象字面量時不允許鍵重覆
        "no-duplicate-case": 2, //switch中的case標簽不能重覆
        "no-dupe-args": 2, //函數參數不能重覆
        "no-empty": 2, //塊語句中的內容不能為空
        "no-func-assign": 2, //禁止重覆的函數聲明
        "no-invalid-this": 0, //禁止無效的this，只能用在構造器，類，對象字面量
        "no-redeclare": 2, //禁止重覆聲明變數
        "no-spaced-func": 2, //函數調用時 函數名與()之間不能有空格
        "no-this-before-super": 0, //在調用super()之前不能使用this或super
        "no-undef": 2, //不能有未定義的變數
        "no-use-before-define": 2, //未定義前不能使用
        "camelcase": 0, //強制駝峰法命名
        "jsx-quotes": [2, "prefer-double"], //強制在JSX屬性（jsx-quotes）中一致使用雙引號
        "react/display-name": 0, //防止在React組件定義中丟失displayName
        "react/forbid-prop-types": 0, //禁止某些propTypes
        "react/jsx-boolean-value": 0, //在JSX中強制布爾屬性符號
        "react/jsx-closing-bracket-location": 0, //在JSX中驗證右括弧位置
        "react/jsx-curly-spacing": [2, {"when": "never", "children": true}], //在JSX屬性和表達式中加強或禁止大括弧內的空格。
        "react/jsx-indent": [2,2], // 語法縮進控制
        "react/jsx-indent-props": [2, 2], //驗證JSX中的props縮進是否為2個
        "react/jsx-key": 2, //在數組或迭代器中驗證JSX具有key屬性
        "react/jsx-max-props-per-line": 0, // 限制JSX中單行上的props的最大數量
        "react/jsx-no-bind": 0, //JSX中不允許使用箭頭函數和bind
        "react/jsx-no-duplicate-props": 2, //防止在JSX中重覆的props
        "react/jsx-no-literals": 0, //防止使用未包裝的JSX字元串
        "react/jsx-no-undef": 1, //在JSX中禁止未聲明的變數
        "react/jsx-pascal-case": 0, //為用戶定義的JSX組件強制使用PascalCase
        "react/jsx-sort-props": 0, //強化props按字母排序
        "react/jsx-uses-react": 1, //防止反應被錯誤地標記為未使用
        "react/jsx-uses-vars": 2, //防止在JSX中使用的變數被錯誤地標記為未使用
        "react/no-danger": 0, //防止使用危險的JSX屬性
        "react/no-did-mount-set-state": 0, //防止在componentDidMount中使用setState
        "react/no-did-update-set-state": 1, //防止在componentDidUpdate中使用setState
        "react/no-direct-mutation-state": 2, //防止this.state的直接變異
        "react/no-multi-comp": 0, //防止每個文件有多個組件定義
        "react/no-set-state": 0, //防止使用setState
        "react/no-unknown-property": 2, //防止使用未知的DOM屬性
        "react/prefer-es6-class": 2, //為React組件強制執行ES5或ES6類
        "react/prop-types": 0, //防止在React組件定義中丟失props驗證
        "react/react-in-jsx-scope": 2, //使用JSX時防止丟失React
        "react/self-closing-comp": 0, //防止沒有children的組件的額外結束標簽
        "react/sort-comp": 2, //強制組件方法順序
        "no-extra-boolean-cast": 0, //禁止不必要的bool轉換
        "react/no-array-index-key": 0, //防止在數組中遍歷中使用數組key做索引
        "react/no-deprecated": 1, //不使用棄用的方法
        "react/jsx-equals-spacing": 2, //在JSX屬性中強制或禁止等號周圍的空格
        "no-unreachable": 1, //不能有無法執行的代碼
        "comma-dangle": [2, "never"], //對象字面量項尾必須有逗號
        "no-mixed-spaces-and-tabs": 0, //禁止混用tab和空格
        "prefer-arrow-callback": 0, //比較喜歡箭頭回調
        "arrow-parens": 0, //箭頭函數用小括弧括起來
        "arrow-spacing": [
            'error',
            {
                before: true,
                after: true
            }
        ],
        "prefer-const": ["error", {
            "destructuring": "all"
            }
        ],
        "prefer-destructuring": ["error", {
            "VariableDeclarator": {
                "array": false,
                "object": true
            },
            "AssignmentExpression": {
                "array": false,
                "object": false
            }
        }, {
            "enforceForRenamedProperties": false
            }
        ],
        "use-isnan": 2,//禁止比較時使用NaN，只能用isNaN()
        // @fixable 代碼塊如果在一行內，那麼大括弧內的首尾必須有空格，比如 function () { alert('Hello') }
        'block-spacing': [
            'error',
            'always'
        ],
        // @fixable 函數名和執行它的括弧之間禁止有空格
        'func-call-spacing': [
            'error',
            'never'
        ],
        // @fixable if, function 等的大括弧之前必須要有空格，比如 if (a) {
        'space-before-blocks': [
            'error',
            'always'
        ],
        // @fixable function 的小括弧之前必須要有空格
        'space-before-function-paren': [
            'error',
            {
                anonymous: 'ignore',
                named: 'never',
                asyncArrow: 'always'
            }
        ],
        // @fixable 小括弧內的首尾禁止有空格
        'space-in-parens': [
            'error',
            'never'
        ],
        // @fixable 操作符左右必須有空格，比如 let sum = 1 + 2;
        'space-infix-ops': 'error',
        // @fixable new, typeof 等後面必須有空格，++, -- 等禁止有空格，比如：
        // let foo = new Person();
        // bar = bar++;
        'space-unary-ops': [
            'error',
            {
                words: true,
                nonwords: false
            }
        ],
        'switch-colon-spacing': [
            'error',
            {
                after: true,
                before: false
            }
        ],
        'arrow-spacing': [
            'error',
            {
                before: true,
                after: true
            }
        ],
        'comma-spacing': [
            'error',
            {
                before: false,
                after: true
            }
        ],
        'keyword-spacing': [
            'error',
            {
                before: true,
                after: true
            }
        ]
    }
}

TypeScript+React項目常用eslint配置

需要安裝依賴@typescript-eslint（前提是已經安裝了typescript）

{  
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^2.23.0",
        "@typescript-eslint/parser": "^2.23.0",
        "eslint": "^6.8.0",
        "eslint-config-airbnb-typescript": "^7.0.0",
        "eslint-import-resolver-webpack": "^0.12.1",
        "eslint-plugin-import": "^2.20.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-react": "^7.19.0",
        "eslint-plugin-react-hooks": "^1.7.0",`
    }
}

.eslintrc.js文件配置

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: './tsconfig.json',
    },
    plugins: [
        '@typescript-eslint',
    ],
    extends: [
        'airbnb-typescript',
        'eslint:recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
    ],
    // 用來處理webpack中指定別名但eslint未能識別報的錯
    settings: {
        "import/resolver": {
            webpack: {
                config: './build/webpack.base.conf.js'  // 指定webpack配置文件路徑
            }
        }
    },
    rules: {
        "react/state-in-constructor": 0,
        "comma-dangle": [2, 'always-multiline'],
        "no-console": 0, //不禁用console
        "no-irregular-whitespace": 0, //不規則的空白不允許
        "no-underscore-dangle": 0,
        "array-bracket-spacing": [2, 'never'] // 指定數組的元素之間要以空格隔開(,後面)
    }
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js拷貝繼承
    <script type="text/javascript"> var a = { "gender":'男', "grade":'初三', "group":'第五組', "name":'李白' }; var b = {};//創建一個空對象 for (var key in a) { // a[key ...
  • js繼承的封裝
    <script type="text/javascript"> function extend(source, target) { for(var key in source) { var value = source[key]; target[key] = value; } } // extend ...
  • 移動端解析度+小程式的自適應單位RPX
    為什麼模擬器iphone6解析度375，而設計圖一般給750 • 1個pt可以有1個px構成，也可以有2個，還可以有3個甚至更多組成• Iphone6下 2個 px才構成一個 pt 而微信小程式給出的是邏輯解析度，而設計師給的一般是物理解析度 如何做不同解析度設備的自適應？• 以ip6的物理像素75 ...
  • 從一個簡單的“歡迎“頁面開始小程式之旅
    首先刪除index/log/utils文件夾 還有app.json/app.js/app.wxss 會出現報錯，未找到app.json文件 然後新建自己的app.js/app.json/app.wxss 現在的報錯是 先不管它，等下再說 在pages目錄下新建一個welcome目錄 在welcome ...
  • 關於查看本機ssh公鑰以及生成公鑰
    1、查看本機公鑰； 打開git bush，執行 cd ~/.ssh 進入.ssh文件夾(C:\Users\Administrator\.ssh) 執行 ls 命令，查看列表 執行 cat id_rsa.pub 或者 vim id_rsa.pub 查看id_rsa.pub這個文件，出現的一串代碼即是公 ...
  • jQuery 事件 - dblclick() 方法使用【轉】
    實例 當雙擊按鈕時，隱藏或顯示元素： ~~~ $("button").dblclick(function(){ $("p").slideToggle(); }); ~~~ "親自試一試" 定義和用法 當雙擊元素時，會發生 dblclick 事件。 當滑鼠指針停留在元素上方，然後按下並鬆開滑鼠左鍵時， ...
  • jQuery 事件 - bind() 方法使用【轉】
    實例 當點擊滑鼠時，隱藏或顯示 p 元素： ~~~ $("button").bind("click",function(){ $("p").slideToggle(); }); ~~~ "親自試一試" 定義和用法 bind() 方法為被選元素添加一個或多個事件處理程式，並規定事件發生時運行的函數。 ...
  • jQuery 遍歷 - map() 方法使用【轉】
    實例 構建表單中所有值的列表： ~~~ $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); ~~~ "親自試一試" 定義和用法 map() 把每個元素通過函數傳遞到當前匹配集合中 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類