dionysusnu / eslint-plugin-roblox-ts

lint-rules

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. If you have a pre-existing .prettierrc file, you can move your rules into "prettier/prettier" (and delete .prettierrc). Either way, you can change your formatting preferences by editing the rules in "prettier/prettier".

{
    "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": [
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended",
        "plugin:roblox-ts/recommended"
    ],
    "rules": {
        "prettier/prettier": [
            "warn",
            {
                "semi": true,
                "trailingComma": "all",
                "singleQuote": false,
                "printWidth": 120,
                "tabWidth": 4,
                "useTabs": true
            }
        ],
        "@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"
    }
}

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.