使用 ESLint 進行 TypeScript 匯入排序
本文將討論如何使用 ESLint 輕鬆設定匯入部分的樣式或排序。將討論 ESLint 中的 sort-imports 和 import/order 規則。
使用 ESLint 進行 TypeScript 匯入排序
乾淨的程式碼總是更好；它激發了未來的貢獻和維護。因此，保持一致的程式碼約定和格式樣式是重要的方面。
靜態程式碼分析也有利於 JavaScript 或 TypeScript 等解釋型語言。它將幫助你提前識別錯誤。
Linter 有助於識別這些型別的風格和程式問題。
ESLint 是廣泛使用的 linter 之一。它已被用於識別 TypeScript 程式碼樣式問題並修復它們。
在大型專案中，主要的樣式問題之一是管理匯入。開發人員經常來為程式碼庫做出貢獻。
他們新增了新的 import 語句，並且該部分增長了。ESLint 可用於更乾淨地組織匯入部分。
用於 TypeScript 匯入排序的 ESLint sort-imports 規則
ESLint 配置檔案可用於新增自定義規則。通常，它被稱為 eslintrc 檔案，由 JSON 格式的規則組成，如下所示。
如果按字母順序排序，獲得多個匯入會使開發人員的生活變得輕鬆。它還可以很容易地在 import 部分中找到特定成員。
帶有一些自定義配置的 sort-imports ESLint 規則將實現這一點。
假設我們得到了 import 語句，如下所示。
import 'module-1.js';
import * as employee from 'employee.js';
import * as company from 'company.js';
import {supervisor, agent} from 'company-context.js';
import {job, designation } from 'company-context-2.js';
import {bearer} from 'bearer.js';
import agent from 'agent.js';
import divide from 'utildivide.js';
import subscription from 'utilsub.js';
import add from 'utiladd.js';
接下來，我們可以將 sort-imports 規則新增到 ESLint 配置檔案中，如下所示。
"rules": {
"sort-imports": ["error", {
"ignoreCase": true,
"ignoreDeclarationSort": false,
"ignoreMemberSort": false,
"memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
"allowSeparatedGroups": false
}]
},
sort-imports 規則可以引發 error 和 warning 型別。除此之外，它還有其他可選引數，可以根據你的需要進行配置。
如果你希望 ESLint 忽略匯入的大小寫和順序，可以將 ignoreCase 引數設定為 true。你可以對 ESLint 執行以下命令來檢查匯入。
npm run lint
這會在上面的示例指令碼中引發錯誤，因為它沒有正確排序。如果你使用上述命令傳遞 --fix 標誌，ESLint 將修復你的匯入中的問題。
npm run lint --fix
因此，上述匯入的正確版本如下所示。
import 'module-1.js';
import * as company from 'company.js';
import * as employee from 'employee.js';
import {agent, supervisor} from 'company-context.js';
import {designation, job} from 'company-context-2.js';
import agent from 'agent.js';
import {bearer} from 'bearer.js';
import add from 'utiladd.js';
import divide from 'utildivide.js';
import subscription from 'utilsub.js';
它根據以下順序對這些匯入進行排序。
- 使用者成員語法
- 按第一個成員或別名的字母排序
用於 TypeScript 匯入排序的 ESLint import/order 規則
import/order 規則比我們之前討論的 sort-imports 規則更強大。這提供了多種選項來根據模組的性質訂購我們的匯入，例如內建模組、外部模組、父模組等。
因此，這比我們在 sort-imports 規則中看到的字母排序更先進。
要將其插入我們的 ESLint，我們應該安裝 eslint-plugin-import 外掛。讓我們執行 npm i 命令為我們的專案安裝它，如下所示。
npm i eslint-plugin-import --save-dev
--save-dev 會將此依賴項儲存到我們專案的 package.json 檔案中。現在，我們可以在 ESLint 配置檔案中使用 import/order 規則，如下所示。
"rules": {
"import/order": ["error",
{ "groups" :
[
"external",
"builtin",
"internal",
"sibling",
"parent",
"index"
]
}
]
},
groups 部分已配置為首先按外部模組排序匯入，然後是內建模組，依此類推。因此，以下是有效的 import 部分。
// "external" modules
import _ from 'lodash';
import express from 'express';
// "builtin" modules
import fs from 'fs';
import path from 'path';
// "internal" modules
import employee from 'src/employee';
// "sibling" modules
import netsalary from './payrole';
import epf from './payrole/epf';
// modules from a "parent" directory
import admin from '../admin';
import role from '../../admin/role';
// 6. "index" file
import main from './';
根據 ESLint 配置，上面的 import 部分是有效的。
因此，ESLint 可用於輕鬆設定匯入部分的樣式或排序。它使開發人員的生活變得輕鬆，併為你的程式碼庫的所有新手提供指導。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.