站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        Node.js項目中如何安裝和使用ESLint

        Node.js項目中如何安裝和使用ESLint?本篇文章給大家介紹一下在 Node.js 應(yīng)用程序中使用 ESLint的方法。

        Node.js項目中如何安裝和使用ESLint

        【推薦學(xué)習(xí):《nodejs 教程》】

        ESLint 是一個開源 JavaScript linting 實用程序,它可以幫助我們規(guī)范代碼,克服開發(fā)人員的一些意想不到錯誤,因為 JavaScript 是弱類型的語言。

        Javascript 社區(qū)中有很多規(guī)范化選項,比如 JSHint 和 JSCS,用于代碼 linting,包括今天我們要講的 ESLint。

        ESLint 旨在使所有規(guī)則完全可插入。這是它產(chǎn)生的主要原因之一。它允許開發(fā)人員創(chuàng)建自己的 linting 規(guī)則。ESLint 官方指南中提供的每個規(guī)則都是獨立的規(guī)則,開發(fā)人員可以在任何時候決定是否使用特定的規(guī)則。

        安裝

        對于項目目錄的本地安裝:

        $ npm i eslint -D

        對于工作系統(tǒng)中的全局安裝:

        $ npm i eslint -g

        安裝好后,我們就可以通過終端中的 eslint 命令使用 ESLint。

        配置

        最簡單的配置方法是設(shè)置一個 .eslintrc JSON 文件,其中可以描述所有的 linting 規(guī)則。

        .eslintrc 的一個示例:

        {   "env": {     "node": true,     "browser": true   },   "globals": {     "exampleGlobalVariable": true   },   "rules": {     "no-console": 0,     "space-infix-ops": "error",     "quotes": ["error", "single", {       "avoidEscape": true,       "allowTemplateLiterals": true     }],     "space-before-blocks": ["error", "always"],     "semi": ["error", "never"]   },   "plugins": [] }

        主要字段:

        • parse — 指定解析器
        • parserOptions — 指定解析器選項
        • env — 指定腳本的運行環(huán)境
        • root — 為 true 時,停止向上查找父級目錄中的配置文件
        • globals — 腳本在執(zhí)行期間訪問的額外的全局變量
        • rules — 在此處添加您的自定義規(guī)則

        如果全局安裝了 eslint,我們還可以使用以下命令生成配置文件:

        $ eslint --init

        在其他情況下,如果您已在本地將其安裝到項目中,則需要在終端中輸入:

        $ ./node_modules/.bin/eslint --init

        在這兩種情況下,都會提示您生成 .eslintrc 文件的一組基本規(guī)則。

        Node.js項目中如何安裝和使用ESLint

        上述提示后生成的文件示例:

        {   "env": {     "browser": true,     "commonjs": true,     "es2021": true   },   "extends": "eslint:recommended",   "parserOptions": {     "ecmaVersion": 12   },   "rules": {     "indent": [       "error",       "tab"     ],     "linebreak-style": [       "error",       "windows"     ],     "quotes": [       "error",       "single"     ],     "semi": [       "error",       "never"     ]   } }

        有關(guān)配置的詳細(xì)信息,請閱讀:

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

        為了方便運行,我們可以在項目的 package.json,在 scripts 字段里面添加以下腳本:

        {   "scripts" : {     "lint": "eslint **/*.js",     "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",     "lint-fix": "eslint --fix **/*.js"   } }

        我們將該規(guī)則應(yīng)用于以下文件:

        var a = 1; console.log(1);

        執(zhí)行 npm run lint 后將出現(xiàn)以下信息:

        Node.js項目中如何安裝和使用ESLint

        ESLint 提示已經(jīng)很明顯了:3 個錯誤。第一行和第二行的最后又額外的分號錯誤,a 被賦值但從未使用。

        并且提示使用 --fix 選項修復(fù)錯誤和警告,有 2 個錯誤是可以修復(fù)的?,F(xiàn)在,使用 npm run lint-fix 修復(fù)它,a 的去留就看自己手動更改。

        你還可以運行 npm run lint-html 命令,將檢查結(jié)果寫入一個網(wǎng)頁文件。

        Node.js項目中如何安裝和使用ESLint

        配置文件優(yōu)先級

        如果您按上面的步驟一步步來,你會可能已經(jīng)知道,ESLint 支持幾種格式的配置文件。

        現(xiàn)在存在一個問題,如果同個目錄下有多個 ESLint 文件,它們會如何執(zhí)行,優(yōu)先級如何?

        ESLint 源碼中給出了我們答案,其優(yōu)先級配置如下:

        const configFilenames = [   ".eslintrc.js",   ".eslintrc.yaml",   ".eslintrc.yml",   ".eslintrc.json",   ".eslintrc",   "package.json" ]

        .eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

        規(guī)則

        ESLint 中的規(guī)則是單獨添加的。默認(rèn)情況下不強制執(zhí)行任何規(guī)則。您必須明確指定規(guī)則,然后才會為 linting 過程啟用它。

        打開官方文檔查找完整的規(guī)則列表:

        http://eslint.org/docs/rules/

        在決定要包含哪些規(guī)則之后,您必須設(shè)置這些錯誤級別。每個錯誤級別可定義如下:

        • 0 — 關(guān)閉規(guī)則,相當(dāng)于 off
        • 1 — 打開規(guī)則作為警告,相當(dāng)于 warn
        • 2 — 打開規(guī)則作為錯誤,相當(dāng)于 error

        錯誤和警告之間的區(qū)別在于 eslint 完成時將具有的退出代碼。如果發(fā)現(xiàn)任何錯誤,eslint 將以 1 退出代碼退出,否則將以 0 退出。

        如果您在生成步驟中進(jìn)行 lint,這允許您控制哪些規(guī)則應(yīng)破壞您的生成,哪些規(guī)則應(yīng)視為警告。

        環(huán)境

        您正在編寫的代碼可能適用于特定環(huán)境,例如,您可能正在使用 Express 框架在 Node.js 應(yīng)用程序中編寫 REST API,并且該應(yīng)用程序的前端將在 Vue/React 中構(gòu)建。

        兩個不同的項目、兩個不同的環(huán)境,它們都可以在一個文件中具有單獨的 eslint 配置,即使客戶端和服務(wù)器位于一個被視為項目根目錄的項目目錄下。

        它是如何完成的?

        通過在 .eslintrc"env" 部分將環(huán)境 id 設(shè)置為 true。

        ESLint CLI

        ESLint 附帶一個命令行界面(CLI),用于 lint 文件或目錄。

        $ eslint index.js

        前面示例中我們已經(jīng)看到,運行命令后生成的輸出將按文件分組,并將指定 line:column 警告/錯誤、錯誤原因以及每個故障的規(guī)則名稱。

        將 ESLint 與您喜歡的編碼風(fēng)格結(jié)合使用

        ESLint 個人并不提倡任何編碼風(fēng)格。您可以設(shè)置 .eslintrc 文件以使用您喜歡的樣式規(guī)則強制編碼樣式。

        您還可以將 ESLint 與樣式指南(如 Airbnb、JavaScript 標(biāo)準(zhǔn)風(fēng)格)一起使用。

        你還必須使用額外的插件,例如:

        • Airbnb 的插件 eslint-config-airbnb-base。
        • JavaScript 標(biāo)準(zhǔn)風(fēng)格 eslint-config-standard
        • 一些流行庫的插件:Vue | React

        團(tuán)隊規(guī)范

        AlloyTeam 給出的 React/Vue/TypeScript 項目的漸進(jìn)式 ESLint 配置(eslint-config-alloy),以下貼出 React 的一小部分配置:

        module.exports = {   parserOptions: {     babelOptions: {       presets: ['@babel/preset-react'],     },   },   plugins: ['react'],   rules: {     /**      * 布爾值類型的 propTypes 的 name 必須為 is 或 has 開頭      * @reason 類型相關(guān)的約束交給 TypeScript      */     'react/boolean-prop-naming': 'off',     /**      * <button> 必須有 type 屬性      */     'react/button-has-type': 'off',     /**      * 一個 defaultProps 必須有對應(yīng)的 propTypes      * @reason 類型相關(guān)的約束交給 TypeScript      */     'react/default-props-match-prop-types': 'off',     /**      * props, state, context 必須用解構(gòu)賦值      */     'react/destructuring-assignment': 'off',     /**      * 組件必須有 displayName 屬性      * @reason 不強制要求寫 displayName      */     'react/display-name': 'off',     // ...   } }

        您可以參考該團(tuán)隊的一些配置,應(yīng)用到自己的項目中。

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 极品精品国产超清自在线观看| 久久乐国产精品亚洲综合| 精品国产一区二区三区在线观看| 亚洲国产精品一区二区第一页免 | 国产精品99久久久久久宅男 | 影视网欧洲精品| 国产精品jizz视频| 亚洲国产精品视频| 精品久久国产一区二区三区香蕉| 精品亚洲一区二区| avtt天堂网久久精品| 人人妻人人澡人人爽人人精品97| 无码精品第一页| 欧美国产精品va在线观看| 国产精品自在线拍国产电影 | 国产系列高清精品第一页| 91av国产精品| 国产精品欧美亚洲韩国日本| 精品一区二区三区波多野结衣| 亚洲精品无码成人AAA片| 亚洲精品国产高清嫩草影院| 老湿亚洲永久精品ww47香蕉图片| 国精品无码A区一区二区| 国产亚洲精品国看不卡| 一区二区三区日韩精品| 337P亚洲精品色噜噜| 91国内揄拍国内精品情侣对白 | 国产一区二区精品久久| 99久久国产综合精品麻豆| 8x福利精品第一导航| 国产精品免费大片| 99热亚洲色精品国产88| 国产精品自拍一区| 午夜精品美女写真福利| 91久久精品国产免费直播| 99久久精品免费观看国产| 国产成人精品久久| 精品久久久无码中文字幕| 日韩精品无码免费视频| 亚洲精品午夜无码电影网| 欧美精品久久久久久久自慰|