eslint-plugin-roblox-ts

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:

	"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 .eslintrc and place this in the contents.

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "jsx": true,
        "useJSXTextNode": true,
        "ecmaVersion": 2018,
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": [
        "roblox-ts",
        "@typescript-eslint",
        "@typescript-eslint/eslint-plugin",
        "prettier"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
        "plugin:roblox-ts/recommended"
    ],
    "rules": {
        "prettier/prettier": "warn",
        "@typescript-eslint/array-type": [
            "warn",
            {
                "default": "generic",
                "readonly": "generic"
            }
        ],
        "@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"
    }
}

If you have a pre-existing .prettierrc file, you can keep it, and eslint will pick it up and use that. If not, you can create it with this recommended config:

{
	"semi": true,
	"trailingComma": "all",
	"singleQuote": false,
	"printWidth": 120,
	"tabWidth": 4,
	"useTabs": true
}

Step 4: Install the necessary packages

Run the following command:

npm i -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-roblox-ts

Step 5: Reload window

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