Phát Nguyễn (Fast) phatnguyenuit

How to sort imports like a pro in TypeScript

Crossing reviews becomes a very common activity today in engineering behavior. To help us review changes for pull/merge requests easier, sorting imports can help us a much. The codebase becomes more professional and more consistent, reviewers will be happier, and the review process will be faster, focusing on the implementation changes ONLY.

Have you ever thought about how to sort imports in TypeScript projects automatically?

Let me show you how to archive sorting imports automatically in TypeScript projects with ESLint!

	module.exports = {
	parser: '@typescript-eslint/parser',
	parserOptions: {
	ecmaVersion: 2018,
	sourceType: 'module',
	},
	env: {
	node: true,
	},
	plugins: ['@typescript-eslint', 'prettier'],

	const fetchedPhotoUrls = [];

	function getCurrentPhoto() {
	const ele = document.querySelector(
	'[data-visualcompletion="media-vc-image"]',
	);

	return ele.src;
	}

	const THE_1ST_YEAR = 1864;
	const CYCLE_YEARS = 180;
	const NUM_OF_FATES = 9;
	const NUM_OF_YEARS_FOR_FATE = 20;

	const ORIGINS = ['Thượng Nguyên', 'Trung Nguyên', 'Hạ Nguyên'];
	const NINE_FATES_FACILITIES = [
	'Khảm-Thủy',
	'Khôn-Thổ',
	'Chấn-Mộc',

	declare module '*.module.css' {
	const classes: { readonly [key: string]: string };
	export default classes;
	}

	declare module '*.module.scss' {
	const classes: { readonly [key: string]: string };
	export default classes;
	}

	$with: 600px;
	$height: 200px;

	.helloScss {
	display: flex;
	align-items: center;
	justify-content: center;

	width: $with;
	height: $height;

	.helloCss {
	margin: 0;
	padding: 0;
	color: red;
	font-weight: bold;
	font-size: 2rem;
	}

	const https = require('https');

	function getJSONRequest(url) {
	return new Promise((resolve, reject) => {
	https
	.get(url, (res) => {
	let data = '';

	// called when a data chunk is received.
	res.on('data', (chunk) => {

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Simple dark mode implementation with CSS Variables</title>
	<link rel="stylesheet" type="text/css" href="./theme.css" />
	<style>
	p {