一、專欄介紹 ????

歡迎加入本專欄！本專欄將引領(lǐng)您快速上手React，讓我們一起放棄放棄的念頭，開始學(xué)習(xí)之旅吧！我們將從搭建React項(xiàng)目開始，逐步深入講解最核心的hooks，以及React路由、請求、組件封裝以及UI（Ant Design）框架的使用。讓我們一起掌握React，開啟前端開發(fā)的全新篇章！

二、環(huán)境準(zhǔn)備?????

需要準(zhǔn)備node環(huán)境，在本專欄中我將使用node v16.18.0和npm 8.19.0作為基礎(chǔ)環(huán)境進(jìn)行搭建和開發(fā)項(xiàng)目案例。

接著我們需要把npm鏡像更改為國內(nèi)淘寶鏡像，這樣在下載依賴的時(shí)候能夠更快。

查看npm源鏡像

npm config get registry

切換npm源鏡像

npm config set registry https://registry.npm.taobao.org

基礎(chǔ)框架使用Create-React-App創(chuàng)建的項(xiàng)目

三、安裝相關(guān)依賴 ????

在項(xiàng)目根目錄下執(zhí)行下面的命令一次性安裝eslint以及prettier的相關(guān)依賴

npm install eslint eslint-plugin-react @typescript-eslint/parser@^6.0.0 @typescript-eslint/eslint-plugin prettier eslint-plugin-prettier eslint-config-prettier --save-dev

如果你在安裝的過程中報(bào)以下錯(cuò)誤

就先執(zhí)行

npm install @typescript-eslint/parser@^6.0.0 --save-dev

接著再執(zhí)行其他命令即可解決

npm install eslint eslint-plugin-react @typescript-eslint/eslint-plugin prettier eslint-plugin-prettier eslint-config-prettier --save-dev

Prettier是一個(gè)代碼格式化工具，它能夠自動(dòng)調(diào)整代碼的格式，使其更易于閱讀和理解。Prettier可以與許多不同的編程語言一起使用，并且可以配置為根據(jù)項(xiàng)目的特定需求進(jìn)行格式化。

eslint是一個(gè)以可擴(kuò)展、每條規(guī)則獨(dú)立的，被設(shè)計(jì)為完全可配置的lint工具，一個(gè)QA工具，用來作為靜態(tài)代碼檢查，避免低級(jí)錯(cuò)誤和統(tǒng)一代碼的風(fēng)格。主要有以下特點(diǎn)：默認(rèn)規(guī)則包含所有 JSLint、 JSHint 中存在的規(guī)則；易遷移；規(guī)則可配置性高：可設(shè)置「 警告」、「 錯(cuò)誤」 兩個(gè) error 等級(jí)，或者直接禁用；包含代碼風(fēng)格檢測的規(guī)則( 可以丟掉 JSCS 了)；支持插件擴(kuò)展、 自定義規(guī)則

eslint-plugin-prettier是Prettier與ESLint的插件，它可以幫助你在使用ESLint進(jìn)行代碼質(zhì)量檢查時(shí)，將Prettier的格式化規(guī)則整合到ESLint中。這意味著當(dāng)你使用ESLint檢查代碼時(shí)，它也會(huì)自動(dòng)檢查代碼是否符合Prettier的格式化規(guī)則。

eslint-config-prettier是一個(gè)ESLint配置，它包含了使用Prettier插件時(shí)的ESLint規(guī)則。這個(gè)配置可以將Prettier的格式化規(guī)則應(yīng)用到ESLint的檢查中，從而確保代碼同時(shí)滿足ESLint的質(zhì)量標(biāo)準(zhǔn)和Prettier的格式化規(guī)則。

eslint-plugin-react是一個(gè)針對(duì) React 的 ESLint 插件，它包含了一些與 React 相關(guān)的規(guī)則，用于檢查 React 組件的代碼質(zhì)量和規(guī)范。

@typescript-eslint/eslint-plugin是一款專門針對(duì) TypeScript 項(xiàng)目的 ESLint 插件，通過它，我們可以充分利用 TypeScript 的類型系統(tǒng)來進(jìn)行更加嚴(yán)格的代碼檢查。

@typescript-eslint/parser是專門為TypeScript語法設(shè)計(jì)的解析器，能夠解析 TypeScript 中的所有語法。在解析 TypeScript 代碼時(shí)，會(huì)將 TypeScript 中的類型信息也解析出來，并將其注入到 AST 中，從而使得在進(jìn)行靜態(tài)檢查時(shí)，能夠更加準(zhǔn)確地判斷變量的類型和函數(shù)的參數(shù)等信息。

安裝成功以后查看package.json相關(guān)依賴是否安裝成功。

接著在項(xiàng)目根目錄下執(zhí)行 npx eslint --init 初始化eslintrc文件，該文件就是對(duì)我們的代碼進(jìn)行檢測的配置文件。

執(zhí)行完成以后項(xiàng)目根目錄下就會(huì)生成eslintrc.js這個(gè)文件

修改配置文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'react'],
  rules: {
    // “off” or 0 - 關(guān)閉規(guī)則
    // “warn” or 1 - 將規(guī)則視為一個(gè)警告（不會(huì)影響退出碼）
    // “error” or 2 -將規(guī)則視為一個(gè)錯(cuò)誤 (退出碼為1)
    quotes: ['error', 'single'], // 使用單引號(hào)
    eqeqeq: 2, //必須使用全等
    '@typescript-eslint/no-explicit-any': ['off'], // 這里不配置的話使用any類型就會(huì)報(bào)錯(cuò)
    'no-constant-condition': 2, // 禁止在條件中使用常量表達(dá)式 if(true) if(1)
    'no-dupe-keys': 2, // 在創(chuàng)建對(duì)象字面量時(shí)不允許鍵重復(fù) {a:1,a:1}
    'no-dupe-args': 2, // 函數(shù)參數(shù)不能重復(fù)
    'no-duplicate-case': 2, // switch中的case標(biāo)簽不能重復(fù)
    'no-eq-null': 2, // 禁止對(duì)null使用==或!=運(yùn)算符
    'no-extra-parens': 0, // 禁止非必要的括號(hào)
    'no-extra-semi': 2, // 禁止多余的冒號(hào)
    'no-func-assign': 2, // 禁止重復(fù)的函數(shù)聲明
    'no-irregular-whitespace': 2, // 不能有不規(guī)則的空格
    'linebreak-style': [0, 'windows'], // 換行風(fēng)格
    'no-multi-spaces': 1, // 不能用多余的空格
    'no-trailing-spaces': 1, // 一行結(jié)束后面不要有空格
    'no-unreachable': 2, // 不能有無法執(zhí)行的代碼
    'no-var': 2, // 禁用var，用let和const代替
    camelcase: 2, // 強(qiáng)制駝峰法命名
    indent: [2, 2], // 縮進(jìn)風(fēng)格
    'init-declarations': 0, // 聲明時(shí)必須賦初值
    // 避免 `eslint` 對(duì)于 `typescript` 函數(shù)重載的誤報(bào)
    'no-redeclare': 0, // 禁止重復(fù)聲明變量
    '@typescript-eslint/no-redeclare': 'error',
    '@typescript-eslint/no-unused-vars': 'off', // 不能有聲明后未被使用的變量或參數(shù)
    'react/display-name': 'off',
    'react/prop-types': 'off', // 默認(rèn)使用react/prop-types檢查
  },
};

四、編輯器設(shè)置 ????

經(jīng)過上面的操作我們就完成了eslint的配置，我使用的是webStorm編輯器，如果你是vscode自行百度一下，我們需要安裝Prettier插件，如果沒有Eslint也要進(jìn)行安裝。

插件安裝完成以后可能需要重啟webStorm。重啟以后進(jìn)行以下配置。

工具已經(jīng)生效了，eslint已經(jīng)開始檢查代碼是否規(guī)范了。

接著在項(xiàng)目根目錄下創(chuàng)建文件.prettierrc.js

module.exports = {
  semi: true,
  trailingComma: 'es5',
  // 使用單引號(hào)
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
};

配置webStorm

編輯前

Ctrl+s保存以后

到這里就eslint和prettier就完美的搭配上了，上面的案例都是比較基礎(chǔ)的配置，你可以根據(jù)自己的需求到相關(guān)的官網(wǎng)和社區(qū)進(jìn)行配置擴(kuò)展，滿足更多的代碼規(guī)范校驗(yàn)。

六、總結(jié)???

項(xiàng)目中使用prettier和eslint以后，Prettier可以根據(jù)配置的規(guī)則自動(dòng)格式化代碼，使代碼看起來更整潔、易讀、易于維護(hù)。由于代碼格式化可以自動(dòng)完成，開發(fā)者可以專注于編寫代碼，減少因代碼格式問題而分散注意力。Prettier可以輕松集成到編輯器、構(gòu)建工具和CI/CD流程中，使代碼格式化更加方便。Prettier的配置非常靈活，可以根據(jù)項(xiàng)目需求定制化配置規(guī)則，比如控制代碼的寬度、空格長度、是否使用分號(hào)結(jié)尾等。ESLint可以在代碼編寫過程中發(fā)現(xiàn)潛在的錯(cuò)誤和不符合規(guī)范的編碼風(fēng)格，避免低級(jí)錯(cuò)誤和潛在問題。ESLint可以根據(jù)配置的規(guī)則統(tǒng)一代碼風(fēng)格，使項(xiàng)目中的代碼看起來更一致、更易于維護(hù)。ESLint可以幫助開發(fā)者編寫更加規(guī)范、高質(zhì)量的代碼，減少潛在的錯(cuò)誤和問題。ESLint也可以輕松集成到編輯器、構(gòu)建工具和CI/CD流程中，使代碼質(zhì)量檢查更加方便。

我是Etc.End。如果文章對(duì)你有所幫助，能否幫我點(diǎn)個(gè)免費(fèi)的贊和收藏??。

?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??文章來源地址http://www.zghlxwxcb.cn/news/detail-769336.html

到了這里，關(guān)于第二章 React項(xiàng)目配置ESlint和Prettier實(shí)現(xiàn)自動(dòng)格式化代碼以及統(tǒng)一代碼風(fēng)格的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！