TIL: How to Get VSCode ESLint to Sort Imports

Me — Sun, 09 Apr 2023 00:00:00 +0000

I use VS Code as my text editor, one of the features I really like about VS Code is that it will format our file on save. Which saves needing to run a CLI tool to do it. For example, running prettier. As part of the formatting on save you can set an option to organise your imports as well.

If you open your settings.json, you can add a section like this:

{
  "eslint.validate": [
    "javascript",
    "svelte",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true,
      "source.fixAll": true
    }
  },
}

Now this format our typescript files automatically when we save it, including organising our imports. Now this is all well and good, except when we add the following ESLint plugin ESLint-plugin-import.

This plugin lets us set our own rules for how to sort plugins and how to organise them into groups. So our ESLint config may look something like this:

module.exports = {
  // ...
  extends: [
    // ...
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  rules: {
    // ...
    "import/order": [
      "warn",
      {
        groups: ["builtin", "external", ["sibling", "parent"], "index"],
        pathGroups: [
            {
                pattern: "$app/**",
                group: "external"
            },
            {
                pattern: "~/**",
                group: "sibling"
            }
        ],
        alphabetize: {
            order: "asc",
            caseInsensitive: true
        },
        "newlines-between": "always"
      }
    ]
  }
};

Now this will conflict with the way VS Code will format our imports, it will format them incorrectly according to the settings we have just set up in our ESLint config. To stop this from happening it’s very simple we need to remove the "source.organizeImports": true, line from our config. Now VS Code will use just ESLint to format our imports 🎉.

There is one downside to this approach I have noticed, which is unused imports no longer get removed automatically, which used to happen. But this will get fixed by pre-commit hooks.

Remove Unused Imports

How to Autosort our SvelteKit Imports

Me — Tue, 10 Jan 2023 00:00:00 +0000

In this post, we will go over how we can auto-sort our imports in our svelte files. To do this we will be using eslint and the eslint-import-plugin plugin.

If you’re anything like me you like have ordered imports, rather than random imports that can be hard to make sense of. In Python we have isort in golang we have goimports. In JavaScript we can use eslint with the above plugin. However, we need to set up some specific configuration.

Setup

I will create a new SvelteKit application but this should be equally applicable to existing applications and should work with both SvelteKit and Svelte. As all we are going to do is organise our imports.

npm create svelte@latest example
cd example
npm install

# Output
# create-svelte version 2.1.0
# 
# Welcome to SvelteKit!
# 
# ✔ Which Svelte app template? › SvelteKit demo app
# ✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
# ✔ Add ESLint for code linting? … No / Yes
# ✔ Add Prettier for code formatting? … No / Yes
# ✔ Add Playwright for browser testing? … No / Yes
# ✔ Add Vitest for unit testing? … No / Yes

eslint

Now onto the main part of this post let us edit our .eslintrc.cjs file which looks like this:

module.exports = {
	root: true,
	parser: '@typescript-eslint/parser',
	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
	plugins: ['svelte3', '@typescript-eslint'],
	ignorePatterns: ['*.cjs'],
	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
	settings: {
		'svelte3/typescript': () => require('typescript')
	},
	parserOptions: {
		sourceType: 'module',
		ecmaVersion: 2020
	},
	env: {
		browser: true,
		es2017: true,
		node: true
	}
};

eslint-plugin-svelte

First, we need to use an “unofficial” plugin for Svelte which also comes with an eslint parser (I think). See the relevant thread here.

npm install eslint-plugin-svelte --save-dev

Then we edit our eslint config file so it looks like this now:

module.exports = {
	root: true,
	parser: '@typescript-eslint/parser',
	parserOptions: {
		project: './tsconfig.json',
		extraFileExtensions: ['.svelte']
	},
	extends: [
		'eslint:recommended',
		'plugin:svelte/recommended',
		'plugin:@typescript-eslint/recommended',
		'prettier'
	],
	plugins: ['@typescript-eslint'],
	ignorePatterns: ['*.cjs'],
	overrides: [
		{
			files: ['*.svelte'],
			parser: 'svelte-eslint-parser',
			parserOptions: {
				parser: '@typescript-eslint/parser'
			}
		}
	],
	settings: {
		'svelte3/typescript': () => require('typescript')
	},
	parserOptions: {
		sourceType: 'module',
		ecmaVersion: 2020
	},
	env: {
		browser: true,
		es2017: true,
		node: true
	}
};

eslint-import-plugin

Now let’s add the plugin that will actually update our imports.

npm install eslint-plugin-import --save-dev

Now we want to edit our eslint config file so it looks like:

module.exports = {
	root: true,
	parser: '@typescript-eslint/parser',
	parserOptions: {
		project: './tsconfig.json',
		extraFileExtensions: ['.svelte']
	},
	extends: [
		'eslint:recommended',
		'plugin:svelte/recommended',
		'plugin:@typescript-eslint/recommended',
		'prettier',
        'plugin:import/errors',
		'plugin:import/warnings',
        'plugin:import/typescript'
	],
	plugins: ['@typescript-eslint'],
	ignorePatterns: ['*.cjs'],
	overrides: [
		{
			files: ['*.svelte'],
			parser: 'svelte-eslint-parser',
			parserOptions: {
				parser: '@typescript-eslint/parser'
			}
		}
	],
	rules: {
		'import/order': [
			'warn',
			{
				alphabetize: {
					order: 'asc',
					caseInsensitive: true
				},
				'newlines-between': 'always'
			}
		]
	},
	settings: {
		'svelte3/typescript': () => require('typescript')
	},
	parserOptions: {
		sourceType: 'module',
		ecmaVersion: 2020
	},
	env: {
		browser: true,
		es2017: true,
		node: true
	}
};

import/order

The most interesting change we did is to add a bunch of rules. We want to add rules for import/order which is what is used to sort our imports. In the example below we are setting any incorrectly ordered imports to warn us rather than throw an error. Then we are telling it to sort our imports alphabetically. We are also setting it to create new lines between the various groups. Where a group would be something like: builtin, external, parent, you can read more about it here.

rules: {
    'import/order': [
        'warn',
        {
            alphabetize: {
                order: 'asc',
                caseInsensitive: true
            },
            'newlines-between': 'always'
        }
    ]
},

We can auto fix imports if we run eslint with the --fix argument i.e. eslint --fix .. We can also our IDE auto sort our imports on save in VS Code add the following option to your settings.json file:

{
  "eslint.codeActionsOnSave.mode": "all",
}

This will attempt to fix all the issues raised by eslint for our file when we save it (you will need the eslint extension, https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).

Eslint on Haseeb Majid