eslint-plugin-roblox-ts

What follows is an incomplete guide on how to get started using typescript-eslint with eslint-plugin-roblox-ts and prettier. We eventually plan to make a better guide and automate a number of these steps through rbxtsc command line options. But, for now, here is how to use these lint rules with VSCode.

Step 1: Install the ESLint plugin for VSCode

Install the following:

Step 2: Change your VSCode settings

Make sure the following settings are in your settings file (Ctrl + , to open the settings UI, then press the Open Settings (JSON) button in the top right).

These are according to my preferences, so feel free to change this according to your own desires:

    "eslint.useFlatConfig": true,
	"files.trimTrailingWhitespace": true,
	"files.insertFinalNewline": true,
	"files.trimFinalNewlines": true,
	"[typescript]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint",
		"editor.formatOnSave": true,
		"editor.formatOnPaste": true,
		"editor.formatOnType": true,
	},
	"[typescriptreact]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint",
		"editor.formatOnSave": true,
		"editor.formatOnPaste": true,
		"editor.formatOnType": true,
	},
	"eslint.packageManager": "npm",
	"eslint.run": "onType",
	"eslint.format.enable": true,

Step 3: Setup the eslint config file

Make a file named eslint.config.mjs and place this in the contents.

{
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import eslintPluginRoblox from "eslint-plugin-roblox-ts";

export default tseslint.config(
	eslint.configs.recommended,
	...tseslint.configs.recommended,
	eslintPluginPrettierRecommended,
	eslintPluginRoblox.configs.recommended,
	{
		rules: {
			"prettier/prettier": [
				"warn",
				{
					semi: true,
					trailingComma: "all",
					singleQuote: false,
					printWidth: 120,
					tabWidth: 4,
					useTabs: true,
					arrowParens: "avoid",
				},
			],
			"@typescript-eslint/no-unused-vars": "off",
			"@typescript-eslint/explicit-function-return-type": "off",
			"@typescript-eslint/no-namespace": "off",
			"@typescript-eslint/no-non-null-assertion": "off",
			"@typescript-eslint/no-empty-function": "warn",
			"prefer-const": [
				"warn",
				{
					destructuring: "all",
				},
			],
			"no-undef-init": "error",
		},
	},
	{
		languageOptions: {
			parserOptions: {
				projectService: {
					allowDefaultProject: ["*.mjs"],
				},
				ecmaVersion: 2018,
				sourceType: "module",
				tsconfigRootDir: "./tsconfig.json",
			},
		},
	},
);
}

Step 4: Install the necessary packages

Run the following command:

npm install --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint eslint-plugin-prettier eslint-plugin-roblox-ts

Step 5: Reload window

Type Ctrl+Shift+P and select Developer: Reload Window.