iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0

ESLint 介紹

ESLint

一套支援 ES6 / JSX 語法的程式碼檢測工具,具高度設定彈性與擴充性。能提前檢測出可疑的、具有潛在問題的程式碼,並顯示警告或錯誤訊息。

Why ESLint ?

  • 幫你找出語法錯誤
  • 確保團隊遵循最佳實踐
  • 提醒你刪掉多餘的程式碼
  • 統一基本的 Coding Style
  • 可以客製化團隊規範,也可以根據不同專案設置不同規範
  • ES6/JSX 支援度良好

將 ESLint 導入專案

我們選擇將 ESLint 與 Webpack 結合,透過 eslint-loader 在 Webpack 打包 JS/JSX 之前執行 ESLint 檢查。

首先配置 Webpack 設定檔

webpack.common.js
module.export = {
  module: {
    rules: {
      {
        test: /\.(js|jsx)$/,
        loader:  'eslint-loader',
        enforce:  'pre',
        exclude: /node_modules/,
        options: {
          // fix: true,  // 是否讓 ESLint 直接 fix
        },
      }
    }
  }
}

在專案根目錄新增 ESLint 設定檔

.eslintrc.json
{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "plugins": [],
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true, "modules": true }
  },
  "parser": "babel-eslint",
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  }
}

總結

為了確保團隊程式碼的品質以及風格的統一,我們導入了 ESLint 以及 Prettier。

ESLint 確保團隊程式碼質量

Prettier 確保團隊程式碼風格

參考資料


上一篇
導入 Prettier
下一篇
為專案客製化 ESLint 規則
系列文
Webpack with ASP.NET MVC30

尚未有邦友留言

立即登入留言