动态

详情 返回 返回

通過引入eslint-config包的方式一站式解決項目代碼風格和規範 - 动态 详情

背景

大家好，我是前端老六。今天想提及一下項目代碼規範這一塊，平時我們在搭建一個前端項目的時候，項目代碼規範是我們要考慮的，在如今多人開發一個項目的時候那更是不能疏忽。對於前端來説呢，我們常用的就是eslint+prettier，兩者集成的方式，eslint負責監測我們的語法錯誤，而prettier對我們的代碼風格進行規範。

ESlint

ESLint 是一個開源的 JavaScript 代碼檢查工具，由 Nicholas C. Zakas 於2013年6月創建。代碼檢查是一種靜態的分析，常用於尋找有問題的模式或者代碼，並且不依賴於具體的編碼風格。對大多數編程語言來説都會有代碼檢查，一般來説編譯程序會內置檢查工具。

JavaScript 是一個動態的弱類型語言，在開發中比較容易出錯。因為沒有編譯程序，為了尋找 JavaScript 代碼錯誤通常需要在執行過程中不斷調試。像 ESLint 這樣的可以讓程序員在編碼的過程中發現問題而不是在執行的過程中。

Lint工具經歷了JSLint、JSHint，最後是ESLint，ESLint 號稱下一代的 JS Linter 工具，它的靈感來源於 PHP Linter，將源代碼解析成 AST，然後檢測 AST 來判斷代碼是否符合規則。ESLint 使用 esprima 將源代碼解析吃成 AST，然後你就可以使用任意規則來檢測 AST 是否符合預期，這也是 ESLint 高可擴展性的原因。

ES6 發佈後，因為新增了很多語法，JSHint 短期內無法提供支持，而 ESLint 只需要有合適的解析器就能夠進行 lint 檢查。這時 babel 為 ESLint 提供了支持，開發了 babel-eslint，讓ESLint 成為最快支持 ES6 語法的 lint 工具。

ESlint可以做些什麼

1. 避免低級bug，找出可能發生的語法錯誤

使用未聲明變量、修改 const 變量……

2. 提示刪除多餘的代碼

聲明而未使用的變量、重複的 case ……

3. 確保代碼遵循最佳實踐

可參考 airbnb style、javascript standard

4. 統一團隊的代碼風格

加不加分號？使用 tab 還是空格？

Prettier

prettier是一款強勢武斷的代碼格式化工具，它幾乎移除了編輯器本身所有的對代碼的操作格式，然後重新顯示。就是為了讓所有用這套規則的人有完全相同的代碼。在團隊協作開發的時候更是體現出它的優勢。與eslint，tslint等各種格式化工具不同的是，prettier只關心代碼格式化，而不關心語法問題。
prettier 的優勢也很明顯，它支持

  • JavaScript （包括實驗性功能）
  • JSX
  • Angular
  • Vue
  • Flow
  • TypeScript
  • CSS、Less 和 SCSS
  • HTML
  • JSON
  • GraphQL
  • Markdown，包括 GFM 和 MDX
  • YAML

不少編輯器內置了prettier插件支持，可以啓用在保存時自動格式化代碼風格，例如，如果你用的是Webstorm，在項目下載了prettier的情況下可以這樣這樣設置一下

截屏2023-02-17 15.16.19.png

使用Prettier在code review時不需要再討論代碼樣式，節省了時間與精力。

搭配幹活，快樂加倍

就如上述一樣，基於eslint和prettier的各自特性，不少人就想那麼把他們兩個集合起來，快樂就加倍了，剛好就是一個負責監測語法，一個負責規範風格，一個是靈魂，一個是形體，嗯...絕妙！Nice*1000...

隨之而出現的問題

查閲ESlint文檔以及平時所做的項目我們知道ESlint很多規則是需要在項目根目錄創建配置文件來配置的，例如.eslintrc文件。我們需要在裏面加入我們的配置規則，例如我這裏有一個vue3+typescript，我需要配置規則來適配我們的項目

/* .eslintrc */
{
    extends: [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
    ],
    overrides: [],
    parser: "vue-eslint-parser",
    parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
        parser: "@typescript-eslint/parser",
    },
    plugins: ["vue", "@typescript-eslint"],
    rules: {},
};

prettier可以通過添加配置文件，來更改默認的prettier格式化代碼的規則，就是説如果你使用prettier的默認規則，那麼你不需要在根目錄下創建配置文件，這裏我是需要的，於是創建一個.prettierrc文件

/* .prettierrc */
{
    "semi": false,
    "singleQuote": true,
    "printWidth": 120,
    "htmlWhitespaceSensitivity": "ignore",
    "plugins": ["prettier-plugin-tailwindcss"]
}

接下來我們需要把prettier集成進去，讓eslint也能提示代碼中不符合prettier的格式錯誤。這裏需要安裝兩個插件。

  • eslint-plugin-prettier： 基於 prettier 代碼風格的 eslint 規則，即eslint使用pretter規則來格式化代碼。

  • eslint-config-prettier： 禁用所有與格式相關的 eslint 規則，解決 prettier 與 eslint 規則衝突，確保將其放在 extends 隊列最後，這樣它將覆蓋其他配置

    /* .eslintrc */
{
extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"  /*新增，必須放在最後面 */
],
overrides: [],
parser: "vue-eslint-parser",
parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    parser: "@typescript-eslint/parser",
},
plugins: ["vue", "@typescript-eslint"],
rules: {},
};

大功告成，最後安裝這些配置要用到的所有依賴，如下

{
  "@typescript-eslint/eslint-plugin": "^5.50.0",
  "@typescript-eslint/parser": "^5.50.0",
  "eslint-plugin-vue": "^9.9.0",
  "eslint-config-prettier": "^8.6.0",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint": "^8.33.0",
  "prettier": "^2.8.3"
}

這樣之後一個支持vue3-ts的eslint+prettier集成就在你的項目中生效了，接下來就是愉快的敲代碼了。

引發的思考

如果説我們每次開始配置一個項目的ESlint+prettier都這樣操作是不是太麻煩了，又要創建配置文件配置好多，還要下載依賴，少了一個都要出問題，還要去翻之前是怎麼配的，總之來説就是太麻煩了，像我這種記憶力又不好動作還慢的人來説，那不是光一個配置搞半天。嗯...不行，我身體上心理上都接受不了，難受。當時一時沒有想到好的解決辦法，這個問題就擱置了好久。

轉機

在普通上班族的一天，這天公司技術leader讓我研究一下nuxt3，把之前那套nuxt2的項目基礎架構升級到nuxt3，以後的新項目用nuxt3寫。那天我搞着搞着，漸漸的來到了Eslint的腳下，我發現好像我不會配它，之前都是vue3的插件和規則，這次來個核彈。於是我打開我的github找找解決方案，慌忙的尋找，直到我看到了一塊神奇的代碼

截屏2023-02-17 16.30.26.png

我在想，nuxt3項目可以這麼方便去配置嗎？

後來我去看了這個庫的源碼，恍然大悟，原來配置項包括插件都是可以打成包分享的，那麼我靈機一動，目前有那麼多類型的前端項目，js的vue3、react、nuxt3等，ts的vue3、react、nuxt3等。github有沒有一站式把所有基礎eslint+prettier對應的各種各種項目的都配置好的庫呢，幾經尋找，我看到了這個庫，code-style-lint，他把各種類型項目的eslint+prettier已經集成了，可以直接簡便的在項目中運用，並且不影響你在項目中覆蓋這個庫原來的配置和擴展其他規則，在使用了過後，我的vue3+ts項目的eslint配置文件簡化成了這樣

//.eslintrc
{
  "env": {
  "browser": true,
      "es2021": true,
      "node": true
},
  "extends": [
  "./.eslintrc-auto-import.json", /* vite-plugin-autoImport 插件的eslint規則 */
  "code-style-lint-vue3-ts"
],
    "rules": {
  "vue/multi-word-component-names": "off"
}
}

另外我也不用下載那麼多的配置需要用到的依賴項了，

{
  "@typescript-eslint/eslint-plugin": "^5.50.0",
  "@typescript-eslint/parser": "^5.50.0",
  "eslint-plugin-vue": "^9.9.0",
  "eslint-config-prettier": "^8.6.0",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint": "^8.33.0",
  "prettier": "^2.8.3"
}

變成了，

{
  "eslint-config-code-style-lint-vue3-ts": "^3.0.5",
  "eslint": "^8.33.0",
  "prettier": "^2.8.3"
}

結語

平時大家在做項目的時候項目配置這裏會遇到一些問題，eslint+prettier又是比較常規常用的方案，希望這篇文章能夠解決你的部分問題。感謝你的幾分鐘喲！Day day up ! QQQQQQ

提到的庫：code-style-lint, nuxt-eslint

參考文章：vue3+ts+vite項目中使用eslint+prettier+stylelint+husky指南 - 掘金 (juejin.cn)

eslint , 前端構建 , prettier
点赞

Add a new 评论

Some HTML is okay.